Adding a favicon to your site adds an air of professionalism that no serious blogger can afford to skip. For those of you who don’t know what a favicon is, here’s a screenshot: click here. Have you ever wondered how the site owner got that image there? The answer is very simple, and it’s the topic of this tutorial.
Step #1: Get a square image
The image can be virtually anything you want but it’s going to be best if you keep the image simple because favicons are typically only 16 pixels square. Very small. For my favicon I first made an image that was 50×50 pixels. This made it easier for me to get the spacing right (when you upload it to the favicon tool in the next step, the tool will make sure the image is the appropriate size). There is some disagreement on creating a small favicon out of a large image like I did, but for our purposes it’s unimportant. We’ll be happy if we can get at least something up there, right?
Step #2: Run it through a favicon creator
A favicon is a different type of image. New tools for creating favicons are popping up all the time. Just do a quick google search for “favicon creator” and you’ll have dozens of options. The tool I used is by Dynamic Drive.
With any given tool the process is the same. You upload your image and the tool spits out a favicon for you to download. Download the favicon. The download file might be a .zip file or it might just be the .ico favicon itself. Either way, you’ll want to make sure you have an image now that is titled “favicon.ico”. That MUST be its name.
Step #3: Put that image somewhere
If you have your own server then you need to only upload your favicon to your root directory. A lot of people don’t know what their root directory is. A root directory is the “top-level” directory from which all other directories stem. If you need a hint, on many servers the root directory has a name like “public_html” or “html” or “www”. If you’re using WordPress then your root directory is where your wp-admin, wp-content and wp-includes folders are.
If you do not have your own server then you need to find someplace to store the file online. People who do not have access to their own servers would include those who have a Blogger blog. Where this place is located matters little. However, you must remember the exact URL of where that favicon of yours is. It’ll be somewhere such as “http://www.thisIsWhereMyFaviconIs.com/images/favicon.ico”. You’ll need that address.
Step #4: Edit your head
The last step is only necessary if you have hosted your favicon somewhere other than your own server. If you have your own server and have put the favicon.ico in your root directory you should not need to do this step.
To accomplish this step you need to be able edit your HTML files. Specifically, you need to edit your <head>. Somwhere in between your <head> put this line of code:
<head>
<link rel="shortcut icon" href="http://www.mydomain.com/favicon.ico"/>
</head>The only part you’ll have to change is the URL there. Make sure it’s pointing to where your favicon is.
Troubleshooting
Things sometimes go wrong with favicons, or at least they go differently than makes sense to us. Here are a couple fixes I know of for common problems I run into with regards to favicons.
— If the favicon does not load in the address bar, even after you refresh the page a few times, visit http://www.yourdomain.com/favicon.ico and refresh that page a time or two. Sometimes browsers are reluctant to load a favicon for some odd reason and this helps fix that.
**I’ll add to this troubleshooting section as people come up with new problems 
**
15 Comments
You forgot to mention something: DO HESITATE to make your favicon an animated GIF. =)
Yes, good point. Animated favicons are very cheesy.
Animated favicons! Hooray! I think any animated gif is kind of cheesy these days. Oh how I miss the late 90\’s of web design!
PS: I wish there was a \”anthology\” of web design somewhere … with examples of structure and design according to year. Is there? Anyone know?
I\’ve never heard of anything like that. Seems that you\’d have to do it in 5-year increments though as styles tend to overlap a bit.
For any Mac users, I had trouble until I realized that cutting and pasting the link put in garbage characters. Using BB edit I clicked on \”show invisibles\” and got rid of them.
Great tip, Cathy. Thanks for adding that.
YAY … I think I just did this, Ben. I host my own site and put my very own new favicon into my root index. So, I think, according to your directions I do not need to edit my \”head\” file. Is that correct?
Thanks tons!!! This was fun …
Looks good, Sonja! And yea, you\’re correct. If you place the file in the root directory you don\’t need to put any code in the header. You can see your favicon at this location: http://www.calacirian.org/favicon.ico
I\’ve also gotten it to work with my blogger blog. The dashboard has a choice called layout which in turn has a choice called edit HTML. I\’m so thrilled. Now I want to figure out how to get my wordpress avatar to show up when I respond to wordpress blogs.
Cathy: All you need to do is go get a Gravatar. They\’re free and everyone has one.
Hey Ben … I found my favicon when I used the long link that you suggested. But I\’m not seeing it when I just go to my blog, you know, sort of generically. Does it take a few days or something to propigate?
Oh … whoops … never mind. It just showed up. That was really weird. It wasn\’t there when I just checked and literally seconds later it was. The tubes are strange like that.
Yeah, that kind of odd behavior is somewhat typical of favicons.
Thank you so much!