Favicon is the little icon that displayed on the title bar or tab bar when you browsing a web site. At very beginning, it is used to be the little icon displayed in favoriate bar when user add the website to favorites. Then later, it becomes the the standard way to specify custom icon for a website.
Most web site provides
favico, developer add one line description in the
This simple piece of code works, but there are a lot of issues with this declaration. Actually specify the
favico isn’t as simple as you might expect!
For this piece of code, according to W3C document how to favicon, there are 2 issues with it:
shortcut isn’t a standard value for
rel, it is only for
ico format is a Microsoft oriented file type, not all platform likes it. Linux, Mac, iOS, Android, do not really appreciate this format.
Beides the 2 issues described above, the size of the
favicon also matters.
Someone says it should be
16x16 icon is used in tab or tree view. Some other says it should be
32x32. Well, this is also true.
32x32 icon is displayed in toolbar.
32x32 are the most used sizes for
favico, but that’s not all. The reality is a lot complicated, I’ll explain this issue later. Let focus on this 2 size first.
To provide the image with 2 different sizes. For
ico it is not an issue, since
ico is a image container file format, which can encapsulate several images with different sizes and color in a single file. It is convenient for developer, but not for users. Because it means the users need to download a big file, most of the data in which is not used at all.
For the recommended
png, it is no way to provide multiple images in a single file. So we have to provide 2 different separate files, and specify them with 2 different
<link> tags with
sizes attribute. This is a more efficient way, but unfortunately, you’re living in the world has something called
Internet Explorer. The
png is not supported by IE until
IE 11. What a hell!
Actually, there is a lot of issue with IE in this case. There is an great article by Mathias Bynen that discussed this issue in detail, which provides a lot of interesting information related to
Besides typical browser usage,
Favicon is also used to create
Metro Tile by
IE 10 and
IE 11 on Windows 8. It requires something quite different. Here is a MSDN document that described how to create custom tiles for IE11 websites. For these
tile icon, Windows 8 also asks for a background color other than the icon itself.
In the age of mobile internet,
favicon is not just used by the desktop browser, but also mobile devices. On mobile devices, there are some more specific requirements.
On android, the screen size and resolution varies between devices. So the visual elements on Android are measured in
dp. According to the screen resolution, there are different conversion ratios between
px. And to have pixel perfect image on Android, developer should provide several images for different
Google have a well written document that described how to create icon for the web app that added to homescreen.
For iOS, it is simliar to Android, but seems to be much more complicated. On iOS, it is also possible to create a shortcut for the web apps. Apple named such icon as
apple touch icon, which is used by Safari and other browsers on iOS.
For the iOS devices, iPhone and iPad have different screen sizes, so they have different size requirements for
Furthermore, there are device with
retina display and with normal one. To have pixel perfect image on
retina display, it requires the resolution of the image to be doubled.
And since iOS 7, iOS changed its UI style, the icon size used by iOS 7 is also slightly changed. So you should provide new icons for iOS 7 devices!
To make the icon fit iOS visual style best, Apple recommend web application to provide
precomposed icon, which is a icon that added
rounded corner and background by itself.
To have the pixel perfect icon on iOS, you might need to provide around 10 different images files as
apple touch icon.
What a hell!!!! The
touch icon on iOS is totally a mess!!!!
Here is a document from Apple that describes how configure web application icon.
In a short description,
favico isn’t as simple as it looks. And it actually used wrongly by most websites.
To provide proper
favico for all platforms and devices is not a simple work to do.
Here is the
favico declaration that used this blog:
And these files are served on this blog as
As you can see, to prepare all these configurations and files is not an easy job to do. It really consumes you a lot effort.
At last the FAQ of the site also provides a good explanation of the issue described above in details. Hope it helps.