Oct 29 2007
It might help you to know exactly what a favicon is, and why on earth you’d want to make one!
A favicon is a tiny little image (icon) relating to the website you are visiting, that appears in the address bar (and on a tab, if you’re using a tabbed browser like Internet Explorer 7 and Firefox).
Notice how tiny it is? Just 16 x 16 pixels.
But why would you bother? Well if your readers are anything like me, they can have numerous tabs open at any one time. The more open tabs, the less room there is on the tab for the name of the web page that is open.
So having a favicon enables a web surfer to quickly identify your tab from a series of open ones, and it can also help with branding.
Creating a Favicon Yourself
Because a favicon is so small, it’s impossible to work with a space that tiny. So if you’re going to create one, try using a larger square that is divisible by 16. Something like 64 x 64, 80 x 80, or 96 x 96 pixels…. You can do this in a program like photoshop or paint.
Favicons have to be in a .ico format. More than likely you won’t have the technology to save a file in this format. So you can save your image in a format like .jpg or .gif.
Using a Favicon Maker
Another option is to create an image from scratch using a favicon maker. There are a few nifty tools like this around, that will allow you to both create a favicon and convert an existing image into a favicon.
It’s good to keep in mind that as a favicon is so small, it’s better not to have too much detail. Bold contrasting colours work really well.
Using this service, you can also upload an image that you have previously created yourself and the program will convert the image to a favicon (.ico file).
Once you’re happy with the favicon, save it to your computer (using the favicon maker metioned above you, right click on the newly created favicon and save the image to your computer). Will notes in the comments that it is VERY important that you get the case right – it has to be saved as favicon.ico NOT Favicon.ico OR favicon.ICO or any other variation.
How to Add a Favicon to WordPress
Next you need to upload the favicon file on to the root directory of the server hosting your blog. As an example, my favicon is located at http://blogpond.com.au/favicon.ico – but don’t bother trying to look at it, because you’ll get a page of gobbledygook. If your root directory is something different like example.com/blog, then “/blog” is your root directory and that’s where you put the favicon file.
n.b. Will suggests that just uploading it to your root directory should be enough and the next step might not be needed – you could try doing this and then looking in an alternative browser to see if the favicon has been detected, before proceeding to the next step.
Next you have to add a little bit of code to your blog so it will recognise that the favicon file is there. In my wordpress theme the file I have to edit (under presentation/theme editor) is “header.php” (note: if you are reading this by RSS, it won’t make much sense because bits of it will not be displayed – feel free to click through if it’s of interest).
I added the following code:
Obviously you’d replace my url with the location of your own file!
You might not see the favicon right away. However, if you try opening an alternative browser it should show up.
How to Add a Favicon to Blogger
I don’t have much experience with Blogger, but this seems to work. If you go to “template” and “edit html”, directly under where is says you need to add the text below:
The url is where your image is hosted. I’m not sure if you have the facility to upload images to Blogger, if not you’ll have to host the image somewhere else.
If you decide to try it, let me know how you go.
11 Responses to “How to Make and add a Favicon to your Blog”