If your latest SEO audit is showing a missing favicon or favicon failed to load error or you have simply noticed that your website favicon does not load up in the browser tab, this post is for you.
But before we dive deeper into the subject, let’s first understand what, why, and how of the website favicon.
Table of Contents |
What is a Favicon?
Favicon is a very small icon that represents your website’s identity. In that, favicon is just a shortened version of the phrase “favorite icon”. Typically, a favicon is a 16x16 pixel image that loads up with the website. Favicon is visible on the browser tab, before the page title, when you load a website, in your bookmarks, or on the search results page.
Here’s a visual example,
History of Favicon
Microsoft introduced the favicon in 1999 with the release of Internet Explorer 5. Some of you may be too young to remember the heady old days when the Internet Explorer was the undisputed king of the hill, until Chrome launched and robbed its sheen.
Originally, the favicon was an ICO file called {favicon.ico} which was placed in the root directory of the website. It would then be displayed in the title tab and on the bookmarks bar. In due time, favicon was adopted by other browsers and became a universal feature for websites.
Interestingly, initially website owners can track the number of visitors who had bookmarked their website based on favicon pull requests. However, this method of tracking bookmarks no longer works as modern browsers pull the favicon file regardless of the bookmarking action by the users.
The World Wide Web Consortium (W3C) published a recommendation for favicon files in 2005. The favicon file should be named {favicon.ico} and placed in the root directory of the website. Later in 2011, W3C updated these recommendations by adding newer image formats and pixel sizes for the use of favicons.
Favicon file formats
While initially limited to {.ico} files the favicon image format has extended over the years. Nowadays, you can use images in ico, png, gif, animated gif, apng, and svg for loading favicons. However, not all browsers will load all types of favicon images. Which is also one of the reasons why your website favicon might be missing.
Additionally, favicon files are now supported in up to 64x64 pixel sizes and in varying color depths (8-bit, 24-bit, or 32-bit).
Different browsers load favicons differently. For instance, if links to both png and ico favicon are present, png-favicon-compatible browsers can pick and choose which file and resolution to use. For example, Safari will choose the favicon file that comes last whereas Chrome for Mac will use the ico formatted file or the 32x32 pixel png.
Recommended file formats for Favicons
Here are the image formats that work best for favicon upload:
PNG - lightweight and loads quickly
ICO - Supported by almost all browsers
SVG - Scales without distortion but limited browser support
Recommended file sizes for Favicons
Since the original 16x16 pixel size requirement is too small for modern high-resolution displays, the favicon file sizes have also been updated with time. Here are the ideal image size recommendations for favicons on modern sites:
16x16 pixels - for browser tab favicons
32x32 pixels - for taskbar shortcuts and browser homepage favorites
96x96 pixels - for desktop shortcut favicons
180x180 pixels - for Apple touch favicons
How to add a favicon in website HTML?
Favicon is added using a simple string in your website’s header also known as
Here the reference (href) can be a file on the server or a link to a file that is hosted elsewhere.
Modern use of Favicons
Favicons have evolved from a simple iconified representation of your website to a critical branding and authenticity requirement. A website without a favicon immediately smells dubious these days. Here’s how modern websites use the favicon.
Click and Touch Controls
Modern computing is driven by point and click devices and touch controls. Favicons serve as an important visual cue for users in both instances, allowing them to quickly interact with their favorite websites and pages. For instance, browser bookmarks can be saved as icons on the desktop and users can also add their favorite bookmarks as an app icon on their phone screens. In both cases, a correctly configured favicon will take the place of the desktop icon or app icon, giving users a visual cue and also improving the user experience.
Branding
Having a cool, memorable favicon makes your website look more professional and polished. It's a subtle way to reinforce your brand and make it stick in people's minds. Basically, favicons are like a mini billboard for your website, helping people recognize and remember you even when they're juggling a bunch of tabs. Global brands are using favicons as a brand-recall tool. One of our clients, Apollo Tyres, recently updated their favicon globally to synchronize all domains and subdomains under one brand identity.
Search Engine Optimization
While favicons do not have a direct impact on your website’s visibility in the search results, an SEO audit will still check the website for a properly loading favicon. Because, it lends credibility to your website and acts as a signal of authenticity for the users. Google Search Bots also look for a valid favicon file when crawling your website. Additionally, websites without a favicon are often associated with spam sites.
In terms of on-page SEO, we always advise clients to use a well-optimized favicon file to ensure quick loading. Because sometimes using a larger than recommended favicon file size may cause page-load issues, or your page may load and the favicon may load after a delay. Which is not good from the UI-UX perspective.
How to fix a missing favicon error?
There are a few scenarios where your website favicon may not be loading:
- One, the favicon is not uploaded. In that case, fixing the error is as simple as designing a favicon and uploading it.
- Two, the favicon file format or size is not compatible with the browser you are using. In such cases, we recommend re-uploading your favicon in universally supported file formats like PNG and ICO. Typically, if you are using a website builder or a content management platform like WordPress, you can simply go to the tools menu and re-upload the correct file.
- Three, the favicon file link is broken. This is when you are getting a “favicon.ico 404” error. This error usually pops up when you are using a file link to display the favicon. Meaning that your favicon file is stored somewhere else and the file link has broken. In this case, fixing the file link and adding it to the code again will fix the 404 error.
- If your favicon is still not visible, it might be a coding error that may require a developer intervention. These errors can range from improper placement of the favicon code to naming errors in the file manager.
Tips for designing a Favicon
Since the favicon size is so small, the main challenge is to create an immediately identifiable design. Here are a few tips to create a visually appealing favicon.
- Avoid using long words or text in your favicon image. You can get away with potentially 2 to 3 words, just like DO or WIX, but not more than that.
- Use images in the recommended file sizes and formats only.
- Use full or partial representation of your logo, for example, Apollo Tyres and Google use only the first letter of their brand name as the favicon.
- Use contrasting colors to make your favicon stand out on light, dark, and colored tabs and backgrounds.
Go create your Favicon!
In conclusion, favicons are vital for branding, user experience, and website credibility. Ensure your favicon is properly implemented using recommended formats and sizes to avoid errors and enhance your site's overall presentation. By following the tips outlined in this blog, you can create a favicon that effectively represents your website and leaves a lasting impression on visitors.
If you need more help, you can always write to info@docommunication.io.
