Favicons can be a great way to help your visitors identify with, remember, and enjoy your site – and they are pretty easy to implement in WordPress.
“Favicon” is short for “Favorites Icon.” It’s that handy little icon that shows up in most browsers next to the name of a site in your bookmarks list, or on the tab that is displaying your blog in a browser.
Depending on your setup, the default can be pretty boring – a little white piece of paper for example. Other times you may find your site displays the WordPress logo, or even your hosting provider’s logo!
How To Create A Favicon
Favicons are tiny. 16 pixels across, to be exact.
You can create one on your own with any image editor that’s capable of saving .ico files (I use the GIMP – easy to find if you Google it).
The other option is doing a search for “Favicon Generator,” there are a lot of sites out there that will help you convert an existing image – just remember, it’s going to be small, so simple images are best!
Adding Your Favicon To Your Site
For this step, you’ll need an FTP client, once again, a Google search will help you here. If there is already a file named
favicon.ico in the root of your server, you’re going to want to overwrite or delete it.
Once your favicon is ready, use the FTP client to upload two copies: one to your current theme’s folder (
wp-content/themes/your-theme-name) and one to the root of your domain. This second copy is for your RSS subscriber’s feed readers
Update Your Theme For Browser Compatability
Now, just because you’ve uploaded a favicon, doesn’t mean everyone will automatically see it. Some browsers, particularly older ones, need to be told to load the favicon – while newer ones will see the file and just use it automatically.
To ensure that your new favicon works in as many browsers as possible, you’ll need to modify your theme’s
header.php file – either in the Theme Editor under the “Appearance” tab of your dashboard, or by downloading the file to your computer.
header.php, you will be looking for a line that looks something like this:
If this code isn’t present in your header file, add it in, just after the
tag. If it IS there, make sure it looks just like this.
All this code does is identify the copy in your theme folder as image you want to use – so older browsers know what to look for.
Once you save these changes and restart your browser, your new favicon should be up and running – if it isn’t, try clearing your browser’s history, and maybe restart your computer if it’s really stubborn.
That’s it! Your site now has a handy, easily identifiable icon that your readers can associate with it’s name! Enjoy!