08/17/2012 Author: Josh 0 Comments

How to Add a Favicon to WordPress

Anytime I set up a new site on wordpress one of the first things I always try to do is set the favicon image for it. To me having a favicon always makes the site seem more Official and makes me feel good about working on it. Regardless of what your reason for wanting to set a favicon image is you’re still going to need to do a few things in order set it up.

A lot of themes, especially premium themes will have an option for setting your favicon in the theme settings. For this tutorial however we’ll just cover how to set it on a standard WordPress install.

Step 1. Creating the favicon image.

In order to do this you’ll need to find an image that is going to look ok when shrunk down to 16 pixels. Usually your logo or something very simple that represents your site will work for this. The simpler the image the better its going to work though since you’re not dealing with a lot of room for fancy designs and colors.

Once you’ve got your image picked out you can head over to this site to transform it into a favicon.ico file. Save the file that you get from this site because in the next step you’ll be uploading it to your site.

Step 2. Uploading the favicon to your website.

The next thing you’re going to do is upload your favicon.ico file to your website. You can use an ftp program to do this or whatever other method you normally use to upload files to your server.

You’ll want to put this file into 2 locations. First place it in the root directory of your site and next place into the folder that your theme is located in. This will usually be wp-content > themes> yourthemename

Step 3. Add some code

The last thing you’re going to need to do is add a little snippit of code to your site. You can do this by using your favorite file editor and then uploading it back to your site or by using the built in WordPress file editor.

Find the header.php file and place this code after the <head> tag. Usually you’ll be able to find other snippits of code that look similar and start with <link… I like to place the favicon code right in with those.

here’s the code from the wordpress codex

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

Step 4: Refresh/Restart your browser

The favicon image for your site gets cached by your browser so you’ll most likely have to close your browser and re-open it or at the very least refresh the page in order to start seeing it.

Hope this has helped and thanks for stopping by!

-Josh

If you enjoyed this post or got value from it please help out the site by sharing it with others!

Pin It

How To

About Josh

Josh is an online marketer and co-founder of ProfitBlog.com. With a passion for affiliate marketing, blogging, SEO, copy writing and product creation he was able to trade the "cubical lifestyle" for the "internet lifestyle" in early 2008 and hasn't looked back since. When not online Josh likes to travel and have adventures. He also occasionally likes to write for the site.