Skip to main content

Setting Up A Favicon For Your Blog

Once you get a well known blog established, one often overlooked, yet simple task is adding a favicon for the blog.
  1. Design a logo that's recognisable in a 16 px x 16px size image.
  2. Create two logo files, one a .ico, the other a .png. You can use IrfanView, or another free graphics tool, to do this. For discussion about the two files, see WikiPedia: Favicon.
  3. Upload the logo files to an image hosting server. You may find the free hosting service offered by IconJ to be useful.
  4. Add the favicon definition into the blog HTML. Your blog has a default favicon (the white on orange "B"), and you'll have to override that..

The first step is the most difficult - and is mainly why I took a long time, in setting up an icon, for this blog.

Once you create the image files, just use the Blogger "Favicon" wizard, on the dashboard "Layout" page.

Here's what you probably have, right now:


<head>

...

<link href='http://www.blogger.com/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/> <<== Default favicon - provided by Blogger (and built in to the template)


Here's what you need:

<head>

...

<link href='http://www.blogger.com/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/> <<== Default favicon - provided by Blogger (and built in to the template)
...

]]></b:skin>

<link href='http://www.yourhost.com ... /favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/> <<== Your custom favicon .ico file, Microsoft Browser compatible
<link href='http://www.yourhost.com ... /favicon.png' rel='icon' type='image/png'/> <<== Your custom favicon .png file, for non Microsoft browsers
</head>


Add the two "link" records at the end of the template header, immediately preceding the "</head>" record. It is important to add them after the "</b:skin>" entry.

Comments

Chris said…
My question is: What service do you use for hosting the icon? Picasa doeson't work because they don't allow .ico files. I had to go with a website hosting service to upload the file. .png files work, but of course, are not looked for by all browsers (old IE).
Marf said…
What purpose does the .png serve? Is it for additional support for browsers that don't support .ico files? I didn't know there we any, except for text-only browsers like Lynx, but those wouldn't support a .png anyway.

I was under the impression that all you needed was the favicon.ico
Thank you! I finally got my favicon to work on blogger, after hours of searching the web.
mynameiskate said…
Works, thank you!
I was putting the code right below the HEAD element. It made all the difference to add it just before the HEAD element closes.

Thanks!!
Jennifer said…
I'm still confused as to where you actually put the code in. :O
thx dude. now my blog have ico . host by iconj.com . follow the intruction . sure u can fix it . come see my blog . www.datofrankenseyy.blogspot.com

Popular posts from this blog

Embedded Comments And Main Page View

The option to display comments, embedded below the post, was made a blog option relatively recently. This was a long requested feature - and many bloggers added it to their blogs, as soon as the option was presented to us. Some blog owners like this feature so much, that they request it to be visible when the blog is opened, in main page view. I would like all comments, and the comment form, to be shown underneath the relevant post, automatically, for everyone to read without clicking on the number of comments link. And this is not how embedded comments work.

What's The URL Of My Blog?

We see the plea for help, periodically I need the URL of my blog, so I can give it to my friends. Help! Who's buried in Grant's Tomb, after all? No Chuck, be polite. OK, OK. The title of this blog is "The Real Blogger Status", and the title of this post is "What's The URL Of My Blog?".

With Following, Anonymous Followers Can't Be Blocked

As people become used to Blogger Following as just another tool to connect people, they start to think about the implications . And we see questions like How do I block someone who's been following my blog secretly? I couldn't see her in my Followers list (hence I couldn't use the "Block this user" link), but I have looked at her profile and could see that she's Following my blog. Following, when you look at the bottom line, is no more than a feed subscription and an icon (possibly) displayed on your blog, and linking back to the profile of the Follower in question. If someone Follows your blog anonymously, all that they get is a subscription to the blog feed. If you publish a feed from your blog, and if the feed is open to anybody (which, right now, is the case ), then it's open to everybody. If someone wants to use Following to subscribe to the feed, you can't stop this. You can't block it before, or after, the fact. You can't Block w