Skip to content



How To Create A WordPress Favicon

Favicons display next to bookmarks and on browser tabsFavicons 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.

In header.php, you will be looking for a line that looks something like this:

<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />

If this code isn’t present in your header file, add it in, just after the <head> 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!

For more lessons on how to optimize the effectiveness of your WordPress blog, sign in for updates below!

2 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. Bill says

    Hi,

    I am building my first WordPress site using a premade template (Evening Shade), I am a beginner. I followed these instructions and it works in Firefox, but not in IE. Is there something else I need to do to get it to work in IE? I have tried in IE 8 & 9.

    Thanks,

    Bill

  2. Chad says

    @Bill

    Sorry you’re having trouble in IE – although you’re not alone, IE has a history having trouble with favicons.

    I’ve loaded your site in both FF and IE and I can see the same problem, so it’s definitely not your personal computer or browser. After reviewing your source code, it looks like you’ve loaded the favicon to the appropriate folders, and your code looks good as well.

    The only question I can think to ask is how did you create your favicon? did you save it as a .ico file from an image editor, or did you rename a different file type? If you renamed something like a .bmp file for instance, that can be an issue.

    Apart from that, this sounds like (yet another) case where IE leaves me scratching my head. I did some Google searches on your problem and could find plenty of people with the same problem, but no solutions that seem likely to help, since you’re set up already looks good from my end.

    Keep me posted!



Some HTML is OK

or, reply to this post via trackback.