How To Add a Favicon to your Blog? ~ The Blog Doctor.
Loading...

How To Add a Favicon to your Blog?

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

To add a Favicon to your blog you...............

have to create one first. You can create a favicon in an icon editor software or generate one online. One useful free program to create it in is IconEdit32. Search for it in Google and download and install it. It can create 16x16 icons and 32x32 icons. The first is very small and so it is better to create one of the latter size.

A Favicon is actually short for "Favourite Icon" and serves as a sort of symbol for the site. You can have a text Favicon made up of the first letters of your site or a symbolic favicon which denotes the subject of your site. It also serves to markout your site in your bookmark list. You can also make an animated favicon and a scrolling favicon which scrolls your blog title one letter at a time.

To make one online a free favicon generator is available at :
http://www.html-kit.com/favicon/

After downloading the favicon to your PC upload the icon file to a freeserver like Googlepages. Copy down the URL of the icon at Googlepages. Then login to Dashboard of your blog and go to Edit Html subtab under the Template tab. Copy the following code just below <title>...
</title> tags

<link rel="shortcut icon" href="URL OF YOUR ICON AT GOOGLEPAGES" />

Save Template. Republish if necessary. Refresh Cache and view blog.

If you want to add an animated favicon add the following code in the same position :

<link rel="shortcut icon" href="URL OF YOUR ICON AT GOOGLEPAGES" />
<link rel="icon" href="URL OF YOUR ICON AT GOOGLEPAGES" type="image/gif" />

Save Template.

Another site to make a favicon is :
http://www.myfavatar.com/

Technorati Tags:

52 comments:

Star said...

so glad I found you...thanks for the help!

Forex said...

Thanks for an idea!

pinny said...

I followed your instructions, and get a nice animated favicon.

Only problem is that the animation only cycles once when the page is loaded, then parks on the icon.

Is this how it should go, or can I make it continue animating?

Thanks for your help!

AmeyJah said...

hey another post that i was looking for. i had a favicon but i didn't knew the method. well you can too take look at my favicon

Robert said...

Hello.
Thanks again for all your help. Much of my sites look is thanks to you. So, I finally made a favicon, which I've wanted to do forever, and put it into my site as you said. It worked and it was there for several hours, as I opened and reopened to my site.
However, when I closed safari for a break and came back, it no longer shows up. The Blogger favicon doesn't show up either, just the world icon of the web, I guess. I rechecked the code, took it out and put it back in but nothing changed. My favicon will not show back up! Any suggestions?
Rob
check it out at: http://compassionatecouncil.blogspot.com

vin said...

Hi Robert,

You can relax. I can see the tree favicon in my browser address bar when I load your site. Nice header and background too!

SingForHIm@Real Life said...

Wow this was so easy thanks

M. Bouffant said...

Hi: I have the same problem as Robert above. I installed a favicon, it worked just fine (using IE7). The next day, it wasn't there, just the regular Blogger "B." The code is still in the template. Any advice/suggestions would be appreciated. Thanks!!

Mike said...

Thanks for the great site, matey. I stumbled across it looking for a way to install a favicon in blogger, however, I can't get google pages to publish the .ico file?

vin said...

Mike,

What is the error message? Try any other free host. Just Google for them.

John Denton said...

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "link" must be terminated by the matching end-tag "".


I receive this message when posting my fav.ico into my blogger template html. Whats up?

vin said...

John Denton,

Just add a slash at the end of the tag like this :

<link href="..."/>

BURAOT said...

hi Vin. thanks, I got my audio working fine now. with the favicon, I installed mine on googlepages and pasted the codes on my new site. however, the favicon that appears is the googlepage creator not my "favicon". how is that?

vin said...

Buraot,

Can you send me the code you pasted or your blog address?

Alda said...

Hi Vin

