- Open the image you would like to be your favicon in MS paint
- Crop, edit and resize your image to 16 x 16 pixels; till you get the look you want
- Save the image as a .gif file.
- Locate the .gif image you saved and rename it to “favicon.ico”. Importantly we are renaming the file extension from a .gif to .ico.
- Upload the favicon.ico file to your site
- Add this tag within your head (<head> </head>) tag. This assumes that the favicon is in the root / parent directory of you site. So,
<head>
….
<link rel="shortcut icon" href="/favicon.ico" />
…
</head>
- View your site and refresh your browser (CTRL +F5).
Sometimes you may need to clear your website cache for the favicon to display, or what I do is:
- Open up the site in preferably Firefox or Google Chrome
- Right click and select “View Source”
- Find the tag in step 6 above that you added and click the link (href) to the image. This should then display the favicon.
- Press CTRL + F5.
- Hey presto!

