What are the favicons

Tell us about the subtleties of connection faviconok, which methods are now relevant?

A favicon is a favorite icon , i.e. an icon for favorites. It was invented for IE5 in the year 99 , so that the sites had a recognizable picture. It was enough to drop the file favicon.ico into the root of the site and the browser immediately picked it up and did it beautifully. Until now, all browsers make a request to the root of the site and try to find there a file in the ICO format. Gave up and forgot, disagree? Early!

For a long time, everything worked perfectly. Many different icons could be sewn into the ICO container: from tiny monochrome to huge translucent. After downloading the icon, the browser itself selected the desired format. The problem was, the ICO format is terribly inefficient. If you sew two PNG icons 16 and 32 into ICO, the icon will weigh two to three times more than the original files. Browsers had to drag not only unnecessary formats, but also in an inefficient form.

But ICO recognized all browsers and learned to connect it not only from the root of the site, but also from an arbitrary place. If you specify <link rel="icon"> in the head of the document, then the browser will go not to the root, but where you showed it. You had to link a special address on each page, but this is not a problem - there is only one icon! Well, really, what could have gone wrong? So they lived.

 <link rel="icon" src="images/my.ico"> 

In the absence of clear standards, Apple got down to business. Attached to the first iPhone was a breakthrough mobile browser Safari, which also began to search for icons at the root of the site, but this time in PNG format and with the name apple-touch-icon . This icon can be seen in favorites and when adding a site to your home screen. I threw the second file into the root and forgot, do we diverge? Not.

For the icon to be without a glare from above, you need an apple-touch-icon-precomposed file , another for retina, then a few more for all Aypad models, triple retina ... and in the end you need to rub in the root or in the site header with a whole bunch of icons with special dimensions: 72, 76, 114, 120, 144, 152, 180 and it seems something else. To understand all the nuances of touch icons, read Matias Beinens's excellent guide .

 <link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png"> 

Apple icons at some point became the de facto standard. They began to pull up not only other browsers, but also other services to make an icon for your site. The problem was that it was poorly documented, took into account the interests of only one company and carried its very name in the format. Needed a standard.

In HTML5, an extended description has appeared <link rel="icon"> : the sizes attribute has been added to specify the sizes, and the type attribute to indicate the format of the icon. For example, if you have an ICO with several icons inside, then specify all sizes separated by a space in sizes . If the icon is a vector - yes, you can do that too - specify the size of any . The main thing, do not forget to specify the correct types. Now we diverge, the problem is solved? Nearly.

 <link rel="icon" href="favicon.png" sizes="16x16" type="image/png"> <link rel="icon" href="favicon.ico" sizes="16x16 32x32" type="image/vnd.microsoft.icon"> <link rel="icon" href="favicon.svg" sizes="any" type="image/svg+xml"> 

For each icon to write your link? Complicated! And if you want to specify the corporate color, screensaver or some features of the entire site? Not icons uniform. Here to us a config in a separate file! It was like this: browserconfig.xml for IE11 tile icons , JSON manifest for widget icons on the Yandex Browser display . There were a lot of experiments, but now there is a standard solution - a web manifest.

The Web App Manifest specification describes a simple JSON file in which you can specify not only all the icons, their sizes and formats, but also fully describe your website or application. Corporate color, background color, language and direction of writing, full and short name, orientation, launch mode and more. You connect it with <link rel="manifest"> to each page and the browser immediately knows everything. A good manifest inspector is in the Application tab of the Chrome debugger.

 { "name": "My App", "icons": [{ "src": "64.png", "sizes": "64x64" }, { "src": "128.png", "sizes": "128x128" }], "display": "fullscreen", "orientation": "landscape", "theme_color": "tomato", "background_color": "cornflowerblue" } 

And what about Apple? What-what ... Until now, it maintains its own format of touch-icons and even came up with one more: new, non-standard, like we love! With <link rel="mask-icon"> for pinned Safari tabs and buttons on the MacBook touch-bar, you can specify a monochrome vector mask and color for guidance. Thanks, of course, for the vector, but thanks for the next bike.

 <link rel="mask-icon" href="mask.svg" color="red"> 

The web manifesto anyway support Chrome, Opera, Samsung Internet and Firefox, but for now only on Android. In the Edge, he will also appear soon - development in progress. While this is the future way to connect the icons, but what to do today, right now? Combine everything we know.

For starters, forget the ICO, unless you need IE10. Link PNG-icons with a link: simple on 16 and 32 for retina, so that it is beautiful in the browser bar and tabs. Then connect with a link from the root of the site apple-touch-icon.png size 180 × 180. Then connect the web-manifest, which shows the icon on 192 for Android. Well, there you can also mention 16, 32, the vector, colors and the name will come in handy.

That should be enough for you to be beautiful in the major modern browsers. But if you need to go up on trifles and make it right ideally on each platform - my condolences and read the documentation in the description of the video. There is still a tolerable online icon generator , but I would not trust it to generate graphics - it will be soap. But you can borrow the code.

Well, the miracle did not happen and everything was as before: garbage in a hat, garbage in the root? You know, no, I believe that, over time, the web manifesto will restore order, so connect it today. Here we throw garbage and live!

Video version

Questions can be asked here .