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 S. 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).
z-vet said…
Have you heard about IconJ.com? It's a free service for favicon-addicted people and it works with Blogger. Very nice one imho.
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
ZarraWolf said…
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

Stats Components Are Significant, In Their Own Context

One popular Stats related accessory, which displays pageview information to the public, is the "Popular Posts" gadget.

Popular Posts identifies from 1 to 10 of the most popular posts in the blog, by comparing Stats pageview counts. Optional parts of the display of each post are a snippet of text, and an ever popular thumbnail photo.

Like many Stats features, blog owners have found imaginative uses for "Popular Posts" - and overlook the limitations of the gadget. Both the dynamic nature of Stats, and the timing of the various pageview count recalculations, create confusion, when Popular Posts is examined.

Free Domain Registration By "UNONIC" Is Fraudulent

Blogger blog owners, like everybody else, like to save money.

Some blog owners prefer to save money when registering a custom domain, for their blogs. We've seen several free domain registration services, providing what is claimed to be a two level Top Level Domain "co.xx" (where "xx" == various country codes).

The latest in this ongoing story appears to be "net.tf" - and 13 other "top level domains".There is also an additional free service offering third-level .tf domains, under the name United Names Organisation. They occupy 14 second-level domains, including .eu.tf, .us.tf, .net.tf, and .edu.tf. They are run by the same company as smartdots.com, and are given away as URL redirections.