Skip to main content
Home  ›  Blog

Icons and FavIcons - done right in DNN

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

  1. the ICO format is very limited
  2. icons in various resolution are needed depending on where it's shown in the browser
  3. 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
  4. 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:

  1. up to 3 favicon resolutions
  2. ca. 4 Apple-touch icons
  3. ca. 4 Windows Metro icons
  4. 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:

  1. 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. 
  2. 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:

  1. an icon header for most use cases
  2. shortcut icon header which is preferred in some use cases
  3. an apple touch header for apple and IOS
  4. 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:

  1. Do everything: create PNG, ICO, add to your theme 
  2. just create a super-optimized-compressed PNG
  3. just generate ICO file from a PNG
  4. just install RazorBlade standalone or 2sxc 10.09+ (which includes RazorBlade 2.02)
  5. Demo to add FavIcons to your 2sxc App (for special use cases like catalogs which have different FavIcons)

With 💘 from Switzerland

iJungleboy


Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in Switzerland and Liechtenstein, an 20-head web specialist with over 800 DNN projects since 1999. He is also chief architect of 2sxc (see github), an open source module for creating attractive content and DNN Apps.

Read more posts by Daniel Mettler