Which favicon size should you use?

Different browsers require you to use different favicon sizes. Alongside the standard 16 x 16 and 32 x 32 pixel sizes, we recommend having them in a couple of other sizes as well.

A favicon (a combination of “favorite” and “icon”) is a small image that is used to quickly identify a website. These can be found on the left side of browser tabs or as touch icons on the home screen of mobile devices. To make a favicon for a website, you can use your brand logo or your business’ logo. Since favicon’s have a limited amount of space, they often end up being a small part or a redesign of a logo. Regardless of website type, we recommend adding a favicon. Favicons give websites a professional look, help users find websites more easily and can indirectly improve a website’s SEO ranking. Find out everything you need to know about favicons in our article “What is a favicon?”.

There are strict limits on favicon icon sizes. For most browsers, we recommend using 16 x 16 or 32 x 32 pixels. The larger favicon size is recommended for high-resolution screens and the smaller one can be used for a range of different options. It is best to add both formats.

In addition to the two different favicon sizes mentioned above, there are other formats that may be more suitable depending on the browser. Google Chrome displays favicons in its search results using 48 x 48 pixels. Multiples of this size can also be used, for example, 96x96 pixels or 144x144 pixels. These favicon dimensions are also important on Android systems. This is because the operating system uses favicons in this size for shortcuts on the home screen. For devices with screens that have a higher resolution, you can use 192 x 192 pixels.

It’s a little more complicated with their competitor Apple. Favicon sizes vary depending on the device. For an iPhone, the 60 x 60 pixel dimensions are used. You can use a much higher resolution provided that it is a multiple of this. This allows favicons to be displayed better at a higher resolution and then reduced when needed. An image with 180 x 180 pixels is a great choice. On the other hand, icons on an iPad are saved at 83.5 x 83.5 pixels. On the modern Retina and Super Retina displays at 167 x 167 pixels.

Website icon sizes vary depending on the browser version and end device. Here is a list of common sizes:

You can use different image formats for your favicon. The Windows icon format .ico is commonly used as it is supported by a range of browsers. The favicon format .png is particularly suited for use with larger images such as touch icons. You can also use .svg or .gif formats.

Generators are great tools for creating favicons, especially if you want to ensure correct formatting the first time around. Generators guide you every step of the way as you create your favicon and ensure that your favicon dimensions are suitable for all relevant browsers.

You can learn how to add a favicon to your website in the articles below:

• Favicons in WordPress: how to add and change
• How to add a favicon in HTML