Make a Favicon for your Website
A favicon, short for Favourite Icon, is a small image that is shown in your browser when you view your bookmarked webpages. In a browser that supports tabs, it is also shown adjacent to the title of the webpage as shown in the image below.
A favicon file is served in the .ico format, which stands for icon. So basically favicon.ico is an icon file, it is not just a simple image. This file actually have different resolution images in it with different color depths.
To make a favicon image, you may not necessarilly include all the resolutions and depth images in your favicon.ico file and a single 16x16 resolution, 16 or 256 color image will do just fine.
In this guide i will show you how to create a 16x16 ,256 color single image icon file and include it in your html code. Lets start now.
1. First open the image you want to use a favicon in an image editor. I am using photoshop, you can use any software you like.
2. Now reduce the image dimesions to 16x16. Select Bicubic sharper from the Resample Image drop down menu. Click OK.
3. Save the image in gif format. This will open the Indexed Color window.
(a). In the Indexed Color window, select Local (Selective) from the Palette drop down menu.
(b). Enter 256 in the Colors field. This will make the color depth to be 8 bits per pixel. Enter 16 if you want a 16 color mage. Click OK.
4. Now we need to convert the image from gif to ico extension. I found a free software, Irfanview on the internet which is an image viewer and can convert the jpg image to ico. Download the software from Irfanview's website.
Open your gif image in Irfanview and save it as Windows icon .ico file.
Save the favicon.ico file in the root directory of your website, that's the same directory having your index.html file.
5. Now include the following meta tags in the head section of your webpage to include this favicon image.
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
6. Reload your webpage in your browser and you will see the image appearing.
Related:
Setup Google Custom Search on your site
Make and submit a sitemap to search engines
Link to this page :
Copy and paste the following code in an html document to link to this page,