Using SVG for favicons would be a much better approach. Otherwise we would just end up in a few years, where we are now. But SVGs are scalable and look as good when rendered as 16x16, as 64x64 as 1024x1024. Of course that won't work for photos and stuff, but you can pretty easily turn most favicons into a scalable vector graphic.
Favicons in the retina age
21–30 of 42 posts
Re: Favicons in the retina age
#22Using the suggested generator (http://www.xiconeditor.com/) it turned a 5kb .png into a 32kb .ico - Looks lovely but seems v.excessive..
Re: Favicons in the retina age
#23Using SVG for favicons would be a much better approach. Otherwise we would just end up in a few years, where we are now. But SVGs are scalable and look as good when rendered as 16x16, as 64x64 as 1024x1024. Of course that won't work for photos and stuff, but you can pretty easily turn most favicons into a scalable vector graphic.
Unfortunately Mozilla, Microsoft, and Apple are dragging their feet on SVG support: http://en.wikipedia.org/wiki/Favicon#File_format_support
Re: Favicons in the retina age
#24Could someone explain why the author suggests 4 sizes in the favicon.ico including 24x24 and 64x64? Why not use an ICO with only 16x16 and 32x32 image formats? Thanks in advance.
And because favicons are now being used in many other places, such as Safari’s Reader and IE9’s pinned sites, the best approach is to supply a higher resolution favicon, at least 64x64 pixels.
Damn I totally missed that, thank you very much. The Reading List in Safari may use 64x64 for the Retina display.
Re: Favicons in the retina age
#25Could someone explain why the author suggests 4 sizes in the favicon.ico including 24x24 and 64x64? Why not use an ICO with only 16x16 and 32x32 image formats? Thanks in advance.
Microsoft suggests 24x24: http://msdn.microsoft.com/en-us/library/cc849094(VS.85).aspx...
This site is about IE8. This one is about IE9 on Win7: http://msdn.microsoft.com/en-us/library/ie/gg491740%28v=vs.8...
The optimal sizes are the same as the author's but 24x24 px. is missing in the recommended size list.
The site links to a blog entry about Pinned Sites in Win8. You can re-use the 144x144 px. PNG for a pinned site.
Re: Favicons in the retina age
#26Using SVG for favicons would be a much better approach. Otherwise we would just end up in a few years, where we are now. But SVGs are scalable and look as good when rendered as 16x16, as 64x64 as 1024x1024. Of course that won't work for photos and stuff, but you can pretty easily turn most favicons into a scalable vector graphic.
If the favicon turned out to be the first place where we finally get widespread SVG usage, I'd go into seizure.
Re: Favicons in the retina age
#27Earlier quoted context omitted.
Sorry about that – the point of the article definitely wasn't to exclude non-Retina users, it was just to document what I was encountering when I came to creating a favicon for the site.
As if "the retina age" were an actual thing. How many people have them now?
You don't think screen resolutions will continue to increase? I give it a couple of years, maybe less, before the "retina" resolution is standard hardware.
Re: Favicons in the retina age
#28If there isnt already a website that lets you just upload a large image and then creates all the different sizes for you and provides the code to paste in for you then there needs to be. If it doesnt exist and people here are interested, i'll make it this weekend.
Ok guys theres enough interest, i'll code it up this weekend so watch out for the Show HN post. :)
Might as well add in apple touch icons... Look forward to seeing this!
Re: Favicons in the retina age
#29Not that it matters much, but Apple didn't actually have to redefine a CSS pixel. They foresaw this when writing the CSS specification:
If the pixel density of the output device is very
different from that of a typical computer display,
the user agent should rescale pixel values. It is
recommended that the reference pixel be the visual
angle of one pixel on a device with a pixel density
of 96dpi and a distance from the reader of an arm's
length.Re: Favicons in the retina age
#30Not that it matters much, but Apple didn't actually have to redefine a CSS pixel. They foresaw this when writing the spec:
If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length.