With so many new devices that are out there, the favicon is no longer a 16x16 picture. It has many usages, many sizes and many designs.
The most known derivative is the icon used when users add your site to their home screen on Apple iOS. If you do not have a touch icon, iOS will generate a small icon of the bookmarked web page and use it on the home screen. Android and Windows 8 follow the same model as iOS.
With the growth of mobile web and responsive design, it is inevitable for the favicon to appear on these new platforms. What that means is that if you are still going with the classic favicon.ico, you are way behind schedule.
Creating a single 16×16 icon is easy, but what if we want to support multiple platforms we need more pictures; up to 26 if we want to cover everything but it isn’t necessary.
The sizes that we use are 16x16 which is the interweb standard for (almost) every browser. The 32x32 size is used for new tab pages in Internet Explorer, taskbar button in Win 7 and up and Safari Reading List sidebar. We use 48x48 for Windows site icons and 64x64 for Windows site icons and Safari Reading List sidebar in HiDPI/Retina. Finally, we use 128x128 for Chrome Web Store app icon and Android icon.
A good website that we use is http://www.favicomatic.com. This website lets you choose which sizes you want your favicons to be and supports png files, meaning if you have a transparent background it will stay transparent compared to other website that add a background to your png image.
Comments