Is this site useful?
Help it, supporting my coffees.

How to create a good favicon



Favicon's functionality

The favicon is that image that appears at the left of the web address bar of internet browsers.

Que es un favicon

In the beginning, this image was just used to mark our pages saved as favorites, our bookmarks, but nowadays it is used in many more places, as important as:

  • Tabs in browsers
    Favicon en pestaƱas
  • Select boxes of address bars
    Favicon en opciones
  • The usual bookmark list
    Favicon en favoritos

These usages make the favicon be a tiny, but important part of a web site, since it achieves the purpose of recognize our pages directly, without looking for it reading the titles of each page which is open. A page without favicon is more difficult to see, and it make an impression that the page is not actualy very professional. You can see an example of this on the next image, where the page titled CanalFlamencoRadio does not have a favicon, and the browser display a default icon (a blank page) instead, which makes this page seem less visible and less professional than the other bookmarks:

Ejemplo de pagina sin favicon

Making a favicon for a web page.

When making a favicon, it is recommended that it had the following properties for compatibility issues:

  • It should be an ICO file, a windows icon file.
  • Its size should be 32x32 pixels or higher.

The application which introduced the favicon for the first time was Microsoft Internet Explorer, and at first, it only accepted the ICO image type, stored in a file called favicon.ico, for them. Later, others browsers started to support this image type as standard for favicons.

Nowadays, the newer versions of the browser accept other image type for favicons, as JPEG, PNG, GIF, BMP, but, unfortunately, a lot of people still use MS IE6, which only recognize ICO favicons, so this is the type we should use to make it visible for most of users.

Favicons, at present, are shown as a 16x16 pixels image beside the address bar, so, why should it be a bigger image?. The answer, this size is becoming insufficient. Any normal computer that you can buy today has a default screen resolution of 1400x900, without have a big screen, so a 16 pixels icon is beggining to be too small. For this reason, future browsers will increase the favicon resolution soon, and it will require bigger icons.

All the modern browser are capable of reduce the size of the favicons, but when they try to increase it, the image lose its sharpness, so there is no problem in using a 32x32 pixel resolution or higher and we will be prepared for the future change.

Make the most of your favicon

Everything that make the image of your site to spread quickly is good for your bussiness, so you have to make the access to your brand image easier and the favicon is a great way to do it.
An ICO file can contain more than one image, and we can use this feature to give an easy way to get our site image by our user. We can save a small image, that will be used to appear as a favicon, as usual, and save another one bigger which can be used by the users to make a shortcut to our page in their desktop or dock, or to give an visual help if they want to write about us in their blogs. If they want to use our site, let's make it easy.

Icono en lanzador de escritorio

Nowadays there are already some pages that are using these features of the ICO files this way, here you have some examples:

    Icono de
    Icono de
  • And of course,
    Icono de

Size does matter!

We can never forget the original aim of the favicon, a quick visual way to identify our pages among the others, so it is not recommendable to have hundreds of images in a ICO file, because it will make our file too big and then the browser won't be able to open it fast. This is not what we want, so we should care about which images are important to us. To have an icon with all the previous features and a reasonable size, it is enough with the following images resolutions:

  • 16x16: The current standard size for favicons. With this size we can be sure that our favicon will be displayed correctly and not distorted by a browser resizing.
  • 32x32 or 48x48: These are icon standard resolutions, so when a higher res will be required these are the images which will be used. It is recommendable to have them to be ready for a future change.
  • 128 pixels or higher: This is the image which we will offer to the users for their own uses. It is not mandatory for this image to be square, but we have to keep in mind that if it will be used as an ICO file, it will be resized to be a square.

With this three image sizes, the favicon file should not bigger than 100KB. A bigger file will be a little too slow to load as a favicon. There are also others sites which prefer to have only a all-purposes big image in the favicon file, and let the browser reduce it to display it correctly. This is a way of making the file not too big but, sometimes, the browser resizing transform our marvelous image in a unrecognizable favicon, so we have to make sure that the image is good to be displayed at 16x16. An example of one big image favicon may be the one from the page of Notepad++:

Icono de notepad++

Sometimes is much better to spend some time to care about how our image will be displayed at small resolutions to make a fast and not recognizable favicon. It will give a much better impression to our users. An example of a impeccaple favicon on several sizes is the one from a Tapas Sevilla, an Spanish tapas food blog, whose all images are different for a better displaying:

a tapas favicon

Recommended icon software

Here you have some nice free icon applications, with multi-image icons support:

and here some web applications:

  • None... yet


Once we have spoken about all the features that a favicon can have, we can summarize them in:

  • A good favicon must be a file with several images inside, to adapt it to the different uses that the icon can have.
  • A good favicon must have a big brand image of the site, with the purpose of been used by everybody. As more is spoken about our site, the better.
  • A good favicon must not be a big file, difficult to be loaded by browsers.
  • A good favicon must be made up of recognizable images at any resolution.

Following these guidelines we can be sure that we are getting the most from the image which represents our web site.
For any doubt, remark, complaint or invitation, do not hesitate to contact here.

2009..2017 - - contact