How You Can Create a Retina-Compatible Favicon: The Basics
2014.08.15 by Madeleine Maier
Often simple, sometimes a small work of art made from pixels, often arduous and sometimes, unfortunately, simply neglected: the favicon.
Favicon is a word coined from the words “favorite” and “icon”. It refers to the small pictures, which accompany a website in the address bar, the browser tabs, and other areas within the browser and the operating system.
As you guys may have already noticed, we recently changed our favicon. The small white mascot, a relic from the early days of smooster, has given way to a simple ‘S.'
In creating our new favicon, I researched some data and tools, which I would like to share with you guys in this article. Here we go!
Favicons of different sizes serve different purposes. Here are the two main sizes:
16px x 16px - is used in the address bar and the tabs of popular browsers (Safari, Internet Explorer, Chrome, etc.)
32px x 32px - Screens with high resolution (e.g. Retina) use this size
If you want to play it safe, you can also include these two sizes and thus cover more areas:
24px x 24px - pinned pages in IE9
64px x 64px - Safari reading list (retina) and Windows site icons
Transparency and details - How to create your favicon
If you take a look at the favicons of various sites, you will notice that it is often the logo of the brand. Due to the small size of often just 16x16 pixels, it is advisable to simplify complex logos or break down pure wordmarks into fewer colors and letters with high brand recognition. Here are examples of popular websites:
In our case, I first created the ‘S’ as a PNG file with a transparent background in very high resolution and then adjusted it for the smaller versions. For this, I used the X-Icon Editor tool, which also took over the size adjustments for me:
Since it is a very simple icon in this case, it was possible to do that without too much quality loss. For a more complex logo, it is advisable to make improvements with photo-editing software like Photoshop or Pixelmator. In this phase, transparency and a pixel-perfect work are required to achieve a clear-cut result.
Using the favicon of Google Drive as an example, you can very well appreciate how much effort goes into details of a favicon:
Almost done - Save and integrate
Although most browsers also accept PNG files, the most frequent and safest solution is saving your favicon using the ICO extension.
Since it isn’t a standard data format, you have various options:
ICO (Windows Icon) Format - With this Photoshop plugin from Telegraphics, you can save your finished favicon to ICO.
- In addition, tools like X-Icon Editor (free) or IcoFX (30-day trial version) make it possible for you to save your favicon in several sizes within one file.
I have used only X-Icon Editor and was very satisfied with it.
Since browsers or operating systems always access a single file bearing the title favicon.ico, it is important to save the different sizes as layers within the same ICO file.
Do you personally handle the code of your website? You can now store the finished icon in a folder of your choice. Finally, you still have to integrate the following code snippet into the header of your home page:
<link rel="shortcut icon" href="path-of-the-image/favicon.ico" />
If you engage smooster to implement your website, you can simply send us your favicon together with the graphic designs - we will then carry out the integration for you.
Favicons for Power users
A relatively new type of favicon uses the possibilities of modern browser technologies to expand the favicon using animations. In Gmail, for instance, there is a function to display the number of unread emails directly within the favicon.
Github also uses a similar animation and offers the code (favico.js) for it, which is freely accessible here. Unfortunately, all browsers do not yet support these advanced favicons.
Do you still have favicon tips or tools, with which you have had good experiences? Tell me about them in the comments.