14 ms·
Favicons in the retina age
- TamDenholm 14y agoIf 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.
- hellweaver666 14y agoDo it. Do it now :-)
- Brajeshwar 14y agoI use Faviconit ($0.99) http://itunes.apple.com/us/app/faviconit/id436681083?mt=12 http://itunes.apple.com/us/app/faviconit/id436681083?mt=12 But yes, a nice website will be a better bet. Use when I need it. With the image quality is not degraded when smaller size comes out of the big ones.
- EnderMB 14y agoI think I remember seeing a similar tool on Reddit a few months ago. I tried to Google for it, but couldn't find anything so perhaps it's not around any more. Either way, it'd be a very handy tool so I say go for it!
- heptat 14y agoOut of interest, what language will you write it in?
- drharris 14y agoThe only caveat is that a good large icon does not necessarily make a good small icon. Icon designers will do each size by hand to make it fit the format, getting rid of extraneous detail along the way. It would be difficult to model this actual process. But, for a quick and dirty process to get something running without paying money, a site like this would indeed be useful. There are plenty of favicon generators, but nothing for the modern age.
- crisnoble 14y agoThe author of the posted linked to this site which does some of the sizing conversions: http://www.xiconeditor.com/ http://www.xiconeditor.com/ but the tool you describe (and hopefully will create) would be much better.
- Roelven 14y agoAllthefavicons doesn't win it for me from xiconeditor. I need to be able to retouch the shrunken icons, on this pixel level whatever image you'll put in will most likely look a bit quirky.
- TamDenholm 14y agoOk guys theres enough interest, i'll code it up this weekend so watch out for the Show HN post. :)
- togasystems 14y agoMight as well add in apple touch icons... Look forward to seeing this!
- deleted 14y ago[deleted]
- mturmon 14y agoCompare http://www.favicon.cc/ http://www.favicon.cc/ for ordinary small .ico's.
- vmialik 14y agoClean and Lean wordpress plugin would be nice addition too, (hope I am not asking too much ;)
- TamDenholm 14y agoLaunched! https://news.ycombinator.com/item?id=4529963 https://news.ycombinator.com/item?id=4529963 Upvotes appreciated.
- stream 14y agoCould 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.
- bbrks 14y agoAnd 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.
- stream 14y agoDamn I totally missed that, thank you very much. The Reading List in Safari may use 64x64 for the Retina display.
- heptat 14y agoMicrosoft suggests 24x24: http://msdn.microsoft.com/en-us/library/cc849094(VS.85).aspx#Favicons http://msdn.microsoft.com/en-us/library/cc849094(VS.85).aspx...
- cremno 14y agoThis site is about IE8. This one is about IE9 on Win7: http://msdn.microsoft.com/en-us/library/ie/gg491740%28v=vs.85%29.aspx 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.
- darkstalker 14y agoYet another article written from a mac-only user point of view. Most desktop monitors are still around 100 dpi, far from "retina" standards.
- heptat 14y agoSorry 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.
- WayneDB 14y agoAs if "the retina age" were an actual thing. How many people have them now?
- michaeltwofish 14y agoThat was my submission, not the author's words.
- Karunamon 14y agoYou 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.
- IsTom 14y agoI don't want to think what beastly GPU I will have to buy to run next crisis on native resolution on ~150 dpi 21" monitor.
- ricardobeat 14y agoThat's most likely going to be a >200dpi screen, where you can simply use 2x upscaling for better performance (with no visual degradation compared to current monitors).
- 14y ago
- crisnoble 14y agohtml5boilerplate recommends all the way up to 144x144, and here is a awesome psd template to make all the sizes in one fell swoop: http://drublic.de/blog/html5-boilerplate-favicons-psd-template/ http://drublic.de/blog/html5-boilerplate-favicons-psd-templa...
- taylorfausak 14y agoThe section about iOS home screen icons has an error. Retina iPad icons are 144 pixels square, not 114. I wrote a blog post [1] that covers that. Also, I'd recommend using ConvertICO [2] instead of the X-Icon Editor. It generates much smaller files (4 kb vs. 32 kb). [1]: http://taylor.fausak.me/2012/03/27/ios-web-app-icons-and-startup-images/ http://taylor.fausak.me/2012/03/27/ios-web-app-icons-and-sta... [2]: http://news.ycombinator.com/item?id=4164119 http://news.ycombinator.com/item?id=4164119
- heptat 14y agoGood pick up, fixed that error now. Thanks for the link too!
- wallunit 14y agoUsing 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.
- colanderman 14y agoUnfortunately Mozilla, Microsoft, and Apple are dragging their feet on SVG support: http://en.wikipedia.org/wiki/Favicon#File_format_support http://en.wikipedia.org/wiki/Favicon#File_format_support
- morsch 14y agoIf the favicon turned out to be the first place where we finally get widespread SVG usage, I'd go into seizure.
- ANTSANTS 14y agoTo start, vector icons don't look as good at 16x16 or 32x32 as they do at higher resolutions. Pretty much every desktop environment that supports both large and small icons (whether with a native vector format or many scaled versions of large "master" icon) features separate, hand-edited icons for the lower resolutions, and often a completely redrawn simpler icon for the lowest (usually 16x16). The Tango Icon Theme Guidelines state this explicitly: http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines\ http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines\
- ronansprake 14y agoUsing the suggested generator (http://www.xiconeditor.com/ http://www.xiconeditor.com/) it turned a 5kb .png into a 32kb .ico - Looks lovely but seems v.excessive..
- bajsejohannes 14y agoNot 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.
- bajsejohannes 14y agoNot 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.
- Falling3 14y agoWas anyone else disappointed to see no favicon for this site?
- abraham 14y agoI'm seeing one. http://nashape.com/favicon.png http://nashape.com/favicon.png http://nashape.com/favicon.ico http://nashape.com/favicon.ico
- TazeTSchnitzel 14y agoMicrosoft's icon format is remarkably flexible and backwards-compatible. It's grown from what was once a 32x32 1-bit icon format, to one which supports multiple versions of the same icon, from resolutions ranging from the tiny 16x16 to the huge 256x256, and supporting 1-bit, 16-bit, 24-bit, and now even 32-bit (alpha transparent) colour, with PNG compression. And the great thing about it, of course, is every browser supports it. Even the Nintendo DS.
- deleted 14y ago[deleted]