The importance of favicons for websites is much more than design. These small icons are very useful for browsing the Internet and have positive effects on SEO.
Typically, favicons appear on the left side of the browser tab. Though different browsers require different favicon sizes. Nevertheless, the appearance of the favicon depends on how the website or brand is presented.
Since it is only a few pixels in size, sophisticated and detailed logos often cannot be presented correctly. In this case, it is recommended to simplify the logo.
What are your favicons for?
The favicon (composite word composed of “favorite” and “icon”) is a small graphic that appears above the address bar in the tabs and thus makes it easier to find a website.
Favicons could be a brand or company logo. Since there are strict limits on the size of a favicon, only part of the logo is used. On touchscreen mobile devices, these small graphics are also used for application icons.
Having a favicon adapted to your website is interesting for many reasons including:
- Conveys professionalism: the favicon is an integral part of a website. It builds visitor confidence and shows that attention is paid to detail and user-friendliness. Although most people can’t say what exactly a favicon is, they would quickly notice its absence.
- makes you recognizable: thanks to this small icon, users can easily recognize your website, even if several tabs are open at the same time. The image will also make the brand stand out in search engines or app listings.
- Reinforcing the brand image: a good logo ensures the recognition of your brand. The design of a favicon is therefore a big part of the image of your company.
The impact of favicons on SEO?
Favicons equally have positive effects on SEO, at least indirectly. Admittedly, these small icons do not directly influence the ranking, but a suitable favicon still has a positive effect on SEO.
The following reasons explain this impact:
- Bookmark function: the favicon serves as a bookmark, especially on Chrome. Websites that use this feature can easily be found and therefore rank high in search engine results. Thus, website traffic increases.
- Usability: The usability of a website has a direct impact on its success, and favicons contribute to this goal. Users prefer pages that follow a well-defined concept and are pleasant and intuitive to use. Visitors, therefore, linger more often and longer on these well-designed websites, which search engines reward with their rankings.
- Visibility: A favicon improves visibility. Users are more likely to visit a website that features an icon, especially since it is also displayed in search results.
What size should the favicon be?
If you have a website, it is advisable to integrate a favicon. Your site will be much easier to find, more professional, and more efficient from an SEO point of view. The size of favicons is however subject to strict rules. We recommend that you create your favicon in the dimensions of 16 x 16 or 32 x 32 pixels, as it is suitable for the majority of browsers.
For high-resolution screens, a larger favicon size is recommended. The smaller format is also commonly used for many other applications. The easiest way is therefore to integrate the two formats in the code.
Recommended size of favicon (for Google)
In addition to the two sizes of favicons stated above, there are useful formats that are advisable to integrate. This is particularly important for Google and for two reasons. On the platform, search results have a favicon that should be 48 x 48 pixels in size. It is also possible to choose multiple formats of these dimensions.
This is equally true for Android devices. The operating system uses favicons of this size to place shortcuts on the home screen. The 192 x 192-pixel favicon format is also useful for devices with high screen resolution.
Recommended size of favicon (for Apple devices)
The situation is even a little more complicated at Apple. Different favicon sizes are recommended depending on the terminal.
For the iPhone, the 60 x 60-pixel format is used. A significantly higher resolution is however possible, provided that it is a multiple of this value. This allows optimal display in high resolution, which will then be reduced for other uses.
An image of 180 x 180 pixels is therefore a good choice. In contrast, icons on the iPad are displayed with 83.5 x 83.5 pixels.
For modern Retina and Super Retina displays, the 167 x 167-pixel favicon size is ideal.
Overview of the main favicon sizes
Other exceptions apply to certain browsers and terminals. Here you will find a clear list of the most common favicon dimensions:
| Browser or device | Sizes |
| The main modern browsers | 16 x 16 ou 32 x 32 pixels |
| Google and Android | 48 x 48 ou 192 x 192 pixels |
| iPhone (late models) | 60 x 60 ou 180 x 180 pixels |
| iPad (recent models) | 83,5 x 83,5 ou 167 x 167 pixels |
| Chrome Webstore | 128 x 128 pixels |
| Google TV | 96 x 96 pixels |
| Internet Explorer 9 | 24 x 24 pixels |
| iPad home screen | 72 x 72 pixels |
| iPhone (old models) and iPod Touch | 57 x 57 pixels |
| iPhone 4 home screen | 114 x 114 pixels |
| Speed dial for Opera | 195 x 195 pixels |
File extensions: what are the possible favicon formats?
You can use different graphic formats for your favicon. However, the Windows .ico format, supported by many browsers, is particularly used. A favicon in .png format is suitable for larger graphics, which can for example also act as touch icons. Other possible formats are .svg or .gif.
Create a favicon with a generator
So there are a few things to consider when looking for the right favicon size for your website. This is why the easiest way is to use a generator. This accompanies you through all the creation steps and ensures that the format of the favicon is adapted to all relevant browsers.
Adding a favicon using HTML
The safest way to add your favicon to your website is to put it in HTML. Here we’ll explain step by step how to integrate an icon into your website using HTML. To do this, the first step is to upload the icon to the main directory of your domain.
Step 1: First create an icon in the right format. The size of the favicon must be adapted to browsers or terminals. Prefer contrasting colors and ensure that the image also works in low resolution.
Step 2: Upload the icon to your domain’s main directory.
Step 3: Now navigate to your website header and enter the following line of code:
<link rel="icon" type="image/vnd.icon" href="path/my_favicon.ico">This method only works with the .ico format. For favicons embedded in .png format, here is the corresponding code:
<link rel="icon" type="image/png" href="path/my_favicon.png">If you created your favicon for HTML in .gif format, use this code:
<link rel="icon" type="image/gif" href="path/my_favicon.gif">Adding a favicon without code, is it possible?
There is another much easier way to add an HTML favicon to a website with HTML, without having to write any code.
To do this, you simply need to create the file and name it. Once the design mark is created in the correct format, save it as favicon.ico and then place it in your domain’s main directory. This method, however, requires the file name to be correct and all lowercase.
In addition, two disadvantages are added: first, the integration of favicons without code is not recognized by all browsers; second, this method implies that all subdomains created under the main domain are displayed with this same icon. It is for these reasons that we do not recommend this method. Adding a favicon in HTML with a line of code is much safer.
