OK, as promised, a (very) simple tutorial on how to add a favicon to your site – those little images that show up in modern browser tabs (if you’re running IE6, we can no longer be friends).
When you open many tabs, favicons are visual clues for finding the page you’re looking for. They also add that final touch to a site – as a detail person, I really appreciate the power of a good icon and the polish it adds.
Just to be clear, mine looks like this: 
And the good news is, they are really easy to create and upload, even if you’re tech clueless. There are plenty of ways to go about creating one, but I’m going to go the easy route here.
Important note: if you are running a free blog, such as anything on wordpress.com, you might not be able to change your icon. Apparently, you can change it in Blogger, but I don’t know much about it, so I’ll refer you here since this person seems to know more.
First of all, you need to create your icon. I’ve generally started with an image cropped down to 200 pixels square or smaller. Sometimes it takes a little playing around to get the crispness you’re looking for, and to figure out what is recognizable at 16 pixels square, which is the most common favicon resolution. I’ve used this generator before and have been happy with it. Save the finished version to your computer as favicon.ico.
Now, using your favorite FTP program (I use FileZilla since it’s free), upload your favicon.ico to the main directory (not in wp-content or any other folder, at least for the sake of simplicity in this tutorial). You can check that it’s there by typing your site into a browser: yoursite.com/favicon.ico – mine looks like this: www.endlesslycreatingmyself.com/favicon.ico.
Score! Only one more step to go.
In the html of your site or header php file (nothing that ends in .css), look for the <head> tag at the top. (In WordPress, you get there by going to Appearance/Editor/___. That last part depends on your theme, but look for header.php.)
Look for the </head> tag. Right BEFORE it, paste in:
<link rel=”shortcut icon” href=”http://www.yoursite.com/favicon.ico” />
making sure to update the yoursite.com so you don’t pull a “your name here.”
Save and open your site in a new tab. It might take a couple of refreshes or a few hours to appear (and you might need to delete your browser’s temporary internet files), but no more searching for you and finding a blank piece of paper. In just a few minutes you’ve added one more level of personalization to your site. Nice work!
Any questions? Let me know if you add one to your site – would love to check it out.
I like writing, photography, reading, music, design, typography, paper products, days in the seventies and sparkly snow, Spanish wine and cans of PBR. I spent a year in Córdoba, Spain, working as a 
How great! Thanks so much for this tutorial Emily. I followed the link through to the Blogger tutorial and it works a treat 🙂 I’ve been wanting to do this for a long time; can’t wait to see it populate. Thank you!
Hooray! Glad it worked. And fairly straightforward, right? No high tech knowledge needed. 🙂
[…] seem to be continuing with the OCD theme this week, but I am weirdly excited to tell you about TuneUp, a plug-in for iTunes or Windows Media […]