How to add Favicon on your BLOGGER

tophe · 1 How to add Favicon on your BLOGGER 4/4/2010, 11:15

tophe

Administrator

Posts : 581
Location : Bacolod city/city of smile
Join date : 2009-11-02
Age : 31
Warning Level : How to add Favicon on your BLOGGER Normal10

Update: These instructions do not seem to work anymore
thanks to Google/Blogger changing something. I’ll post an update with
new instructions if I find a way to fix it.
Update #2: Simple fix to this problem. The instructions have
been updated in step three. Hopefully that will get it working for many
of you again.
Blogger.com is one of the most popular blogging platforms on the
Internet, yet if you have a blog with them you are often stuck with the
default Blogger.com favicon. Hard to brand your blog with your own personal touch when you have the Blogger.com favicon on the address bar. If people bookmark your blog they won’t see your favicon and might quickly forget about your website. There is no reason why you can’t change the favicon
on your Blogger.com blog to one of your own design. You just need to
follow these easy steps and soon your Blogger.com blog will sport your
great new custom made favicon.

First thing you need to do is create your own custom made favicon. In this case you do not have to use an image to favicon generator,
but your image should be either a .gif or a .png. In you example we are
going to use a .png file. If you are not sure what kind of image to use
browse through some of the free favicons
that we offer, perhaps there will be one there that you would like to
use. If you do decide to use one of the many favicons we have to offer
don’t click “Download this favicon” because that will give you a file
in the Windows .ico format. Instead right click on the image of the and
choose “Save Picture As”.
After you have the image you would like to use as your favicon,
goto your Blogger.com blog and create a new post. It does not matter
what you call it since you don’t need to publish it. Once you have
created a new post use the image upload button to upload your favicon
to your Blogger.com blog.

Once you have uploaded the image, you will need to switch to “Edit
HTML” mode if you are using the “Compose” mode. Once you are looking at
the HTML you will see something like this:
<img
src="http://bp0.blogger.com/_7rflRHkQmUU/SFc_ZW22lcI/AAAAAAAAASA/Y99-skckaeM/s400/favicon.png"
alt="" id="BLOGGER_PHOTO_ID_5212704798569567682" border="0" />. You need to highlight and copy the part in quotes right after src. In this case it would be: http://bp0.blogger.com/_7rflRHkQmUU/SFc_ZW22lcI/AAAAAAAAASA/Y99-skckaeM/s400/favicon.png.
You should paste it into Notepad or another text editor. You don’t want
to lose this and you will be closing the Blogger.com editing window
next.
Once you have the location of the image you uploaded copied, you
can click on the Layout tab of your Blogger.com blog. Once you are at
the Layout, you need to click “Edit HTML” Look in the HTML for a tag
that says <head> </head> and right below above it paste: <link href=” rel=’shortcut icon’/>
<link href=” rel=’icon’ type=’image/png’/>
Once you have those lines pasted into the template, copy the src of the
image you want to use as you favicon that you uploaded earlier and
paste it into the two lines you just added where the href=” is. In our
case it looks like this: <link
href='http://bp0.blogger.com/_7rflRHkQmUU/SFc_ZW22lcI/AAAAAAAAASA/Y99-skckaeM/s400/favicon.png'
rel='shortcut icon'/>
<link
href='http://bp0.blogger.com/_7rflRHkQmUU/SFc_ZW22lcI/AAAAAAAAASA/Y99-skckaeM/s400/favicon.png'
rel='icon' type='image/png'/>

Click save template and your Blogger.com should now have your fancy new
custom favicon showing on the address bar when you visit your blog.