Favicon & browsers

Modern browsers support more than just ICO favicons. However, to what extent? Nobody knows. Wikipedia has a nice page about it, but how often it is updated? Across what browsers have it been tested?

I've created a test suite for various use cases of favicons, varying in size, file format, and markup. Browser tests were carried out in BrowserStack.

If you want to test any of the features yourself, proceed to the test index for all the links.

Browser support matrix

Format

Tests are based on the most widely supported <link rel="shortcut icon" href="/path/to/favicon"> format, using icons of the following formats:

Format
BMP GIF ICO JPG PNG SVG TIFF
Browsers Chrome
Firefox
Safari[1] [2]
Opera
Edge[3] [4]
IE7/8
IE9/10
IE11 [4]

Legend

Supported
Not supported
Support with a catch (see attached footnote)

Footnotes

  1. Tested in Safari 4 (Snow Leopard) and above. Note that OS X Safari 8 and above only displays favicon in URL bars when focused.
  2. BMP rendering is only introduced in Safari 7.1 (Mavericks) and above.
  3. Tested in Edge 14 and above.
  4. Rendering of transparency in BMP images is problematic.

Sizes

Tests are based on the most widely supported <link rel="shortcut icon" href="/path/to/favicon"> format, using icons of the following sizes:

Size[1] Non-standard sizes Irregular sizes[2]
16×16 32×32 48×48 64×64 128×128 256×256 25×25 50×50 73×73 48×32 32×48 64×32 32×64
Browsers Chrome
Firefox  / [3]  / [3]
Safari[3]
Opera  / [3]  / [3]
Edge[4] [4] [4] [4] [4]
IE7/8 n.a.[5] n.a.[5] n.a.[5] n.a.[5]
IE9/10 n.a.[5] n.a.[5] n.a.[5] n.a.[5]
IE11 [4] [4] [4] [4]

Legend

Supported
Not supported
Aspect ratio preserved, either by containing or covering the area. Refer to footnotes associated with this icon for more detailed descriptions.
Aspect ratio not preserved, icon will appear distorted

Footnotes

  1. Regular sizes are tested using ICO format
  2. Irregular sizes are tested using GIF/PNG formats, as .ICO only supports squared aspect ratio
  3. SVG favicons are not distorted, aspect ratio is preserved by means of cover fit (similar to background-size: cover).
  4. Supported favicons are not distorted, aspect ratio is preserved by means of contain fit (similar to background-size: contain).
  5. IE7–10 only supports ICO file types, which do not support non-square aspect ratios, so fitting cannot be tested.

Markup

Browsers
Chrome Firefox Safari Opera Edge IE7/8 IE9/10 IE11
Markup <link rel="shortcut icon" href="/path/to/favicon.ico">
<link rel="icon" href="/path/to/favicon.ico">
<link rel="icon" href="/path/to/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="icon" href="/path/to/favicon.ico" type="image/x-icon">