A favicon (the small icon next to your site name) is more important than you might think. It allows users to visually distinguish your site from others in search results, which builds up brand recognition over time and can increase your click-through rate. Not having one can make you seem unprofessional, which is why it can be quite frustrating when you add a favicon, but it doesn't show up. This guide will cover how to properly add a favicon to your HTML page and help you troubleshoot common issues that may prevent its display.
How to add a favicon in HTML (step by step)
The most common reason that a favicon is not working is that you made a mistake when adding it in the first place. To clarify, this is an easy mistake to make. The internet is full of outdated and poor advice when it comes to this topic. We'll show you how to add a favicon step-by-step so you can verify that you've done it correctly.
- Creating your favicon image: Your favicon should be a square aspect ratio and a multiple of 48x48. It's best to use a simple design, since it may be downscaled to 16x16 in some instances.
- Save your favicon image: The most compatible favicon format is .ico, so we recommend using that. Name it "favicon".
- Place the file in your website's root directory: Your favicon should ideally be in the top-level folder of your website, since many browsers look for it in this location by default. This also ensures that your site uses one favicon across all pages.
- Link your favicon in HTML: In your page's <head> section, we recommend adding the following link to your favicon:
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">Ensure that you replace the text after /images/ with the correct name and file format of your favicon. Note: According to W3C, you should not be using `link rel="shortcut icon", as this is non-conforming and will be ignored.
Troubleshooting steps
If you have followed the above steps exactly and your favicon is still not showing up, either in your browser or in Google search, don't stress. There are still a few steps you can take to resolve favicon issues.
Clear your browser and CDN cache
Your browser typically "caches" websites you have visited before, saving a local copy of the website so that you can load it faster in the future. If your favicon has not updated, viewing it might be as simple as clearing your browser cache (typically found in history>clear history) or visiting your site in an incognito window.
If you're using a Content Delivery Network (CDN), such as Cloudflare, ensure you clear the cache there, too.
Double-check your file format, size, and file name
Some platforms don't accept certain file types for favicons. Shopify, for example, doesn't accept SVGs, despite them being supported by most modern browsers. Try uploading an .ico file and double-check the dimensions and file name to ensure they're correct. It's easy to accidentally add another pixel when cropping or mistype a filename letter in your code.
Visit your image path to make sure it loads
The problem might not be a problem with your code or the image file itself. Rather, your server may be failing to serve the image. Try visiting the direct link to your favicon in your browser and see if it shows up. If it doesn't, there could be a number of fixes, including reuploading the image if it is corrupted, ensuring the directory has the correct permissions, and checking for errors in your web server's log files.
Make sure you're using the right MIME format
Beginners often copy and paste the code to link to their favicon in their header, but forget to change the MIME type, leading to issues. Check that the type="image/..." section matches your image's file type. Here's a quick refresher:
- ico:
type=image/x-icon - PNG:
image/png - JPEG:
image/jpeg - GIF:
image/gif - SVG:
image/svg+xml
Check your HTML for errors in other places
An error somewhere else in your code may prevent your favicon link from working correctly. Carefully check for common errors such as missing closing tags, typos, etc.
Local File vs. Live Website
If you’re opening an HTML file directly from your computer (file:// path), some browsers won’t show the favicon for security reasons or caching quirks. Try testing your website from a local web server, or sign up for BitLaunch and use one of our private VPS servers to host your files.
Favicon not showing in Google search?
If your favicon is showing in your browser but not in Google search, it's likely that the search engine has not yet crawled your website to notice the change. You can manually request that Google recrawl your site in Google Search Console, but this may still take several days.
You should also check Search Console for favicon errors by using the URL Inspection tool on your homepage and viewing the page resources – it should list the favicon. If it does not, check your robots.txt to make sure that it's not blocked there.
Summary
To summarize, if your favicon does not show up locally or on Google for a few weeks, there's no need to worry. This is normal and expected behaviour. If the issues continue, however, you will want to take action. A good start is to clear both your browser and CDN cache. If that doesn't work, carefully check your HTML code for errors, both around the favicon link and in general. You can then move on to verifying that you're using the correct image and MIME format. Finally, ensure that your favicon's directory has the right permissions and your web server is functioning as expected.
Need a privacy-respecting server to launch your website? Sign up for BitLaunch and talk to our support for a free trial.