Long before now, I have written a blog post on how to add a favicon to a WordPress blog and since then, the post have been getting me few hundreds traffic per day. This traffic includes how to add favicon to a blogger (blogspot) blog, which is the main reason I decided to write about it today. Although I’ve said much on what a favicon is in the WordPress post, but let me remind you again. A Favorite Icon (favicon) is that small image (usually 16×16 or 32×32 size) that gives your website or blog a trademark. Your favicon will show up in the browser Title bar, URL bar, when bookmarked or when surfing for a list of bookmarked sites. It makes it easy for your site visitors to quickly find your site among many in the list. Every top sites has this favicon, ranging from Google, Facebook to Yahoo. If you check this blog (www.SOJblog.com), you will see that there is a favicon at the URL and Title bars. If you want something like this for your blogger blog, it is also possible. Read on to learn how to create and insert a favicon into blogger blog.
How to Create Favicon for Blogger Blogs
So to create and add this favicon is a very simple and easy thing. First we need to create our image that we want to use as favicon. Open up any of your image editing software like Paint. Every Windows operating PC has this program. You can also use Photoshop, Corel Draw, Adobe Fireworks and so on, but a simple Paint will be okay because favicon is just a simple image that doesn’t need too much designing.
NOTE: You can use your site logo, if you have any, as a favicon
Now after designing an image to be used as favicon, we need to convert this image to a .ico file format. Remember, your image will be in .jpg, .png or .gif file format. But to make favicon works, it must be in .ico file format. So how do we convert our image to a .ico format? It’s simple. There are numerous free online favicon generators we can use. I personally use www.favicon.cc for mine but you can also use www.animatedfavicon.com for animated icons.
Visit the online favicon generator and create your favorite icon, and save it to your PC. After that, then we need to upload and add this favicon into our blogger blog but the problem is we can’t upload a .ico file on Blogger (as at the time of writing this). So the solution is, we need to find free image hosting sites that allow the upload of such files. You can Google search these free sites and find the ones that best suit you. I use Google page creator which allows to upload ico file. If you still can’t find a suitable free image hosting site, then you should try this site: www.iconj.com/generator.php for both generation of favicon and free hosting your ico files. Then get the link of the favicon URL and save it some where because we’re going to need it to add it to your blogger blog.
How to Add a Favicon in Blogger Blogs
Next thing is to add our hosted favicon file to our blogspot blog. Follow the steps below to do this:
1. Login to your Blogger Dashboard
2. Inside the Dashboard, click Layout, then click on Edit HTML.
Before editing your HTML files, make sure you backup your entire template.
3. Then search for the following line of code:
4. Immediately after that line of code, add this code:
<link href=’ADD YOUR FAVICON URL HERE’ rel=’shortcut icon’ type=’image/x-icon’/>
Make sure to replace ‘ADD YOUR FAVICON URL HERE’ with the link to your uploaded favicon file, starting with http://
5. After that, save the template and you’re good to go.
That is it. You can now enjoy having favicon on your blogger blogs. However, if you can’t convert your image into favicon format or you can’t still upload a favicon, you can still use it as favicon by doing this:
1. Upload a 16×16 or 32×32 size image in any free image hosting site.
2. Then get the image URL.
3. Now following code:
<link href=’YOUR IMAGE FILE URL’ rel=’shortcut icon’ type=’image/x-icon’/>
4. Save the template.
That is it for now. Be sure to subscribe to our feed so as not to miss wonderful updates in the future. If you like this post, please do share with your friends on facebook and twitter.