Tag Archives: browser

How to show/set/display an Icon (Favicon) in Browser Tabs, Favorites, Bookmarks, Address Bar etc

Making the Icon

Use your image editing software to create or modify your image (Google image search will find lots of icons for nearly any topic). Use your image editor to make the background transparent and resize it to 32 x 32 px (resizing may not be necessary as browsers will do it). Save the image in a format that keeps the transparency i.e. gif or preferably png.

Note: I suspect that all you need to do now is rename the file ‘favicon.ico’ and upload to the root directory of your website and that most modern browsers will pick it up, but to be safer do the following.

Use Gimp or another program to convert the file into the Microsoft ICO format. Gimp the free image editor has the option to save in the Microsoft ICO format which has become a standard for icons. Gimp is an interesting program and is free but if you do not want install on your computer you can run it from a usb drive. To run it from a usb drive get it from portableapps.com

Load Gimp and open your image file. In the File menu click Save As…

Change the Name of the file at the top of the dialogue box to ‘favicon’

Click the + sign – Select File Type

Gimp Save As Dialogue Box

Choose Microsoft Window Icon (this will change the file extension to ico)
I accepted Gimps’ choice of details for the ico format
Click the Save button

Installing the Icon

Upload the file (favicon.ico) into the root of your website.

Insert the following line into the head section of your home page –

<link rel=”shortcut icon” href=”http://www.thenameofyoursite.com/favicon.ico”>