How to Add a Favicon to Your Site

A favicon is the small graphic icon that appears next to your web address on the address bar, at the tab of your site, and the bookmark of your site. If you look up, you’ll see WordPress’ favicon, a “w” within a circle.

This little icon is a quick way to give your site distinction. For one, it makes it easier for people to associate your site with an image and if they had to, it’ll be easier for them to pick it out among a list of bookmarks. Sites without a favicon have the generic paper with dog ears. Rather forgettable huh?

To make your own favicon, you first have to make your own image. If you have Photoshop, you can get a free plugin called ICO which allows you to save your image in an ico format used for icons. If you do not have Photoshop, you can get this free icon editor called XN Resource Editor.

Now that you have the means, create a 16×16 icon, the standard size for all favicons. I suggest you pick the most prominent image of your website and turn that into your icon. If you change your mind later on, it can be redone but if your favicon has already gone live, most people have already begun associating that image with your site so be really sure you want to make the change. If you still go on with the change, associate it with something like a new look for your site or special event.

Next, open up your index page. At the head, enter this code:

<link rel=”shortcut icon” href=”favicon.ico”>

Though you can choose to place your favicon in any folder, I suggest you place your favicon file in the root directory. It is automatically the place where browsers look for a favicon even if you didn’t add coding to your site. (Adding code just makes it easier for the browser to find it.)

Once you’ve done that, upload your index file and favicon. Check out your site to see if it’s up and you’re done! :3