Hello friends!
I realized that webflow importing favicon in a size of 32x32 pixels.
The question is why? I always thought that favicon must be done 16x16 pixels.
Thank you!
and I aslo thought that in oder to be recognized in all brawsers it must be saved in .ico not png
Am I right or not?
Thank you!
Hi @abbas,
You have to upload a 32x32 px image so your favicon won’t look pixelated on retina / high-dpi displays.
Images have to be double the size (at least) in order to look sharp on these screens.
You can read these if you want to learn more about the subject:
I use .png for favicons and it works quite well.
.ico allows for backwards compatibility to older browsers, like IE6, but if you’re building a modern website you’re probably not supporting IE6 (it was released 16 years ago…).
To do things well we should even support a 96 Ă— 96 format for desktop
- 16x16: browser favicon
- 32x32: taskbar shortcut icon
- 96x96: desktop shortcut icon (and Google TV)
Which should be declared like this:
<link rel="icon" type="image/png" href="https://cdn.yourwebsite.com/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="https://cdn.yourwebsite.com/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="https://cdn.yourwebsite.com/favicon-96x96.png" sizes="96x96">
The .ico format has been abandonned since HTML5 <size>attribute is supported. Favicons are ALWAYS PNG.
Hi Filipa,
As for the Favicon especially, I don’t think the 32 px version is used on high density screens for the browser’s tabs… still the 16px if it’s declared. For Webflow sites, I guess the 32 is used.
Thank you very much frineds!
But how to do them all professionally. I mean how to create them good. There are also mobile devices and so many…
I mean how many icons I need to create and what sizes must be done in order to be displayed correctly in all devices.
Thank you
Webclips also and how they must be inserted in the code
Hi @vincent,
I don’t think you’re right… 16px favicons look blurry on high-dpi screens. I always use at least 32px.
I have just replaced the 32px. favicon on a hand coded site for a 16px. one so you can check the difference on my screenshot (I’m on a retina display):
1 Like
If you’re using Webflow, you don’t have to insert code, just upload the images. Webflow takes care of the code for you (favicon and webclip).
If you’re coding the site yourself, you might want to take a look at this article:
Note that Webflow won’t generate all the image sizes referenced in the article. This is what you get when you upload your images:
<link href="images/favicon_payup_v01.png" rel="shortcut icon" type="image/x-icon">
<link href="images/webclip_payup_v02.png" rel="apple-touch-icon">
1 Like
Oh ok, thanks. What i thought is when you declare both 16 and 32, the 16 is still used for the tab favicon. So I’m most probably wrong.
Thank you very much )))
So, as I understood from your answer that I don’t need to insert icon 16x16. Am I right?
I can only insert 32x32 and it will display on non-retina displays too?
And if I insert the following code
does it mean that on retina displays it will show 32x32 icon or still 16x16?
and if I insert only 32x32 icon will it display on non-retina?
I am trying to understand how it works.
I was wrong. And in any case you shouldn’t worry and only use Webflow’s settings, no custom code.
I just want to know how to make correctly without webflow
When I do it manually, I provide the three declarations and the three sizes, always. And I design each one of them seperately. Sometimes they’re the same, sometimes they’re adapted.
vincent, when you put the code you showed above with three diferent sizes will it on retina displays display 32x32?
I am trying to understand how it works. Does the browser autamatically takes the needed size?
can experts tell me how it works?
Thank you!
This topic was automatically closed after 60 days. New replies are no longer allowed.