You know that little bitty tiny schminy icon that shows up in your browser?

If you don’t have one, maybe your current favicon looks like the default square thingie for WordPress blogs:

This is my current favicon, and I can’t have that! Especially if I’m about to tell you how to install your own favicon. So you can watch me do it now so you can install your very own super-exciting favicon.

Most of these instructions apply to all blogging platforms (WordPress, Blogger, etc.), although my specific examples are in WordPress.

Ready?

Check Your Theme’s Options First

First of all, if you use WordPress, make sure your theme options don’t already do this for you. For example, I use the Thesis theme and it takes any photo and turns it into a favicon and installs it all in one step:

 

Use a WordPress favicon plug-in

If you use self-hosted WordPress, you can install a plug-in that makes it very easy to install a favicon, you won’t have to dig into your code, and you won’t have to worry about having to re-add your favicon every time you update or change your theme.

WordPress directory for favicon plug-ins

 

Otherwise, here are the steps to make and add a favicon:

How to Make a Favicon

Find a square-shaped image

Find a square shaped image that you want to reduce to a tiny square image. I’m going to use this:

I just cropped something to a square. This one right now is 129×129 pixels. I’m pretty sure it will also suck as a favicon, just a dark blob, but I’ll find a better image later, when you’re not looking.

Convert that image to a favicon.

You could shrink your image to a 16×16 square yourself, save it as favicon.ico, and go directly to Step 3.

Or you can use the ever-so-popular Favicon Generator website that will turn any image into a favicon and correctly name it for you.

When you go to the Favicon Generator website, you will get a page that looks like this:

Click the Browse button and find the image you want to convert into a favicon. I don’t know if it matters whether you pick 16×16 or 32×32 or anything, so I just left it at 32×32.

Click the Generate Favicon button. This will show you what your icon will look like. You can download that image if you like it, or find another image to convert into a favicon.

 

Click Download Your Favicon Here. You will find a file called favicon.ico in your Downloads folder.

How to Add a Favicon to Your Blog

Upload the favicon to your blog’s server.

For Blogger, this means uploading the file to Photobucket or Picasa or somewhere your blog can reference later. The same goes for a hosted WordPress.com blog.

For self-hosted WordPress, you can upload this favicon to your WordPress media library. (Go to your WordPress Dashboard, click Media, then Add New)

Regardless of blog platform, make a note of the image’s URL once you’ve uploaded it.

I usually highlight this URL and paste it temporarily somewhere like Evernote or in another browser tab until I need it.

Reference the URL of the favicon in your HTML.

You can do this at least one of a bazillion ways. Please do be careful when mucking about here because this involves diving into the code.

First, go into your header.php file and see if there is already a reference to a favicon. On your WordPress dashboard, click on Appearance, then Editor. On the right-hand side of the dashboard will be a list of php files. Click on the one marked header.php

This will bring up the header.php file that you can now edit. Check to see if a shortcut icon reference already exists. Look for a line near the top that starts with <link and has the phrase “rel=shortcut icon”. Here is an example:

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

Option 1: Add favicon.ico to your root directory

If there is already a shortcut icon reference in your header.php file, then your blog is already looking for a favicon somewhere, probably in your root directory. If this is the case, then you can try uploading the favicon.ico file directly into your root directory. If that works, then this is a better method because since you’re not changing your theme’s files, you won’t have to re-do this whole thing again if you ever update or change your theme.

If there is no shortcut icon reference, then add one just like the one above and upload the favicon.ico to your root directory.

If that didn’t work, then try the next option.

Option 2: Add or Replace current shortcut icon reference in your header.php file

Add or overwrite the current shortcut icon reference with this:

<link href="FAVICON-URL" rel="shortcut icon" type="image/x-icon"/>

where FAVICON-URL is the URL you noted back when you uploaded it to your server. Here is an example:

<link href="http://www.nannygoatsinpanties.com/wp-content/uploads/2010/05/favicon3.ico" rel="shortcut icon" type="image/x-icon"/>

Don’t forget to save your changes.

If the shortcut icon reference didn’t exist in your header file at all and you had to add a new one, make sure it’s near the other <link type lines so you know you’ve added to the right section of the HTML as it needs to be after the HEAD tag.

Option 3: Add a function to your theme’s functions.php file.

If Option 2 didn’t work, maybe this one will. (Make sure you undo any changes you made that didn’t work so far.)

Go to your WordPress dashboard, click on Appearance, then Editor and find the Theme Functions file (functions.php) in the listing on the right-hand side.

Add the following code:

function my_favicon() { ?>
<link rel="shortcut icon" href="FAVICON-URL" >
<?php }
add_action('wp_head', 'my_favicon');

Where FAVICON-URL is the URL path to your favicon file that you uploaded earlier. Make sure you add this code in an appropriate place, such as just before the first function.

The above function will place the link to your favicon between the <HEAD></HEAD> tags of your HTML.

 

Warning: Any changes you make to your theme’s files will be wiped out whenever you update to a new version of your theme. If you switch to a different theme, your blog will also lose this reference because this reference was made in your previous theme’s files. In either case, you’ll have to make the above changes again.

The safest option is to either use a theme or a plug-in that handles your favicons for you.

Good Luck!