Favicon Cheatsheet

Could not believe we should be considering giving so many different favicon sizes from 195px (Opera Speed Dial) down to 16px. Wider SVG support in favicons would be welcome.

For what its worth i made a tool a while back that takes a big image and makes a bunch of sizes for you as well as the code etc.

I've not touched it in over a year but it still gets used every now and again.

http://allthefavicons.com/

Looks useful, thanks for the link. In case its news to you, with iOS7, a few more suggested dimensions have been introduced than what is available on allthefavicons.com at the moment. More details at the cheatsheet.

This is so incredibly handy. I've been searching the internets for this page for years now.

I disagree and believe there is more upside to this than downside. You certainly can't say that the fact that different browsers and devices handle favicons differently is a standards issue. If you were to try to standardize this then we'd end up with either a very large and complex standard (close to what we unofficially have now) or a lack of innovation. Innovation isn't the exact right word I'm searching for but what I'm getting at is that forcing vendors to use set sizes and naming conventions would detract from some of the small but important UI and even hardware differences in devices and browsers.

iOS had the retina display with mobile safari first, then came Microsoft's metro interface which brought tiles and going forward we're probably going to see many more devices and browsers that handle some aspects of web resources differently and for good reason. We can't expect the web standards committees to be able to account for all of these advances as fast as they come about and I'd argue that's exciting and good.

Furthermore I'd say web standards already do take care of this in the most elegant way I can think of. The tag is totally standard and future proof when it comes to favicons. I don't see anything wrong with adding a link tag with standard attributes to support multiple devices here. The purpose of a favicon is to associate a small image with a website or URL in general. Not all sites need the apple-touch icon or windows tile but some do. What we're seeing here is an attempt to target specific browsers on specific devices for very specific cases. By and large the standard desktop browser favicon has never changed. When you take all that into consideration I think its actually quite reasonable for these different methods of specifying favicons to exist.

I'll grant you that adding all that in your markup is ugly and having to think about which devices you want to target is a pain especially once you've decided on it and then have to start thinking about which markup to use and in what order.

Still, this isn't a case where vendors are using proprietary markup to capture more of the market or doing anything "evil". It's more a case of using an existing standard to take advantage of a specific device capability. Standardizing the way web/markup languages are handled is good but trying to standardize favicons in this context seems like an awkward way of trying to standardize how a device and/or browser and/or OS handles its UI and is not good.

Edit: I can't think of a good way we can standardize this but I am curious if there's anyone out there that has a decent idea for how we can standardize how we specify favicons for the plethora of devices we have now and will continue to see going forward.