• Follow us on Twitter @smoostercom
  • Folge uns auf Facebook /smoosterde
  • Abonniere den smooster RSS Feed

How You Can Create a Retina-Compatible Favicon: The Basics

2014.08.15 by 

How you can create a retina-compatible favicon: the basics

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.'

As you guys may have already noticed, we recently changed the smooster favicon.

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!

Favicon Dimensions

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:

Favicon are often created out of the brand's logo or a minimalized version of it.

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:

We Used the tool X-Iconeditor to adjust the favicon to different sizes.

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:

When looking at Google Drive's favicon you can easily see how much effort goes into the details of every pixel.

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

This article deals with the basics of designing favicons. If you are working with HTML, CSS, and JavaScript and wish to know more, I recommend you take a look at the detailed Favicon Cheat sheet by Audrey Roy Greenfeld on Github.

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.

A relatively new type of favicon uses the possibilities of modern browser technologies to expand the favicon using animations.

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.

comments powered by Disqus