You probably have noticed my website’s favicon[5dots] in the address bar. Here let me tell you how I created the favicon and also how it can be displayed for your website/webpage.
A favicon [website icon, URL icon, or bookmark icon] is a small image identifying a particular website. This is shown in the addressbar beside the URL of the website, in the bookmark list and also in the browser tab. MS Windows uses this to represent ‘Website shortcuts’.
Favicon is nothing but an Icon (.ico) file of 32×32 or 16×16 pixels which is uploaded to the website. You can also use amimated GIF or PNG[not supported by IE] if you want.
1. Creating our Image.
- Start your favorite image editing program. I used Photoshop.
- Create a new image with the size of 32×32 pixels. In Photoshop go to File > New and Set the size here.
- Draw the image that you want.
- Save it into .png or .jpg or .bmp [I used .png]
If your program supports saving to .ico files, do it and you can skip the next section.
2. Converting it to icon format
Here we will the favicon generator service of html-kit.com to create the icon file. This online tool can generate the still and animated favicons from any image file we upload. The tool also has several option to customize the image like changing colors, adding borders, image stretch/crop. You can also give transparency to the background, which is really cool.
- Open your browser and go to www.html-kit.com/favicon/
- Click Browse and choose the image you created to upload it and click Generate.
- Click Customize. You can set transparency and other customizations here. Transparency can be added either to the background color or for the colors in the corner.
- Once you are done, click Instantly preview in the browser to see your favicon in action in the very same browser tab and adressbar[assuming you are using a tabbed browser]. Now, if you see the animated icon and you want the still icon to be displayed, just remove the animated one by clicking the tiny x below the animated image on the left.
- Download the favicon.ico
3. Displaying the favicon in the browser
- Upload the favicon.ico to the root directory of your webserver. Most browsers should pick your icon without doing anything more.
- However, You could also add a <link> tag to each of your html document to specify which favicon to use. This is needed for certain browsers.
Add the line between the head tag a shown,
<head> ....... <link rel="shortcut icon" href="/favicon.ico"> ....... </head>
Done! Refresh your browser or bookmark the site to check.
Note: you may also need to clear cache and also restart your browser to see your icon in action.