What sizes are needed for favicon on each browser

It is recommended to design your favicon in various sizes so that it appears correctly proportioned on bigger screens

Feburary 14, 2023 | 5 minutes read

Share this article

What Size Is a Favicon?

Favicons should ideally be created with a size of 16x16 pixels since this is the size at which they appear in various places such as browser tabs, address bars, and bookmark lists. It is recommended to create favicons in multiple sizes so that they are properly scaled on larger screens, rather than being stretched out versions of the 16x16 pixel icon.

Here are some frequently used sizes for favicons, each serving a different purpose.

• 16x16: The size of browser favicons.
• 32x32: The size of taskbar shortcut icons.
• 96x96: The size of desktop shortcut icons.
• 180x180: The size of Apple touch icons.
• 192x192: The size required by Android Chrome.
• 512x512: The size required by WordPress.

How Do Favicons Affect SEO?

Although having a favicon on your website may not have a direct impact on your search engine ranking, it can affect the user experience and the amount of time visitors spend on your website. If your website's favicon is not easily recognizable, it may lead to confusion and make it less likely for users to return to your website. Therefore, having a clear and distinctive favicon can enhance user engagement and potentially increase returning visitors.

Brand Authority and Image

Using a unique logo as your website's favicon can help strengthen your brand image and increase brand recognition among your customers. However, it's important to ensure that your favicon is not too similar to the logos of other brands.

One way to check this is by conducting a reverse image search of your logo to see if there are any similar logos associated with other brands. To avoid confusion and make it easier for customers to recognize your brand, your favicon should be distinct in terms of both its color and design.

User Experience

Having a favicon on your website can encourage visitors to bookmark your page, which can have a positive impact on your search engine optimization (SEO) ranking. When users bookmark your page, Google recognizes it as a signal that your website provides value to visitors, and this can lead to an increase in your website's ranking. On the other hand, not having a favicon can make it difficult for users to identify and save your website, which may have a negative impact on your ranking. Therefore, it's important to have a favicon on your website to improve user experience and potentially boost your SEO.

In addition, when customers want to revisit an article or product page on your website, they may check their browsing history. By having a favicon on your website, it will be easier for customers to quickly identify your website in their browsing history, improving their user experience.

Now that we have discussed the importance and different sizes of favicons, let's move on to the process of creating one.

How to Create a Favicon

After finalizing your logo, the process of creating a favicon cannot be as simple as resizing your logo into a 16x16 square. This is because your logo may contain text or intricate details that will not be clear or legible when shrunk down to such a small size. Therefore, additional considerations are necessary to create a favicon that is visually appealing, easily recognizable, and legible.

After creating and ensuring the quality of your favicon in the appropriate sizes, you can save the file in either PNG or JPG format. The next step is to upload the favicon file to a favicon generator tool.

Favicon Generators

There are various favicon generator tools available on the internet that can help you create and convert your favicon image into the appropriate format. These tools typically require you to upload your favicon image, which is then automatically converted into the required favicon formats, and made available for you to download. Using these favicon generator tools is a simple and quick process that only takes a few minutes to complete.

The standard formats for favicons are ICO and PNG.

• The ICO format is universally compatible with all web browsers, including Internet Explorer.
• PNG is also a commonly used favicon format. However, one disadvantage of using PNG format for favicons is that it is not supported by Internet Explorer.

It's best to choose a favicon generator that provides the option to download your favicon in both the ICO and PNG formats.

Favicon Generator

Favicon generators typically offer the option to create a favicon using various methods, such as starting from scratch, using an existing image, logo, or emoji.

Below are the various options available for downloading the result in ICO and PNG formats, and in different sizes:

• android-chrome - 192x192.png
• apple-touch-icon - 512x512.png
• apple-touch-icon - 180x180.png
• favicon - 16x16.png
• favicon - 32x32.png
• favicon.ico

Favicon Generator & App Icon Generator

You can use this tool without any cost to convert your PNG or JPG image to both ICO and PNG formats in various sizes. Simply upload your image and the tool will handle the conversion process for you.

The download options are listed below:

• android-chrome - 192x192.png
• apple-touch-icon - 512x512.png
• apple-touch-icon - 180x180.png
• favicon - 16x16.png
• favicon - 32x32.png
• favicon.ico

After you create your favicon in the format you want, you need to save it in the main folder of your website. To display the favicon on your site, you can link to the file using HTML code.

It's worth mentioning that the instructions provided here are intended for website owners who have constructed their website either from scratch or using a development framework like Bootstrap CSS. If you have used a website builder or CMS platform like WordPress, then the process of adding a favicon might differ slightly.