I have a favicon with the dimensions of height=26px / width=20px named favicon.png
<link href=http://www.example.com/images/favicon.png rel="shortcut icon" />
However, in my browser, my favicon.png is all distorted.
Question: Is my favicon.png supposed to be a particular size? Also, can I use a non-standard size/dimension and if so, how?
Answer
Short answer
The favicon is supposed to be a set of 16x16, 32x32 and 48x48 pictures in ICO format. ICO format is different than PNG. Non-square pictures are not supported.
To generate the favicon, for many reasons explained below, I advise you to use this favicon generator. Full disclosure: I'm the author of this site.
Long, comprehensive answer
Favicon must be square. Desktop browsers and Apple iOS do not support non-square icons.
The favicon is supported by several files:
- A
favicon.icoicon. - Some other PNG icons.
In order to get the best results across desktop browsers (Windows/IE, MacOS/Safari, etc.), you need to combine both types of icons.
favicon.ico
Although all desktop browsers can deal with this icon, it is primarily for older version of IE.
The ICO format is different of the PNG format. This point is tricky because some browsers are smart enough to process a PNG picture correctly, even when it was wrongly renamed with an ICO extension.
An ICO file can contain several pictures and Microsoft recommends to put 16x16, 32x32 and 48x48 versions of the icon in favicon.ico.
For example, IE will use the 16x16 version for the address bar, and the 32x32 for a task bar shortcut.
Declare the favicon with:
<link rel="icon" href="/path/to/icons/favicon.ico">
However, it is recommended to place favicon.ico in the root directory of the web site and to not declare it at all and let the modern browsers pick the PNG icons.
PNG icons
Modern desktop browsers (IE11, recent versions of Chrome, Firefox...) prefer to use PNG icons. The usual expected sizes are 16x16, 32x32 and "as big as possible". For example, MacOS/Safari uses the 196x196 icon if it is the biggest it can find.
What are the recommended sizes? Pick your favorite platforms:
- Most desktop browsers: 16x16, 32x32, "as big as possible"
- Android Chrome: 192x192
- Google TV: 96x96
- ... and others that are more or less documented.
The PNG icons are declared with:
<link rel="icon" type="image/png" href="/path/to/icons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-32x32.png" sizes="32x32">
...
Beware: Firefox does not support the edit: fixed in 2016.sizes attribute and uses the last PNG icon it finds. Make sure to declare the 32x32 picture last: it is good enough for Firefox, and that will prevent it from downloading a big picture it does not need.
Also note that Chrome does not support the edit: fixed in 2018.sizes attribute and tends to load all declared icons. Better not declare too many icons.
Mobile platforms
This question is about desktop favicon so there is no need to delve too much in this topic.
Apple defines touch icon for the iOS platform. iOS does not support non-square icon. It simply rescales non-square pictures to make them square (look for the Kioskea example).
Android Chrome relies on the Apple touch icon and also defines a 192x192 PNG icon.
Microsoft defines the tile picture and the browserconfig.xml file.
Conclusion
Generating a favicon that works everywhere is quite complex. I advise you to use this favicon generator. Full disclosure: I'm the author of this site.