We are not going to explain what a Favicon is in this guide instead you will learn how to add a favicon.
No matter what tech stack you are using to build a website this blog will cover.
How to Add A Favicon on A Static HTML CSS JS Website?
The process of installing a favicon on a static website is very easy and can be done in just few steps.
At this stage we already assuming that you have idea about programming knowledge so to add edit and update the code.
- The approach of the file structure of the website can be different in every case. It depends how you want to keep the file structure. But the most ideal way is to create a separate folder for the images/resources on the hosting and keep all the images, media in that file.
You can manage easily by this way.
Let's suppose that your images are in the image folder inside the main root on the hosting. Here how you can add the favicon.
You have to edit the index.html or index.php file.
In the <head></head> you have to add this code
<!-- Example: include in your <head> -->
<link rel="icon" href="/images/favicon.ico" sizes="32x32" type="image/png" />Your file name must be favicon.ico.
If the file name is something else then you have to either rename the file or update the same name in the above code after /images/.
Once you add this just hit the save button and save the file and update. Your favicon will be updated. Sometimes it will take few minutes to update.
If not showing then clear cache and reload the page again.
How to Add A Favicon on WordPress Website?
Installing a favicon on a WordPress site is very easy and can be done by a beginner easily. Because you don't have to edit the code base.
Follow these steps to update the favicon on a WordPress website
Go to Appearance → Customize → Site Identity in your WordPress admin > Choose or upload the image in the gallery and save it.
The favicon will be updated after a few minutes.
How to Add A Favicon on a Next.js Website?
Next JS website can be difficult for those who don't have programming knowledge or at least an understanding of basic code editing without breaking the website.
If you are an absolute beginner, then we suggest not editing directly on your server; instead, try it locally, and once you are sure, then push to live only.
Here is how you can update the favicon on a Next JS website
- Create your favicon (preferably favicon.ico, or use a .png if needed).
- Place the favicon in your project's public folder as /public/favicon.ico.
- If you're using the Next.js App Router (/app), either add /app/icon.ico or set the icon in your metadata:
export const metadata = {
icons: {
icon: "/favicon.ico",
},
};If you're using the Pages Router (/pages), add the following inside the <Head> component:
<link rel="icon" href="/favicon.ico" />- Save your changes and restart the development server with npm run dev.
- Open your website and perform a hard refresh (Ctrl + Shift + R on Windows/Linux or Cmd + Shift + R on Mac) to clear the cached favicon.
- If the old favicon still appears, rename the file (for example, favicon-v2.ico) and update the reference to the new filename to bypass browser caching.
How To Create a Favicon Without Any Software?
You can easily create a favicon in many ways without using any software, using our free online Favicon Generator.
How to check Favicon?
After adding the favicon using the above guide if still you are not sure that you have added the favicon correctly or not then you can use only free online favicon checker tool to test it also.
Open the favicon checker page and paste your website URL and our tool will check it in a single click and you will get a confirmed result.
Written by Favicon Generator Team
Practical guides on favicons, PWAs, and web branding. Generate your complete favicon package free with our online tools.