How to Add a Favicon to Your Blog Design
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 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="http://www.BLOGNAME.com/wp-content/themes/THEMENAME/favicon.ico" />