.ico files

How To Successfully Design Your FavIcon in 3 steps only

Favicons (also called shortcut icons) first appeared in Internet Explorer 5, where placing a favicon.ico icon in the root of a website would cause a 16px square image to appear next to the URL in the address bar and in bookmark lists, without requiring any HTML.

Initially this had the added benefit of estimating how many times our sites were bookmarked by counting requests for the favicon, but this is no longer reliable since browsers started supporting the favicon for more than just bookmarks.

Technology affects logo design in different ways, one of which is the applications of the mark. Just a short while ago this would mean that designers were responsible for designing a mark that would reproduce well when faxed, while this is still true it has become less of a necessity. One of the new applications that logo designers are faced with that is arguably even more difficult is creating a mark that can scale down to the 16×16 pixel dimensions of a website’s favicon.

What are the options?

There are a number of options that a designer can take when applying a logo design to a favicon. Below are three ways to convert your logo design to a favicon successfully.

Show the Full Logo or Optimized Variation

If the original logo is simple enough this is a great option. It is very likely that the original mark is too complex to accurately render at such a low resolution. It is also recommended that the vector mark be adjusted to better fit the low resolution of the icon, for more information see the article Icon Design Explained by icon design expert Jon Hicks.

Show a Segment

Often times when the mark is too complex to use in its entirety, a small yet distinguishable portion of it may be used instead. Doing so creates a visual reference to the mark and identity without having to attempt and fit complex detail into such a small area.

Pull Away from the Identity

It is also entirely possible that the favicon can be treated as an entirely new design problem. In this scenario it is common to see the overall identity of the company / service / product applied to the favicon in an entirely new way.


Favicons are one of those little things that we usually don’t pay too much attention to, but the truth is that far from being insignificant, they are a very important part of the web, both from a user interface perspective and a branding point-of-view.
Some say that great things come in small sizes, and I think that applies to favicons as well, because any web designer and/or branding specialist who always take the time to add a favicon to their clients’ sites, even when the client has no idea of what a favicon is, demonstrates a great deal of professionalism and attention to detail; the sort of quality that every client appreciates.

About Saira M.

Powered by Blogger.