Favicon (FAVorite ICON) is a 16×16 icon associated with a particular website or webpage. Browsers usually show that beside the website’s URL on the address bar, next to website name on the bookmarks and next to the page’s title on the website’s tab. It gives the website a more customized appearance. Plus it makes finding a website tab easier when there are multiple pages open in one browser. In this post, I will explain how you can create a favicon and upload it on your website.
The Favicon is basically a .ico file. Most of popular browsers (actually all of them but Internet Explorer!) support GIF and PNG images to be used as favicons as well. So to have a favicon which all of site viewers can show, one needs to prepare a .ico file.
16×16 is an extremely small canvas, it is better to go with very simple shapes that can effectively represent your website. If you want to get an idea have a look on some of the Favicons of large websites:
Creating a favicon:
Method 1: Prepare a simple image using any the image editor of your choice. There are some websites which you can use to convert your image to a favicon. Here are three examples of these sites:
Method 2: Another way is to draw your favicon pixel by pixel!! Since it is just 16×16 pixels it is not very hard. To do that you can use the online tool of this website:
How to upload the favicon:
Once you created a favicon, it should be uploaded to your host. All the browsers would recognize the favicon if it is located in the home directory of your website. So all that is needed is to upload the favicon you made to the root.
If you want to put the favicon anywhere else, the address should be mentioned in the header of the page code:
<link rel=”shortcut icon” href=”http://example.com/myicon.ico” />
(change example.com to your website URL).