Today I’m going to show you guys how to create a favicon for your blog. Favicons are useful for making your blog more aesthetically pleasing and making it stand out in your readers bookmarks.
This is my favicon (its the heart made out of flowers). This is how it looks in Firefox 4.0
Right lets get straight into how to make one.
First of all decide on what you’d like to be your favicon. Some people use the first letter of their site while others use shapes or logos. Just make sure whatever you choose is clear to see even in very small dimensions. Save it as a .png file measuring 16x16 pixels.
Then follow the steps given below. They’re different for Wordpress and Blogger.
Blogger
Go to favicon generator site Dynamic Drive. Upload image to generate the favicon and download it. This will convert it to an .ico file. Upload this .ico file to photo sharing site Picturestack. Do not use flickr or photobucket as they do not support ico files. Copy the link and paste into an app like notepad.
Then log into your blogger dashboard and go to template –> Edit HTML
Find this line of code near the top.
<title><data:blog.pageTitle/></title>.
Directly underneath this line paste the following code.
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
Replace 'favicon.ico' with the url of your favicon (the one you pasted into notepad).
Then hit save and voila your done. The favicon may not appear immediately depending on the browser but it shouldn’t take long.
Wordpress
First of all add add your favicon as a .png to your media gallery (media -> add new)
Log into your wordpress dashboard and scroll down to plugins –> add new.
Search for ‘All in One Favicon’. Install and activate it.
Find the plugin listed under settings and click on it.
In the fields named ‘backend ico’ and ‘frontend ico’ fill in the url of your favicon image.
Hit save and your done. With this method your favicon will appear immediately. I hope this little tutorial will be of use to all of you who don’t yet have one. If you have any questions just leave them in the comments and if you use the tutorial to add a favicon let me know so I can check it out.
