How to Add a Favicon to Your Website (HTML Guide)
You have your favicon files ready, so now they need to actually appear in the browser. This guide shows the exact HTML to use, where to put the files, how to handle WordPress, and what to do when the icon refuses to show up.
Table of Contents
The Files You Need First
Before touching any HTML, make sure you have a small set of icon files. A favicon generator produces these from one image. At minimum you want a favicon.ico, a couple of PNG sizes for sharp tabs, and an Apple touch icon for iOS home screens.
- favicon.ico
- 16x16.png and 32x32.png
- 180x180.png (Apple touch icon)
- 192x192.png and 512x512.png (Android and web apps)
Where to Place the Files
The simplest approach is to put the icon files in the root folder of your website, the same place as your homepage. Browsers even look for a favicon.ico in the root automatically, so this location is a safe default. If you prefer an assets or images folder, that works too, as long as your HTML points to the correct path.
The HTML to Add
Place these lines inside the <head> section of your HTML, ideally near the top. They tell the browser which icon to use in each situation.
<!-- Classic fallback for all browsers --> <link rel="icon" href="/favicon.ico" sizes="any" /> <!-- PNG icons for modern browsers --> <link rel="icon" type="image/png" sizes="32x32" href="/32x32.png" /> <link rel="icon" type="image/png" sizes="16x16" href="/16x16.png" /> <!-- Apple touch icon for iOS home screens --> <link rel="apple-touch-icon" sizes="180x180" href="/180x180.png" /> <!-- Web app manifest for Android and PWAs --> <link rel="manifest" href="/site.webmanifest" />
The manifest line is optional, but it lets Android and progressive web apps pick up your larger icons. If you do not have a manifest yet, you can leave that line out and still have a working favicon.
Adding a Favicon in WordPress
WordPress calls the favicon a Site Icon and gives you a built-in way to set it without editing code:
1. Open your dashboard and go to Appearance, then Customize.
2. Select Site Identity and find the Site Icon option.
3. Upload a square image at least 512 by 512 pixels and publish. WordPress generates the smaller sizes for you.
If your theme does not expose this option, you can add the HTML link tags to your header template or use a small plugin that injects them for you.
When the Favicon Will Not Show
A favicon that does not appear is almost always one of these issues:
- Cached old icon. Browsers store favicons aggressively. Do a hard refresh or open the page in a private window to see the new one.
- Wrong file path. Double-check that the href in your HTML matches where the file actually sits.
- File not uploaded. Confirm the icon files made it to the server, not just your local folder.
- Mismatched size attribute. Make sure the sizes value in the link tag matches the real image dimensions.
Once the path is correct and the cache is cleared, your favicon will appear in the tab on every page of your site.
What Each Link Tag Does
The favicon link tags can look like a wall of nearly identical lines. Understanding what each one is for makes it easy to trim what you do not need and keep what you do.
- icon with favicon.ico. The universal fallback. Every browser, old or new, understands it. The
sizes="any"hint tells the browser the file contains multiple sizes. - icon with a PNG and a size. These give modern browsers a crisp raster option for tabs, with 16 and 32 pixel versions covering standard and high-DPI screens.
- apple-touch-icon. Used when someone adds your site to an iPhone or iPad home screen. iOS ignores the regular favicon for this and looks for this tag instead.
- manifest. Points to a small JSON file that lists your larger icons for Android and progressive web apps.
If you only want the basics, the favicon.ico line plus a 32 pixel PNG covers the everyday browser view. Add the Apple touch icon and manifest when you care about how the site looks on phone home screens.
Adding a Favicon on Other Platforms
Not everyone edits raw HTML. Most popular site builders include a favicon setting so you can upload an image and let the platform insert the tags for you.
Shopify
In your theme settings, look for a favicon or logo option, often under the theme customizer. Upload a square image and Shopify resizes and links it across your store automatically.
Wix and Squarespace
Both builders offer a site icon or favicon field in their settings. You upload your image once and the platform handles the technical side. A square image of at least 512 pixels gives the cleanest result.
Static Sites and Frameworks
For hand-built sites or frameworks, place the icon files in your public or root directory and add the link tags to your shared layout or head template. Adding them once in a shared layout means every page picks them up.
The Web App Manifest in Brief
The manifest is optional, but it is what lets Android and installable web apps use your larger icons. It is a short JSON file that lists your icons and a few app details. A minimal version looks like this:
{
"name": "Your Site",
"icons": [
{ "src": "/192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/512x512.png", "sizes": "512x512", "type": "image/png" }
]
}Save it as site.webmanifest in your root and link it from the head with the manifest tag. If you do not need installable app behavior, you can leave the manifest out entirely and your favicon will still work in browsers.
Verifying the Favicon Is Live
After uploading, confirm everything works before moving on. A few quick checks save you from a favicon that quietly fails for some visitors.
- Visit the file directly. Open
yoursite.com/favicon.icoin your browser. If the icon loads, the file is in the right place. - Check the tab in a private window. This bypasses the cache so you see the current icon, not an old one.
- Test on a phone. Add the site to a home screen and confirm the larger icon appears cleanly.
- View the page source. Confirm your link tags are present in the head and the paths are correct.
Once these checks pass, your favicon is correctly installed and visible to everyone who visits.
FAQs
Do I need to add the favicon to every page?
If your pages share a common header or layout, you only add the link tags once there and every page inherits them. Static sites with separate files need the tags in each page head.
Why does my favicon still show the old image?
Browser caching is the usual cause. Clear the cache or load the page in a private window. You can also rename the file to force a fresh fetch.
Is favicon.ico still required?
It is not strictly required, but keeping it in your root is the most reliable fallback. Browsers will look for it there even without a link tag.