Home / Questions / 22067
Accepted
Alvaro Montoro
Asked: 2020-08-31 06:27:12 +0800 CST 2020-08-31 06:27:12 +0800 CST

Favicon: ico or png format? And what rel?

  • 772

I usually include a favicon on my web pages with an icon .ico, doing something like this:

<link rel="icon" href="./favicon.ico" />

But I've seen quite a few websites do it with images with extension .png, and with different values ​​for the attribute rel(like "shortcut icon" or "apple-touch-icon").

What image format is more appropriate for favicon in modern browsers? What are the advantages of using one over the other? And the same for the attribute rel: is there a difference between "icon" or "shortcut icon"? (assuming "apple-touch-icon" is specific to Apple devices)

html

2 Answers

  1. Best Answer

    Almost all browsers already have extensive support for different image formats to display the favicon of a page, with Internet Explorer and Safari (the usual suspects) having the least support. Here the list.

    edge : .ico, .png,.gif

    Firefox : .ico, .png, .gif, .gifanimated, .jpg, .pnganimated,.svg

    Chrome : .ico, .png, .gif, .gifanimated,.jpg

    IE : .ico, .png,.gif

    Opera : .ico, .png, .gif, .gifanimated, .jpg, .pnganimated,.svg

    safari : .ico, .png, .gif,.jpg

    As you will see almost always the common factor is ico, pngand gif. It turns out that the latter is not exactly very good at transparencies or quality images as you can read in Wikipedia itself , which leaves us with only two ideal types for this purpose; icoand png.

    Icons can be 16×16, 32×32, 48×48, or 64×64 pixel sizes and 8-bit, 24-bit, or 32-bit color depth. I have personally used pnghuge and non-proportional dimensions (as an experiment) and the browser has rendered them without problems which makes this format ideal (in my opinion).

    You can use both formats at the same time and also browsers will try to get it from the root of the site by default. This process is done following this algorithm.

    If links for both PNG and ICO favicons are found, PNG-compatible browsers select which format and size to use as follows:

    • Firefox and Safari will use the favicon that comes last.

    • Chrome for Mac will use whatever is in ICO format, otherwise it will use whatever is 32x32 pixels.

    • Chrome for Windows will use the favicon that comes first if it is 16x16 pixels in size, otherwise the ICO.

    • If none of the above are possible, both Chromes will use whichever favicon comes first, the exact opposite of Firefox and Safari. In fact, Chrome for Mac will ignore the 16x16 and use the 32x32 and then scale it to 16x16 on non-retina devices.

    • Opera will choose the icon completely at random.

    Remember that the attribute relis related to the link element that can be used for many more things like loading styles and its syntax is:

    <link rel="[tipo enlace][espacio][tipo enlace]..."/>

    The types of links you are referring to are iconand shorcut.

    • icon: Defines a resource to represent the page in the user interface, usually an icon (audible or visual).

      Basically it is an image that identifies your page.

    • shorcut: Not part of the standard.

      It is used for historical reasons.

    For historical reasons, the icon keyword may be preceded by the "shortcut" keyword. If "shortcut" is present it must be immediately followed by icon and both must be separated by a single character U+0020 SPACE.

    Basically with iconis enough unless you intend to support older browsers on your site.

    • 14

  2. I would continue using .icoit since it is the most supported format in all browsers. Now, as I remember, I saw that in one of my classes at the University, that the rel="shortcut icon" attribute of a favicon was defined by Internet Explorer and was to mention the relationship between icon and page , it was not until the The appearance of HTML5 (I don't really know what year it was xD) was when it declared that it iconwould be the standardized identifier, that is, according to me, only browsers that are not based on IE can use the favicon without the need for the shortcut.

    Chrome, Firefox, Opera and Safari accept PNG favicons ... Buuuut Chrome and Safari will always opt for .icoit if both exist

     <!-- Chrome, Safari, IE -->
<link rel="shortcut icon" href="path/to/favicon.ico">

<!-- Firefox, Opera  -->
<link rel="icon" href="path/to/favicon.png">

    Since the use of PNG appeared, multiple resolutions are not included, you would have to type them manually :.

    <link rel="icon" href="favicon-16.png" sizes="16x16">
<link rel="icon" href="favicon-32.png" sizes="32x32">
<link rel="icon" href="favicon-48.png" sizes="48x48">
<link rel="icon" href="favicon-64.png" sizes="64x64">
<link rel="icon" href="favicon-128.png" sizes="128x128">

    Therefore, it would not be a question , what is the most appropriate format? .icosince xD will always be the priority

    As far as “Touch icons” are favicons for mobile devices and tablets, iOS automatically adds some visual effects, this to coordinate with the icons built into the home screen (as it does with app icons). Specifically, the IOS adds:

    Rounded corners

    shadow drop

    reflective glitter

    As of iOS 2.0, you can avoid adding these effects by using precompose :

    <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

    Actually it has many properties, here it is very well explained:

    https://mathiasbynens.be/notes/touch-icons

    • 5