Hoping you can help ... I had a Favicon for ages, but a few days ago it suddenly disappeared. I went back to the original site that created it, and it's vanished ("account has been suspended"). Which I guess solves the mystery of why it's disappeared.

The problem is that to create a new one I have no idea how to upload to a freeserver like Google pages. (I didn't have to do that with the original, just paste the code into my template.) Can you provide clearer instructions for that?

Thanks a million.

Vin said...

Alda,

Login with your Google account to :

http://pages.google.com

In the right sidebar bottom frame click on Upload link. Explorer wndow will open. Navigate to the favicon file on your hard disk and select it.

Click Open.

File will upload and appear as a link in the sidebar. Right click the link and choose Copy Link location.

Paste that link in the code shown in above post.

Rex Ganymede (super hero.) said...

(http://the-tribulations-of-rex.blogspot.com)

i guess i have the same problem that buraot has: i uploaded my .ico just fine, to google pages..
..and i was able to get blogger to properly refer to that file...

...but, what shows up is not my favicon.

this is googlepages icon: the error i got, the first time i uploaded my file, was that most browsers will not support its utilization.


what to do?

Vin said...

Rex,

Have you checked in all the browsers?

Also try uploading icon to Photobucket.com and use the link from there.

rkonoplev said...

Thanks for the help!

Rex Ganymede (super hero.) said...

actually, i can pass on some knowledge to you that I, myself, have recently come across:

one can upload an .ico file to googlepages just fine; the key is, the file-name cannot be "favicon.ico" -- that name is reserved.

so...i merely renamed my file to something else (i'm sure you can find out what, if you really wanted to), which made it show up in Google Pages, and my page.
(after so many hours of racking my brains about it.)

now, my problem, now, is figuring out how to make my .ico animation show up; i don't know if this is a googlepages issue or a blogger issue.

i guess i'll find out, shortly, after i do some rooting around for a free favicon editor...

nicolle said...

i love this blog.
i wish i was a computer genius!
totally used this post to create my own icon, and i LOVELOVELOVE it
thepinkreview.com

Charlie said...

rex seems to be right. i had the same problem and changed the name and all was well. thanks vin and rex

Shadraq said...

Vin

I tried that code and couldn't get it to work. (minus the <> link info) The Current code is:

href='http://www.fileden.com/files/2008/2/13/1757459/hawkeye.ico' rel='shortcut icon' type='image/vnd.microsoft.icon' href='http://www.fileden.com/files/2008/2/13/1757459/hawkeye.ico' rel='shortcut icon' type='image/x-icon'

Favicon always shows up in Firefox...and will show up for a day or so on IE7, but then it just becomes the regular Internet Icon...any suggestions?

Vin said...

Shadraq,

Occurs on my blog too! :-(

Shadraq said...

So, Vin...do you think it is a IE7 issue, and not a code issue?

Which begs the question...why don't people simply use Firefox? :)

Vin said...

Shadraq,

Seems like that. A uniform world would be very boring, no?

:-)

Shadraq said...

Vin - Perhaps, but according to Jerry Seinfeld, we all end up wearing the same clothes anyways - 3 piece silver suit with the silver shoes...

Thanks for your help.

Vin said...

Shadraq,

That is for when we go to conquer other planets after uniformlizing this one!

Andrew said...

Very useful, thank you. That's exactly what I was looking for. Also good tip for using Googlepages, because apparently you can't just host it on your Blogger, but I'm not too confident in other free host services. Google should be OK though.

Hal Bennick said...

What I would really love to do is remove the favicon all together and let it default to the IE symbol. Do you know how to do this?

Vin said...

Hal Bennick,

Remove all favicon code shown in above post from your template. Clear Cache.

Sam said...

having a slight problem with mine....

i have followed the instructions as per above but all i get is a little icon that i guess is something that firefox defaults to and a message (if you hover over it) that says:

"this website does not supply identity information"

any ideas?

great site btw!

Vin said...

Sam,

I can see the favicon in left corner of Firefox browser address bar just before the "http://.." starts.

Hovering on it shows "Drag and Drop this icon to Create a Link to this page."

Try clearing the cache.

annabelle said...

Thank you for the help. Have one issue still--maybe it has something to do with my Blogger template, but I still don't understand where in the template I'm supposed to drop the new code to link to my favicon, which I have saved as a PNG in GooglePages as I understand I'm supposed to. Any guidance? Many thanks.

Vin said...

Annabelle,

Have you uploaded the favicon to Googlepages? If so what is the link of the file?

Anonymous said...

Hi,
I am using
http://www.mobilefish.com/services/favicon/favicon.php to create my favicons. This site also contains other useful tools.

La Linguetta said...

THANK YOU! I couldn't find this information anywhere -- in part because I didn't know the term "Favicon". I'm highly recommending your blog to everyone I know.

TeleC@ster said...

i'm afraid blogger blocked out favicons other than blogger's own

Vin said...

TeleC@ster,

It is a recent problem. Move your favicon code line so that it is between :

]]></b:skin>

PUT FAVICON CODE LINE HERE

</head>

nucleusofear said...

thanks vin for the tip to move after the skin code and before /head my favicon came back as first.For a moment I thought that blogger remove the option of adding favicons.

Cynthia's Cottage Design said...

HI Vin,

I posted a question about thumnails and you thankfully answered, but I think it was about a favicon. I dont know what that is, but the thing I was talking about is on the feature "blog list/roll", when I add everyone to that list, I have an option to see thumbnails etc of their profiles in addition to the title. But when I go to their pages and see their profiles, my thumnail ( of my most recent post ) doesnt show up ...if you can help Id so appreciate it, Thanks!

Cynthia

Liz said...

Vin,
You are the best! I tried adding it between the head and skin tags like you suggested and it worked perfectly!! I love having my own favicon!!

Vin said...

Cynthia's Cottage Design,

The blog list fetches the posts from your blog via the blog feed.

In Settings---->Site feed--->Post Feed redirect box you have put your blog address. Your site feed has become inactive because of this as it is redirected to blog.

Delete that and leave that box empty or put your Feedburner feed URL in it and save settings. Then the blog list will start working.

GreenEarth said...

this site absolutely perfect..thanks bro!

Ahoj said...

Thanks for posting the favicon update in October! That helped and now I'm sorted!

Kate said...

Hi, Vin!

Thanks for this tip! It really worked!

Do you know how to make the blog title on the tab scroll, too? Like a marquee or something...

Thanks again!

Vin said...

Kate,

Not advisable as visitors may find it disturbing and leave the site. Check it out here.

RV2x08 said...

lastly, i did it!! thank u so much vin. u reli help me out! awesome man!

Avinsah said...

Hey u blog doctor, Seriously man I just don't know how shud i thnk u..Ur tutorials have solved almost all of my problems...

thanks alot dude :))

Broken Claw said...

I followed your directions for my custom domain blog on Blogspot. When I saved the edit to the html, it automatically reformatted the code to:
"link href='myotherdomain.net/favicon.ico' rel='shortcut icon'/". It removed the Blogspot B but didn't display my favicon. I went back to edit the html and added "http://" in front of the domain so the new code was:
"link href='http://myotherdomain.net/favicon.ico' rel='shortcut icon'/". Then it worked.

Jitzzzz said...

Thanx a lot for the valuable info.......

Tiana Lei said...

I wonder if Blogger no longer supports this? When I try, I get this error message:

A skin cannot contain the element: link. Only text and CDATA sections are accepted.

Any suggestions?

CLICK TO LEAVE A COMMENT..... :-)



Skip to top of post.

Search Blog Before Commenting

Loading...

Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,

Vin.

The Blog Doctor The Blog Doctor2 Blog Doctor Home

SUGGESTED READING

Tips On Blogger and Latest News.



Skip to top of post.