How to Add a Favicon to Your Blog Design - dummies

How to Add a Favicon to Your Blog Design

By Melissa Culbertson

You may not be familiar with the term favicon, but you’ve definitely seen one before. A favicon, or favorite icon, is small little icon used to identify your blog in a browser.

You most frequently see a favicon in a browser’s address bar (like the favicon for the Momcomm blog shown in the following figure) or within a browser tab. However, a favicon also appears beside your blog name when someone bookmarks your blog and in certain RSS readers.


A favicon may look like a simple little graphic, but it packs a powerful punch. A custom favicon polishes off the look of your blog design, adding another place for your blog’s branding. Without a favicon, your blog displays the symbol of your blog platform or an even more generic paper icon. Because many users surf the web with multiple tabs open, a favicon makes your blog easy to spot right away. Notice how the pink smiley face icon stands out in the following figure.


Favicons are small little things, just 16 x 16 pixels. So when you design your favicon, keep the following guidelines in mind:

  • Keep to a single image: A favicon isn’t the place to combine a bunch of graphical elements. Simpler works better.

  • Be sparing with letters: No one will be able to read a full word. If you want to use initials, stick to one or two letters.

  • Pull a recognizable design element from your blog design: You want people to associate the favicon design with your blog design. If the design element you choose isn’t a square, save it as a .png file (before you save it in the icon format, as noted in a moment) to ensure your background is transparent. Otherwise, a white box surrounds your design element.

    Choose a design element without a lot of fine detail because such detail isn’t visible at a small size.

You can create a favicon image in any image editing software . Before you use it on your blog, change the file format from a .jpg, .gif, or .png to an .ico file, which stands for icon. The easiest way to change the file format is to upload your favicon image to a website that converts your image into an .ico file. You don’t even have to design the icon as 16 x 16 pixels because these websites size the favicon for you. Just be sure your image is square (32 x 32 pixels, 64 x 64 pixels, and so on).

Here are two places to convert your image to a favicon:

To add the favicon to your Blogger blog, go to Dashboard→Layout and then select Edit in the Favicon area to upload your favicon file.

To add the favicon to your WordPress blog, you can use code (see the Technical Stuff section that follows) or use a plug-in like one of these:

Some blog themes also have a place within the settings to add a favicon yourself.

If your blog theme doesn’t have an easy place to upload your favicon and you don’t want to use a plug-in, then you can use a little code to make it display. To install a favicon with this method, drop the .ico file in your blog’s theme folder. Then edit your header.php file to add the following between <head> and </head>:

<link rel="shortcut icon" href="" />

Just be sure to replace the URL with the location of your favicon. In order for your favicon to show up in RSS feed readers, drop the image into your root directory, too.