How to Add a Favicon Quick and Easy

A favicon is an icon which is unique to a site and appears in the URL bar and on your page tabs. It’s good to have one because it gives your site personality and makes it stand out from other sites, especially when someone bookmarks your site within their web browser. There really is no reason to not have one, either, considering how easy it is to do. Here’s a brief post on how to add a favicon to your site.

How to Add a Favicon

First, you need to create your favicon. You can either outsource this if you have a graphic person, or you can make it yourself using a graphics editor of your choice. I like Adobe Illustrator myself, but Photoshop or a number of other programs will work just as well.

Design the graphic to be a 16 x 16 pixel gif or png file, then save it as favicon.ico. “Ico” is the extension for icon. If you are having trouble saving your file as an ico format, you can use a free service like Convert ICO.

Once you have your ICO file, all that’s left to do is put it on your site. A lot of themes will just have you upload your favicon through a couple of clicks, but if your theme doesn’t allow for that, you can simply add it yourself to the HTML of your site.

Upload your favicon to your site’s root folder, then add this code between the head tags:

After you refresh your site you should see it in your browser immediately. Now if someone has a ton of bookmarks saved in their browser, your site will definitely stand out and help to it a bit more of a professional quality.

Now that you’ve mastered that element of branding, don’t forget about above the fold web design!