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 com­bi­na­tion 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. Re­gard­less of website type, we recommend adding a favicon. Favicons give websites a pro­fes­sion­al look, help users find websites more easily and can in­di­rect­ly improve a website’s SEO ranking. Find out every­thing 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 rec­om­mend­ed for high-res­o­lu­tion 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 di­men­sions 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 res­o­lu­tion, you can use 192 x 192 pixels.

It’s a little more com­pli­cat­ed with their com­peti­tor Apple. Favicon sizes vary depending on the device. For an iPhone, the 60 x 60 pixel di­men­sions are used. You can use a much higher res­o­lu­tion provided that it is a multiple of this. This allows favicons to be displayed better at a higher res­o­lu­tion 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 par­tic­u­lar­ly suited for use with larger images such as touch icons. You can also use .svg or .gif formats.

Gen­er­a­tors are great tools for creating favicons, es­pe­cial­ly if you want to ensure correct for­mat­ting the first time around. Gen­er­a­tors guide you every step of the way as you create your favicon and ensure that your favicon di­men­sions 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