Before we get to how to add a favicon to WordPress, let’s talk about what a favicon is.
What’s a Favicon?
The term favicon, which stands for “favorites icon”, is a small graphic, typically 16 x 16 pixels in size, that is used by websites as a sort of branding image. This small image is displayed in the browser’s address bar, or next to the website’s ULR in the bookmark list. In those browsers that support tabs, the favicon is also displayed next to the website’s title.
How to Generate, Locate, or Create a Favicon
Before you can add a favicon to WordPress, you have to either make one or generate one. There are some websites that will generate a favicon for you with an image that you provide (uploaded from your computer). One such service is located at FreeFavicon.
If you use such a service, remember that you don’t have a lot of space to work with, so don’t choose an image with a lot of detail. You should also start with a square image, since the resulting favicon itself will be square (16 x 16 pixels). Or, you may use the cropping tool in any image editor to modify your rectangular image, and/or to home in on the desired section of your stored image.
The same site also has an abundance of freely downloadable favicons, organized by category, that you can use. You may find other free favicon collections by doing a web search.
If you can’t find a free favicon to your liking, use an image of your own, or create one with a graphics program. You can find a free graphics program at Gimp.org. It may be a bit of trial and error at first, since the 16 x 16 pixel space allotted for the favicon is pretty teeny.
Be sure to save your downloaded, modified, or created image with the file name ‘favicon.ico’. Without that specific name, the image will not be recognized as a favicon.
So by now you’ve either downloaded a free image, or created your own by:
1. Cropping the desired image to make it square
2. Resizing it to 16 x 16 pixels
3. Saving it as ‘favicon.ico’.
How to Manually Add a Favicon to WordPress
OK, you now have your downloaded or created favicon.ico. Now how do you add your favicon to your WordPress blog? Easy as falling off a log. You simply need to upload your favicon to two locations on your website. Fire up your FTP program and then do this:
1. Upload your new favicon.ico to the main folder of your current WordPress theme. This will enable the browser display of your favicon (address bar, bookmark list, and browser tab).
2. Also upload the file to the main directory of your website (http://mydomain.com/theme/ if your blog is at root level, or http://mydomain.com/blog/theme if your blog is located in a subdirectory named ‘blog’). This will allow for the display of your favicon in your RSS subscribers’ feedreaders.
3. In many cases, you’ll need to edit the header.php file of your theme to make the favicon appear. In the theme editor, open header.php, and just below the <head> tag, paste in this line:
<link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory'); ?>/favicon.ico" />
Save your changes and refresh your browser to view your favicon.
Huh? Were you thinking that you don’t like messing with code? Can’t blame you there. So I’ve saved the best till last.
How to Add a Favicon to WordPress with MaxBlogPress Favicon Plugin
It really doesn’t get any easier than this.
1. Go to MaxBlogPress and download the favicon plugin.
2. Log into your WordPress admin panel, go to Plugins, and upload and activate the plugin.
3. Go into the plugin settings, and fill out and submit the short registration form. Once submitted, you can select an icon from the library included with the plugin. Alternatively, the plugin allows you to upload your own icon.
4. Save your changes. Refresh your browser, and voila! You’ve added a favicon to your WordPress blog!
Though it seems like an incidental point relative to the importance of creating great content for your website, a favicon lends a sense of professional to your site, and helps you to brand your image. It will be far more meaningful than the default favicon of your browser software that otherwise will appear there.
