How to Create a Favicon.ico

Last Updated: June 26, 2017 Tested

When you visit a website like Google, Yahoo or wikiHow, you might notice that there is a small icon to the left of the address bar. This is known as a favicon, and you can create your own for a web site. As well as giving your site a more professional feel, the icon will appear in the user's bookmarks next to any pages on your site they put in their favorites. This can help them find your site easier.

Steps

1
Create an image that's 16x16 pixels in size. It should be a simple image, so that it's instantly recognizable.
2
Convert the image to a favicon.ico file. It must be called exactly this, or the browser won't recognize it. An easy way to do this is to use the Dynamic Drive FavIcon Generator. Another way is to use a free image editor GIMP and save the 16x16 image in ICO format.

Advertisement
3
Upload the generated file to your web site.
4
Add the following code to your web site's HTML. You should put it in the <head> section of the code, and make sure the path to the icon is correct, relative to the web page. Code follows (assuming both .html and .ico are in the same top directory):
- <link rel="shortcut icon" href="favicon.ico" />
5
Refresh the page, step back, and admire your web site's beautiful new icon.

Warnings

Although you have created your favicon successfully, not everyone who visits your site will see it. Only Internet Explorer versions 5.0+ display favicons, as well as Netscape 7.0+, Opera 7.0+, Firefox, Safari, and Chrome. Older browsers simply do not display your icon. Also, for a favicon to display in the address bar of Internet Explorer versions 5.0+ the page must first be saved as a favorite. Then it will show up the next time the visitor clicks on the favorite or hand types in the URL in the address bar. There have also been issues with getting Safari to show favicons.

⧼thumbs_response⧽
Helpful 0 Not Helpful 0