How to make a favicon in png
You know, the favicon in ico is somehow the last century =) Let's be fashionable, modern and all that. In short, we take the icon in png (yes, with transparency and all things), save in size 16 × 16, on the website (in the <head> block, yeah) connect this way:
<link rel = "icon" type = "image / png" href = "favicon.png" />
Especially impressed by the owners of iPhones and sharpen, because for them we make a beautiful icon of 57 × 57 (maybe more by the way, but this is the standard size of the icon on the lunch-screen), connecting it like this:
')
<link rel = "apple-touch-icon" href = "apple-touch-favicon.png" />
Above the record hovers the spirit of the almost rotted corpse of IE6, who does not even know what this is all about, well, yes, and figs with it =) That's all, come out.
UPD : Thanks to NickyX3 for an interesting clarification:
<link rel = "icon" type = "image / png" href = "favicon.png" />
Especially impressed by the owners of iPhones and sharpen, because for them we make a beautiful icon of 57 × 57 (maybe more by the way, but this is the standard size of the icon on the lunch-screen), connecting it like this:
')
<link rel = "apple-touch-icon" href = "apple-touch-favicon.png" />
Above the record hovers the spirit of the almost rotted corpse of IE6, who does not even know what this is all about, well, yes, and figs with it =) That's all, come out.
UPD : Thanks to NickyX3 for an interesting clarification:
The author forgot to point out that the springboard icon for the tachets and apple trees will be rounded at the corners in this version and the flare will be automatically applied to it by the device itself. To avoid this (completely beautiful custom icon) instead of apple-touch-icon you should write apple-touch-icon-precomposed.
Source: https://habr.com/ru/post/60466/
All Articles