This is the seond post in my series about Favicons.In this article I explain how you can add an to your blog which is hosted on the Blogger platform, owned by Google.

Tabbed web browsers are becoming common. On screen a number of open tabs appear as a row of identical icons if those blogs are all on blogger.

If you have your own icon, you stand out from the crowd. See this screenshot below.

It is a small thing, but a small distinctive thing.

How to add a Favicon to Blogger

The difference

The procedure is as described in my last article, except for the one step. With blogger you cannot store your favicon picture file in the same place as your blog - you need your own webspace .

[Edit: I have created my own example at mattwardman.blogspot.com as an example. A couple of people have had problems with copying and pasting code from this page - quotation marks are being translated into ’smart quotes’. I have switched to single quotes, which are working for me. You may be better copying and pasting from the source code of the page on mattwardman.blogspot.com. ]

What to do

1 - Visit the Favicon from Pics website. Alternatively, you can make a favicon from text .

2 - Follow the steps there

• Select the file.
• Generate the icon.
• Preview the icon.
• Save the icon to your PC (Check that the file is small - less than 4k is best).

3 - Put the favicon.ico file on a filespace on the Internet you control. This could be your own webspace, space associated with a free account or hosted by a friend. If you have no space where you can put your icon, I have included a few for you to experiment with below .

4 - Add a line like this to the header of your web page template:

<link rel=’shortcut icon’ href= ‘http://www.mattwardman.com/host/blogger-off-favicon.ico’ type= ‘image/x-icon’/>

5 - Go and view your blog. The “blogger-off” icon (shown at the head of this article) should now appear in your browser address bar. You may need to do a “hard refresh” on the webpage to make sure you see the updated version - press <CTRL-F5> in most web browsers.

A Special Offer

If you do not have anywhere to store your favicon on the Internet, then I am offering to host an icon for you in return a mention for this article series and a link back.

Get in touch via my Contact Page if you would like to do this.

Some Useful Icons

These are the favicons for the main political parties. You can use these directly by substituting blogger-off-favicon.ico in the code above by the filename from the third column.

Party (links are to blogs)	Icon	Filename
Conservatives		tory-favicon.ico
Labour		labour-favicon.ico
Liberal Democrats		libdem-favicon.ico
SNP		snp-favicon.ico
UKIP		ukip-favicon.ico
Green Party		green-party-favicon.ico
Plaid Cymru		plaid-cyrmu-favicon.ico
Ulster Unionist Party		uup-favicon.ico
Blogger Off Campaign Party		blogger-off-favicon.ico

Note that you will be limited in the use you can make of these by party rules.

Parties not in the list - DUP, SDLP - do not have favicons as far as I can tell.

Interestingly, I couldn’t find any Trade Union websites with favicons - although there is one for the TUC.

Trades Union Congress

tuc-favicon.ico

Further Reference

• The W3C have a guide here.
• Shankar has some thoughts here.
• But watch your bandwidth - Scott Hanselman used 27Gb of bandwidth with his favicon
• Make a Favicon from Pics, or alternatively from text .
• Daily Blog Tips has a post about doing a Favicon using an image editing program.

Closing Out

I’ll be posting 2 more articles on this week:

• What to think about when you design your favicon.
• Tips and Tricks for favicons - some things you may not have thought about.

I hope you find this useful - it’s taken quite a lot of work. This is what they call a pillar article.

Let me know how you get on via the comments below.

Tags: Create a favicon, how do I make a favicon, favicon generator, favicon from pics, Add a Favicon to your Site pillar article, ulster unionist party, green party, labour party, conservative party, plaid cymru, united kingdom independence party, scottish national party, liberal democratic party, blogger off campaign, uup, ukip, snp, tuc, trade union congress, iain dale

[tags]Create a favicon, how do I make a favicon, favicon generator, favicon from pics, Add a Favicon to your Site pillar article, ulster unionist party, green party, labour party, conservative party, plaid cymru, united kingdom independence party, scottish national party, liberal democratic party, blogger off campaign, uup, ukip, snp, tuc, trade union congress, iain dale[/tags]