Favicon – Overview
On this page:
Favicon
Have you ever noticed that when you bookmark web pages and they are added to your Favorites folder, some of the web pages display icons beside their names. Now, when you open any of these bookmarked pages and take a look at the address bar of your browser, chances are that you will also see that little icon right next to the URL of the page. This icon is called favicon or “Favorites icon”. Favicon is also called page icon, as the icon associates visitors with a particular website or web page. However, favicons work only in Internet Explorer 5 and above. If you are using Netscape or the older version of Internet Explorer, the browser will just ignore this little icon.
The original means of defining a favicon was by placing a file called favicon.ico in the root directory of the web server. A favicon is nothing but a simple 16x16 pixel image, using 16 colors (4 bits) or a 32x32 pixel image using 256 colors (8-bit). This image file is saved as favicon.ico and is uploaded into a website’s root directory. When an Internet Explorer 5 user bookmarks that page, explorer searches for that favicon.ico file. If it finds the icon, it replaces the default icon of Microsoft Internet Explorer. This would then automatically be used in Internet Explorer’s favorites display and in the location bar.
Later, however, a more flexible system was created using HTML for adding favicon to the web page. This is achieved by adding two link elements in the <head> section of the document. And, in this way, any appropriately sized (16X16 pixels) image can be used. Though many browsers still use the .ico format, there are other browsers that also support the GIF and PNG image formats.
Favicon appears like this in your Favorites folder:
Favicon appears like this in the address bar:
You can create favicons in two different ways:
- Take any of your favorite graphics (may be .bmp/.jpg/.gif) and convert it using graphics software.
- Use a dedicated icon editor. There is one included in MS Visual Studio. You can also try the online Java Editor (try at www.favicon.com).
In the long run, using icon editor is faster than using image converter, since you can edit the image from scratch with icon editor.
Conventionally, you should save the icon as favicon.ico. This is the name that explorer looks for. However, if you want to give different favicons for different pages of your site, save the icon files with different names but with .ico extension.
How to create a favicon using Photoshop and Easy Icon Maker
Let us see how a favicon can be created using Photoshop and Easy Icon Maker:
- Adobe Photoshop - to create and edit the graphic for the icon
- Easy Icon Maker - to add the special file format .ico to the image
You can download Easy Icon Maker software from http://www.icon-maker.com/download.htm
The final size of a favicon is 16X16 pixels, which is very small canvas area and working with it is quite tedious. So, you can work at an even multiple of 16 such as 64x64, so that when you resize your work to 16x16, the image looks as clear as possible.
Guidelines for using appropriate resolution and color depth:
- ICO – you can include multiple resolutions (16x16 and 32x32) and bit-depths (16, 256 and 16 million colors).
- GIF – use 16x16 in 256 colors.
- PNG – use 16x16 in either 256 colors or 24 bits.
Here is how you can do that in Easy Icon Maker:
Click on File > New, the New Icon dialog box opens. Select size 16x16 and Colors 16 colors (4 bits). Click on OK.
Now, open any of the .jpg or .gif files that you have designed in Photoshop and save the file with .ico extension.
For example, you have a file called lightbulb.gif (designed in Photoshop) like this:
You want to make this image as icon of your web page. Therefore, you have to create the icon file. Now, open Easy Icon Maker (set as 16x16 pixels and 16 colors) and import the file.
To do this,
Click on File > Import From Graphics, the image will be displayed in Easy Icon Maker window like this:
You can view the preview of the icon at the top right corner of the screen.
Now save the file as “lightbulb.ico”.
Once the icon is ready, it will look like this (see image below, the icon is saved on desktop, circled in red):
Adding Favicon to your Site
As you have the icon ready now, log on to your web server and put up that icon. The icon should be placed inside the main directory (inside www). You can also place this in other directories containing HTML files that you think users might bookmark.
Adding favicon to your existing website or web page is very simple. Just add a line of HTML code between <head> and </head> tags of your web page to display the favicon.
<link rel=”shortcut icon” href=”image/ lightbulb.ico”/>
The path in the href should be the path of your icon image file.
That’s it. Now, you are ready with a distinct icon of your own when someone bookmarks your site. If your user’s web browser supports favicons the icon can be displayed in their URL bar, next to the site’s URL.
For optimal browser support, you should make sure that the link elements are inside the head element (between <head> and </head>) in the HTML.
Problems
It often happens that you have uploaded the icon file but your favicon is not working – you cannot view the favicon. In this case, clear the browser’s memory and refresh the page in question. It may take three to four refreshes for the image to appear, if certain elements of the web page are stored within the temporary Internet files on your computer. If it still doesn’t work, double check the location, name, and size of the file and folder and the tag included within the page.
Benefits of using favicon
Favicon is an important factor for establishing a branding for your website. There are primarily two benefits achieved with using a favicon.
- When a user bookmarks your page and adds it to his/her Favorites folder, the favorite icon appears next to the bookmark name. This provides a professional and unique appearance to your site in the user’s computer and makes you easily noticeable among the cluster of links on his or her computer.
- The other benefit is the appearance of icon with the URL of your web page within the user’s address bar. This adds a personal appeal to your site. The user will have a memorable experience of visiting your site. Since the address bar icon rarely changes from site to site, a small logo can make difference in the looks of your site.
Since favicon adds branding to your site, the number of links to your site increases, which thereby help with search engine ranking.
The main thing is, favicon makes your site standout from the others, as many sites still do not have favicons.
Another interesting effect of using favicon is – you are able to know how many users have bookmarked your site using IE 5. You can simply count the requests for favicon.ico in your web server logs. From that number you can estimate the total number of people who bookmark your site by applying the formula: Number of IE 5 bookmarks divided by the fraction of your visitors using IE 5. However, this calculation doesn’t give accurate measure, it gives only a hint of how useful people find your site.
However, this side effect is also not valid since Mozilla, Netscape and Opera load the favicon in the users location bar, without considering the fact that the site has been added to the Favorites list or not.
Providing a favicon is not essential for your website’s operation and sometimes people even don’t notice its existence. It’s even so small to put anything useful in it. However, by providing a favicon, you can save some bandwidth if you have created custom 404 File Not Found error file – the file will be sent by your web server every time there is a request for a nonexistent favicon file.
back to top
