How to Add a Customize Favicon in Your Blogger Blog

Tired of searching for methods on how to create a customize favicon for your blog? Well, you are now reading the right article post on how to add a customize favicon in Blogger blog (in a very simple way.)

Step 1: Choose your desired logo, image, picture or favicon for your blog. (This would be the logo in your browser's URL address bar.)

Step 2: Go to Paint. Open your desired image for your blog. Resize the image (shortcut key: CTRL + W). There would be a pop-up window for resizing the image. Resize it by PIXELS not by percentage. Now, make the horizontal and vertical measurements to 16. (so it must be, 16x16 pixels and not 16x16 percentage). Save the image (preferably to .jpg file.) Note: You can use Adobe Photoshop if you want to, I recommend paint because it is much easier to use than Photoshop if you want to see your favicon immediately beside your browser's URL address bar.

Step 3: Go to ImageShack. I prefer ImageShack than other image hosting sites because they are simply reliable when it comes to free image hosting. Other image hosting sites will just come and go but ImageShack has been there for how many years just doing what they do best, host images for free.

Step 4: Choose the image that you have edited for 16x16 pixels. Don't resize your image there because you have already done that. Then start uploading!

Step 5: Now, you will see the Links to share your image, just simply copy the Direct Link for your image (you have to sign up in ImageShack first, in order to do that.)

Step 6: Copy this - <link href='YOUR IMAGE URL' rel='shortcut icon' type='image/x-icon'/>

('YOUR IMAGE URL' must be replaced by the link that you just copy in step 5.)

(backup your template if you want)
Go to your Blogger Dashboard > Design > Edit HTML

then post it right after - <title><data:blog.pageTitle/></title>. (if you can't find it, just press CTRL + F then paste it to the search box)

Step 7: Save the Template! View your blog and that's it!

Simple, isn't it? Sorry for a much more detailed step by step method, when I can just make it much more simpler as it is.

*UPDATE*
if you have this kind of HTML code in your blogger template,

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> ~ <data:blog.title/></title>
</b:if>

then you should post the link in STEP 6, right after </b:if>

Enjoy and God Bless!