Page icons and favicons seem trivial, until they should look great on all kinds of devices and screen resolutions. We've researched this in extensive detail and would like to share our findings with you.
The Problem with FavIcons and Icons
Favicons were originally invented in 1999 by Microsoft. They used the .ico format and always had to reside in the root folder - so it was always called /favicon.ico. All major browsers started supporting it, but then new requirements came, like
- the ICO format is very limited
- icons in various resolution are needed depending on where it's shown in the browser
- when you add a page to a home-screen on a mobile device (IOS, Android) it needs an even bigger image - larger than the ICO format supports
- adding it to a tile on windows needs a very large file
Browsers started working on this with various solutions. In general the idea was to add more headers to the page for each use case. When we researched the topic, we found recommendations for more than 20 headers - which is simply absurd. Most suggestions wanted things like:
- up to 3 favicon resolutions
- ca. 4 Apple-touch icons
- ca. 4 Windows Metro icons
- ca. 5-10 Chrome and Android icons
The Solution to Size
After quite a bit of experiments we finally came to the conclusion that we only need 2 sizes (done well) for a great result. Everything else was bloat. The 2 icons we need are:
- A normal icon in a well made PNG format, fairly large is better. We recommend 500x500 but as of now, 228x228 would be sufficient. All major browsers today support png and jpg favicons, but PNGs allow for transparent parts - which is better for many use cases.
- The standard favicon as a final fallback - this should be at least 32x32 but 96x96 would be even better. Unfortunately the .ico format is fairly heavy, so the file tends to get large for such a tiny picture.
To create these files in perfect quality, we created this recipe.
The Solution to the Headers
Our research shows that we need 4 icon headers to get the perfect result on all devices. These are:
- an icon header for most use cases
- a shortcut icon header which is preferred in some use cases
- an apple touch header for apple and IOS
- a favicon header to prefer the PNG over the ICO file (otherwise most browsers will still try to access /favicon.ico)
We also just enhanced RazorBlade 2.01 to create all these headers automatically for you. All you need is a bit of code like this:
HtmlPage.AddIconSet(iconUrl)
This will add all the desired headers automatically. You can also tell it to do other things like:
- HtmlPage.AddIcon(iconUrl) - just add one icon header
- HtmlPage.AddIconSet(iconUrl, true) - add default headers but use the /favicon.ico for the fallback
You can see a full demo of this in the Dnn Razor Tutorials - Icons.
There's an App Recipe for That
Since the icon should be on every page, we can't give you an app. But we made these recipes so you can do it right - right away:
- Do everything: create PNG, ICO, add to your theme
- just create a super-optimized-compressed PNG
- just generate ICO file from a PNG
- just install RazorBlade standalone or 2sxc 10.09+ (which includes RazorBlade 2.02)
- Demo to add FavIcons to your 2sxc App (for special use cases like catalogs which have different FavIcons)
With 💘 from Switzerland
iJungleboy