Favicon - how to create

Favicon is an acronym for favorites icon. Favicon is some times also called a website icon or urlicon. Favicon is a picture that is associated with a website. In most cases, favicon is a company logo. Favicon is the picture that visually represents a website.

The favicon feature was originally introduced by Microsoft, and as it became popular, other browsers have implemented it since then as well.

Where can I find favicon?

Favicon can be found in two or three places.

• If your browser supports favicons, it will be displayed next to the website URL in the address bar.
• Favicons are also displayed next to the site's name in your favorites/bookmarks.
• And, if you are using tabbed browsing, favicons also get displayed next to the page's title in a tabbed browser.

These are the three most commonly used places for favicon. The first and second one are shown in the favicon print screen below.

We can be sure developers will find more uses in the future.

What is favicon technically and how does favicon get to the website?

Originally, when Microsoft started using favicons, it had to be a file called favicon.ico placed in the root directory of a web server. If a Microsoft's Internet Explorer found the favicon.ico file in the root, it would automatically use it in the Internet Explorer's favorites (bookmarks) display.

As it may seem obvious, this did not provide too much flexibility. A more flexible way of defining favicon was devised later via HTML code. This approach included adding two link elements into the HEAD section of a HTML document.

Favicon in the graphics language...

Favicon is technically an ICO type file sized to 16 x 16 pixels.

16 x 16 pixels is the most commonly used format, but it is possible that as browsers evolve and standardize across the board, they will all support also 32 x 32, 64 x 64, and 128 x 128 pixels. Favicons with higher resolution are currently being used by Macs.

Even though the ICO file is still being widely used, modern browsers also provide support for most IANA-registered MIME types, namely the PNG and animated GIF image formats. If you use GIF for favicon, then use resolution 16×16 pixels in 256 colors. A PNG favicon should be designed as 16×16 pixels in either 256 colors or 24-bit.

Problems with favicon

Browser cache...

One problem known to older browsers is that when you cleared your browser's cache, all your favicons would disappear. This has improved over the past years.

Unnecessary server requests...

Most modern browsers can display both ICO and alternative files (PNG, GIF). This flexibility on the browser side however causes some extra activity on the server side. Each time a browser loads a page from the web server, it requests the favicon.ico file. If this file does not exist, an entry in the log on the server may get created. Some may call this an inefficient use of network resources.

Instability...

Even though a great progress has been done since the original implementation of the favicon feature, it still cannot be regarded as reliable. Even if all configuration and setup is correct, favicons occasionally do not appear on a website. This is caused by a great variety of software and hardware architectures.

Need to be in favorites/bookmarks...

Depending on the browser, the page that is supposed to display favicon may need to be added to the favorites/bookmarks before the browser starts to display the favicon.

I have seen a HTML code for FAVICON -- what is it?

If you want to add favicon to your website and do not have the ability to place the favicon.ico file to your root, add the following 2 lines of code to the HEAD section of your HTML document.

<link rel="shortcut icon" href="http://www.yourwebsite.com/favicon.ico"
type="image/vnd.microsoft.icon" />
<link rel="icon" href="http://www.yourwebsite.com/favicon.ico"
type="image/vnd.microsoft.icon" />

You need to add both lines. The image can usually be in any image format supported by a web browser; however, the .ico file format will be read correctly by all browsers that can display favicons. Use image/gif as type for GIF files and image/png for PNG files. Alternatively you can use image/x-icon for ICO files.

Page specific favicon...

This approach has one great limitation. Defining a favicon in a webpage code ties the favicon to a specific page. Favicon however is an icon that should be superior to individual pages, favicon is an icon that represents the website. Therefore, the favicon.ico file should be placed in the root directory. It is the preferred way, and most browsers do automatically detect and use the favicon.ico file.

Code validity...

These two links are also not recommended because they can invalidate your website code (if you for example use HTML STRICT). The rel attribute of the link element must contain a space-delimited list of link types, so a two-word link type "shortcut icon" would not be understood correctly by conforming web browsers.

Favicon.ico located in your root directory will be found even by browsers that do not recognize the link HTML elements.

How do I create a favicon?

We have said that you may be able to get by with using PNG or GIF. If you do want to use an ICO file, you may need to get a special utility that can convert GIF, JPG, and other files into the ICO format.

There are also many websites out there which let you create a favicon for free. This can work in two ways.

You can either upload your file, and the website will convert it into an ICO file. Try for example: www.html-kit.com/favicon.

There are also some websites where you can create your favicon on the spot. Try for example: www.favicon.cc. At this website, you choose a color, click on the squares and paint your logo, download when you are finished, and it is done.

How do I test favicon?

When you have your favicon file saved in your root (or when you have it in the location as specified in the link element, go to your website and add the website home page to your favorites (bookmarks). Open the page with the favicon in your browser and see. Favicon should appear on the address bar, on tabs (if applicable), and in the favorites/bookmarks menu.

I have more questions

In that case, feel free to ask in our SEO discussion forum.

How to download swf file?