Posted On : 03 December 2020
Favicons have recently started to become very popular in the digital space, even though they have existed for a very long time. They are considered to be a critical part of SEO strategies as well since they allow the websites or brands to visually represent themselves. Therefore, it makes sense that you employ favicons for your site, too, and increase the chances of your site being recognized in the digital world. The following blog covers more about the favicons and why exactly you need them.
What is a Favicon?
Favicons are basically the icons used to represent a site or brand. They are small images, usually in the size of 16x16 pixels. They can be viewed next to the page titles in the mobile search results of Google. They can also be seen in bookmarks, browser tabs, and history. It is usually preferred that the Favicon of a site be the same as the logo of the business or brand. In this way, the representation of the overall brand can be coherent.
When websites don’t have a favicon available in the source code, the browser tends to use a generic icon to represent the site. Many companies that create web applications, such a Google, tend to use different favicons for each one of the web property and application. For instance, Google Maps, Google Images, and Google Search Console each have a different favicon. The favicons can be added to the page in the <head> section of the site with the help of the following code:
<link rel="shortcut icon" href="https://www.example.com/favicon.ico" />
The URL basically refers to the stored image file. It is preferred that the .ico file format is utilized for the favicons. However, the major browsers also support GIF and PNG files.
Fave Icon History
The name “favicon” basically combines two words: favorite and icon. The name is a result of the concept formulated by Microsoft Internet Explorer. The Internet Explorer 5 that was released in 1999, used the file as a shortcut icon in the rel element. At this time, Microsoft Internet Explorer was fighting with Netscape Navigator for the control of the market. Eventually, the release of the Favicon provided a breakthrough to the internet explorer and allowed Microsoft to dominate the market.
The company allowed the users to add websites to their favorites list as well while introducing the Favicon, so the users could easily navigate through tons of websites. In other words, favicons were preferred because they allowed users to differentiate between different websites. Microsoft chose the .ico format for the favicons since it was extensively employed by the operating system of Windows.
The Favicon was eventually standardized by W3C that stands for World Wide Web Consortium. It is now a defining feature of the browser. They are also fun to use, as businesses and brands can make their favicons in any way they want, showing creativity and innovation.
Importance of Favicon for SEO
Favicons have numerous benefits when it comes to brand representation in the digital world. It is important to remember that there are no apparent effects of favicons on the ranking or the SEO of the website. However, favicons can indirectly affect the SEO of the websites. For instance, they increase the usability of the website. The usability of the site has an association with improved search engine rankings.
With a favicon together with the title of the site on history archives, bookmarks, browser tabs, and other parts, users are able to save time by quickly identifying the site. They can then browse through the intended site without any trouble. While favicons might only affect the usability of a site by a small percentage, they are still crucial for SEO.
It appears that favicons are also helpful in allowing the sites to be easily saved and bookmarked on the browser. Various search engines like Google make use of the Chrome browser for users by which they can identify multiple search ranking signals for the websites bookmarked on the web. In this way, websites with favicons might get bookmarked, and they can be identified with the Chrome browser. In case of no favicon on the site, your site might not get bookmarks and indirectly lose the search ranking signal.
Design a favicon
Favicon images need to be adequately designed, so they can be appropriate to use. The size of the favicons also matters because the designed logo should be recognizable from wherever they can be seen. One good example of Favicon is the Google logo since it works effectively for the more giant screens as well as the small screens. The favicons also need to be adequately designed, so they can be seen as a shortcut icon, bookmark icon, or tab icon in an effective manner.
Accordingly, favicons need to be recognizable first of all. Whatever your design, the users should be able to see them easily. Therefore, it is mostly preferred to cut the need for adding texts and instead focus on the colors and design of the icon. In doing so, it is also essential to make sure that Favicon can attract users. On the other hand, if you are designing a favicon for your business, you should consider using your logo or any other symbol you want the users to associate with your brand. In this way, the users will be better able to link a particular logo with your business. In case your logo is not proper to fit the quadratic canvas, you can use a recognizable part of your logo.
Another thing to consider is how clear and transparent your Favicon is. Favicons are not traditional marketing tools. So it makes no sense to see it as a price tag or an announcement banner. Accordingly, texts should never be part of the favicons. On the other hand, it is also not appropriate to use a photo for the Favicon because it will be unrecognizable then. You can also have two versions of your Favicon. One can be on the transparent background to be used on the URL bar and bookmarks lists. Another can be on the solid fill that can be used for getting a uniform look on the devices and browsers.
Favicon specifications
Favicon size is also something to consider when designing you on the icon. Here are some common favicons and their sizes:
- A browser favicon with size 16x16
- A taskbar shortcut icon with size 32x32
- A Desktop shortcut icon with size 96x96
Apple Touch Icons
The Apple iOS consists of a feature known as “Add to Home Screen” that makes the site on the mobile look like an application. The apple-touch icon, accordingly, offers a device-specific application icon. Therefore, the sizes of the favicons in apple are a bit different. Here are the updated sizes:
- iPhone Retina in iOS 7 with the size 120x120
- iPhone 6 Plus in iOS 8+ with the size 180x180
- iPad Retina in iOS 7 with the size 152x152
- iPad Pro in iOS 8 with the size 167x167
Windows
Windows 10 also makes use of a tile format in order to display its app icons. This icon is a bit complex if compared with other methods. Here are some common sizes:
- 70x70
- 270x270
- 310x310
- 310x150
Common reasons your Favicon is not showing up
There are some reasons why favicons might not appear on the web. Firstly, syntax errors can be the main reason for the absence of the Favicon. Even a simple syntax error in the code can prevent the Favicon from appearing. Whether your href link does not have closing quotes or is not structured correctly, the Favicon will not appear appropriately.
A wrong file path can also result in the Favicon from appearing. In case your icon is in the images folder, then there will be an appropriate file path for your icon. Therefore, it is essential to use the proper file path when referring to it.
There are also various browsers like Safari and Chrome that do not always display the favicons if they are considered to be local. Browsers like Chrome also do not show the favicons when they are present in the downloads folder. On the other hand, if your Favicon’s link is not present in the right location, then it can also be challenging to show it up on the browser. It is essential to place the Favicon in the header section of the webpage only. When they are placed in other locations, they will not show up. Another way by which your favicons might not show up is that you have still saved it with the default filename.
In The End
Favicons are essential to be included in the webpage, next to the title of the website, in order to ensure that the users can recognize the website or brand. They are also crucial because they somehow add to your SEO strategy and ensure your site can be acknowledged appropriately. Accordingly, make sure you have a favicon for your business or brand as well.
