How to add a FavIcon to your WordPress website

Add Comment

favicon-tabMaybe it is just a pet peeve of mine but I get annoyed when I see a blank FavIcon or worse yet the theme’s default icon.

What is a FavIcon?

A FavIcon (short for favorites icon), also known as a shortcut icon, website icon, URL icon, or bookmark icon is a 16×16 or 32×32…

If you don’t have your own website then you may not even care about it.

However if you do have a website you should make it match your brand that people recognize you by. Either your logo, or part of it, or maybe your photo.

It is pretty simple to create your own FavIcon if you have the image you want to use already.

There are plenty of websites that will do it for you but the simplest one by far is Dynamic Drive FavIcon Generator.

Basically it is 3 steps. First choose the graphic file you want to use (step 1) then click their ‘Create Icon’ button (step 2) then once it finishes you click their ‘Download FavIcon’ button (step 3).

Dynamic Drive- FavIcon Generator

Make sure you save this downloaded file (favicon.ico) to a place where you can find it, maybe your desktop?

Ok so now what?

Now that you have your file you need to replace the current one that your WordPress theme is using. Some themes have an administration panel in the backend that allows you to upload a new FavIcon but most don’t!

Don’t worry it is not that hard to accomplish.

First let’s find out where your current FavIcon is located. To do that, go to your main home page and right click in the browser and click view source from the menu that appears.

Look through your source to find something similar to mine:

<link rel=”Shortcut Icon” href=”” type=”image/x-icon” />

Of course your links will be different but the file name favicon.ico should be the same and the link rel=”Shortcut Icon” should also be the same.

So once you find it you need a way to get the new file up onto your web server. You can use an FTP program or maybe your hosting control panel has a file manager built in? Whatever you choose be sure to put the FavIcon file in the same path as the current one is.

I use FileZilla it is a free open source ftp program and works great!

I am not going to get into how to use FileZilla here, perhaps another post I will give a tutorial on FTP’ing.

But here is what my FileZilla screen looks like after I login to my web server and drill down to the theme folder.

Click to enlarge
Click to enlarge

The next step is to just drag -n- drop the favicon.ico file from the desktop on the left to the correct folder on the right.

You will get a warning message about overwriting the file on the server, just click yes or ok to allow it to do so.

That’s it!

See I told you it wasn’t that hard and now you have a fancy new favicon for your website.

But wait, I still see the old one?

This happens because the files get cached in the browser. You can fix it by clearing all your browser cache or quitting the browser and relaunching or if that doesn’t work, if you visit the link that is directly to the favicon file it will reset your browsers cache!

Remember I showed you my link above, yours should be similar.

If you have the standard default WordPress install with the 2012 theme there is no default FavIcon (why I have no idea) but never fear because you can add one to the default theme pretty simply too.

All you need to do with the default theme is to add this code to the functions.php file and just point it to the location of your FavIcon file.

function my_favicon() { ?>
<link rel=”shortcut icon” href=”yourimagepathgoeshere” >
<?php }
add_action(‘wp_head’, ‘my_favicon’);

Even if you don’t use WordPress you can set a FavIcon for your site just by installing a link into the header of the html that directs the browser to the correct file for your FavIcon.

If you read this far and your eyes didn’t glaze over congratulations! Here is a little something that will make your life much easier.

A plugin!

That’s right, there’s a plugin for that! :)

If you don’t want to mess with FTP and you really don’t want to edit any theme files then this is the answer for you. I personally don’t like installing needless plugins but this will work for the less technically inclined that want to just get er’ done. This plugin even has upload capabilities built right in.

All In One Favicon

I hope this quick little tutorial helped you, if you have any questions please feel free to leave them in the comments below.

( If you are reading this anywhere but my blog, you can find the original post here. )

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.