Is it a good practice to have all sizes of favicons, and include all rel links in HTML?
I have always used only favicon.ico in the pages HTML, with it in the root and with the respective link rel in the HEAD:
<link rel='shortcut icon' href='https://site/favicon.ico'>
But recently, looking at the server log, I saw that errors due to the lack of other versions of favicons are a constant, especially those of apple, generating logs like the one below:
... [core:info] ... File does not exist: /home/meusite/www/apple-touch-icon.png
I was in doubt whether these requests that do not complete can affect server performance, and today I found a favicon generator that in addition to generating for several versions and sizes (apple, android etc), it also generates several paths with <link rel> for each version, and some attributes meta, and even a json, as in the example below:
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
However it seemed a lot to include in all HTML pages, and looking at the sources of some reference sites, I saw that none uses all these link rels and meta names suggested by the generator.
So the question is Is it really good practice to include all these images in the /, and all these links rels and meta names in the HTML code of all pages of the site, both for usability and performance?
2 answers
I don't think this answer will address all the points, but I have a tip to give you...
It is recommended that if you use Favicons in the root directory, because that is where the browser first searches for them. " Originally, the favicon was a file called favicon.ico placed in the root directory of a website." source: https://en.wikipedia.org/wiki/Favicon#cite_note-10
But for example, if you have multiple sites within a host, each site with its favicon, the their path is not in the parent Root, and neither can they fail to function. This is just an observation made in 2005 by W3C itself https://www.w3.org/2005/10/howto-favicon
So even if it is recommended, it is not a rule to use favicon in the root.
See in this image what happens when you put your pack of favicon in a separate folder. On this site the favicons are not in the root, they are in in url/favicons and what happens is that when you access directly the URL of an image (url/imgs/image.png) for example the favicon does not appear in the tab in the browser!
If you put the favicon in the root of the site this will not happen! tip of @costamilam
About the amount of variations I think this table helps to clarify.
Source: https://realfavicongenerator.net/favicon_compatibility#.XPqmXIhKjcs
Now as the Browser manages which of these versions it will use I can't say for sure, I believe this is part of site.webmanifest
{
"name": "",
"short_name": "",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
Or by browserconfig.xml
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/mstile-150x150.png"/>
<TileColor>#da532c</TileColor>
</tile>
</msapplication>
</browserconfig>
Another curious thing, is that if there is a favicon with the extension .ico it seems to be the version preferred by older browsers, the probably it will be the one chosen among the indexed versions to be displayed in the browser....
Another thing is that to keep the favicon cross-OS in addition to cross browser, you have to keep the pack of favicons available on the host, the indicated is that it is in the root as already mentioning. Keep in mind that when a user saves a "shortcut" to your website on the desktop of Android or iOS, it is the favicon that will be used as an icon on the desktop. So it's good that you have versions for all resolutions.
Say: One way to control the cache is by putting a versioning in the href of the file, so you can easily control the caching of your favicon, and be sure which version you are in of your favicon, for example by doing like this: href="favicon.ico?v=rv123"
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon.png?v=7koL0owN">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png?v=7koL0owN">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png?v=7koL0owN">
<link rel="manifest" href="site.webmanifest?v=7koL0owN">
<link rel="mask-icon" href="safari-pinned-tab.svg?v=7koL0owN" color="#5bbad5">
<link rel="shortcut icon" href="favicon.ico?v=7koL0owN">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
About requests
I do not understand much of the subject, but a request that fails generates an error in the console, even if it is a favicon, but as a request that does not return anything affects the browser I do not know how to say, but I believe that you should "press" the site, because it is checking the connection and does not find anything...
Here's a favicons validator that you can test to see if your site is fully crossbrowser.
Https://realfavicongenerator.net/favicon_checker
It is even good practice to include all these images in / and all these rels links and meta names in the HTML code of all pages of the site
To the main favicon, it is better for cross-browser compatibility not to use any HTML. Um favicon.{ (sizes 16x16 and 32x32) in the Root goes well um a file .ico is a container for multiple icons .bmp or .png. This will work in any browser, since IE6, except the SeaMonkey.
In addition, it is interesting that you pay attention to:
- Touch icon for iOS 2.0+ and Android 2.1+ (size 152x152):
<link rel="apple-touch-icon-precomposed" href="path/to/favicon-152.png">
- IE 10 meter tile icon (size 144x144):
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/path/to/favicon-144.png">
- IE 11 Tile for Windows 8.1 Start Screen
<meta name="application-name" content="Name">
<meta name="msapplication-tooltip" content="Tooltip">
<meta name="msapplication-config" content="/path/to/ieconfig.xml">
No ieconfig.xml (sizes 128x128, 270x270, 558x270, 558x558, respectively):
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/path/to/smalltile.png"/>
<square150x150logo src="/path/to/mediumtile.png"/>
<wide310x150logo src="/path/to/widetile.png"/>
<square310x310logo src="/path/to/largetile.png"/>
<TileColor>#FFFFFF</TileColor>
</tile>
</msapplication>
</browserconfig>
Paths don't matter.
-
Both by usability how much performance?
In practice, it doesn't make much difference in performance, but gains in "usability" or adaptability.
For example, if the apple touch icons are not specified in the HTML, iOS Safari will search the root directory for icons with the prefix apple-touch-icon or apple-touch-icon-precomposed. For example, if the size of the icon appropriate to the device is 57×57 pixels, iOS will search for the file names in the order:
- apple-touch-icon-57x57-precomposed.png
- apple-touch-icon-57x57.png
- apple-touch-icon-precomposed.png
- apple-touch-icon.png
So, for iOS, you don't need to use HTML to touch icons -- and that's your concern with the web server, but that kind of request is out of your control. Anyway, it's a good idea to include both apple-touch-icon.png and apple-touch-icon-precomposed.png in the root for maximum compatibility.
To top it off, as the no HTML approach doesn'T work in Android browser (older versions), it's better to use Apple-touch-icons in HTML (from major to minor, thus older iOS versions download the smaller icon instead of the larger one, as only the latter is used):
<!-- For Chrome for Android: -->
<link rel="icon" sizes="192x192" href="touch-icon-192x192.png">
<!-- For iPhone 6 Plus with @3× display: -->
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="apple-touch-icon-180x180-precomposed.png">
<!-- For iPad with @2× display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png">
<!-- For iPad with @2× display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
<!-- For iPhone with @2× display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png">
<!-- For iPhone with @2× display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<!-- For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76-precomposed.png">
<!-- For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"><!-- 57×57px -->
I hope I helped. Please see this compilation and its references.