That little pic for your blog... (favicons)

A Consuming Experience

Blogging, internet, software, mobile, telecomms, gadgets, technology, media and digital rights from the perspective of a consumer / user, including reviews, rants and random thoughts. Aimed at intelligent non-geeks, who are all too often unnecessarily disenfranchised by excessive use of tech jargon, this blog aims to be informative and practical without being patronising. With guides, tutorials, tips - and the occasional ever so slightly naughty observation.

That little pic for your blog... (favicons)

Monday, August 29, 2005

Add this post to Del.icio.us, Digg or Furl | Create Watchlist

[Edited generally 17 August 2006:] That little pic by the URL in your browser's address bar, which you see when you go to some Websites or blogs? (You'll also see the graphic on tabs if you use Opera or Firefox, or in your Favorites/Links/Bookmarks if you bookmark those sites or blogs).

It's called a favicon. Mine looks like this:

. If you want one to display whenever people visit or bookmark your blog or website, here's how to do it, as requested by DC. (But note that not all browsers can view favicons, although the latest versions of most should).

There are three steps: create the graphic; upload it somewhere that will take it; and edit your blog template or webpage HTML to include a special reference to it.

1. Creating the favicon

Creating the favicon has to be done in a particular way, if you want to get the best results, and it has to be saved as a file named favicon.ico. (Firefox will display it even if it's say a gif or jpg, but for maximum compatibility with all browsers, go the favicon.ico route. If only Internet Explorer would display favicons which weren't .ico files life would be much easier. Maybe with IE 7, who knows - I've not checked it out yet).

The hard way, DIY - you can use a special icon editor (like Iconomaker). It should ideally be a merged version of two separate files of 32x32 pixels and 16x16 pixels each (detailed explanations on how to do this are at December14 and Photomatt). Or alternatively, just create a 16x16 pixel one, that'll do fine though it's not as good. You could also use a free graphics program (like Irfanview) to edit a bigger pic down and save an ico file.

The easy way (which is what I did, to convert my Blogger avatar pic to a favicon), is by using the fab free service Chami - just make sure the pic you want to use is on your hard drive, then upload it to Chami as the source image, and it will do it all for you, include merging 32x32 pixel and 16x16 pixel versions and producing a Zip file you can just download and unzip. That site has lots of other helpful info about favicons too. (Remember, there may be copyright issues if you use an image created by someone else, so make sure you have permission to use whatever pic you choose).

2. Uploading your favicon

You need some webspace that will take favicon.ico files. Sadly Blogger won't, even via its newish picture posting service - it would be the best solution for Blogger users, I really don't know why they haven't allowed it yet.

Any picture hosting service that will accept ico files, or indeed your personal webspace via your ISP, will do. [Added 17 August 2006:] Unfortunately many of the free services won't accept ico files, or they don't let you hotlink to them. Recently I've been using Fileden, started by the guy who originally started Filelodge but sold it (Filelodge is now pretty useless as far as I'm concerned). You can only upload ico files if you register, which it's free - so far. Also, so far I've had no problems with the service, and they told me that files are kept forever and won't be deleted, for now at least, which is good as some services only keep your files if you keep logging in to them regularly, and if you forget once you're stuffed. Once you've uploaded your .ico file, you can check it and generate the URL ("Selected files actions"), pick the Direct URLs option for the code for the link to your file. . but I use YourUpload myself; it's free and it's easy. [Edited 30 August: sod's law, they change their site the day after I post about it!] You do have to register. Make sure you note down the link to the pic you've just uploaded. On Yourupload you can find the "Get code" link for easy copy/pasting of the link to your uploaded image.

3. Editing your template or webpage

Finally you just need to tweak your template or webpage. Between the <head> and </head> tags of your template or HTML code for your webpage, just insert this code:

<link rel="shortcut icon" href="http://URLtoyourfavicon/favicon.ico" type="image/x-icon"/>
<link rel="icon" href="http://URLtoyourfavicon/favicon.ico" type="image/x-icon"/>

but of course you should change "http://URLtoyourfavicon/favicon.ico" to the actual URL of your uploaded favicon file (like the link you copied from FileDen earlier, if you used that service). For example mine is "http://www.fileden.com/files/2006/8/3/153331/favicon.ico".

Then, publish your template or webpage and that's it. To test your shiny new favicon, you can use Chami's helpful favicon validator or just visit your blog using your browser of choice and have a look - remember to refresh your browser at your blog page if necessary (hold down Ctrl and hit F5). If you still can't see it in Internet Explorer you probably need to empty your cache (by deleting your Temporary Internet Files - but NB that will delete lots of other stuff too, so you could try just viewing those files, searching for all the favicon.ico files in there, and deleting just those).

For those interested, the "" is just to help you identify the code for the favicon within your template. And the reason you have two lines, one for "shortcut icon" and one for "icon", is again on account of Internet Explorer. You need the "icon" line so that your favicon will display in the Internet Explorer address bar, next to the URL of your blog or web page. You need the "shortcut icon" line so that, when someone adds the blog to their Favorites, they can see your favicon pic in their Favorites list or Links bar, in Internet Explorer - the "icon" line by itself isn't enough to make the favicon display in Internet Explorer Favorites or Links.

Technorati Tags: favicon, favicons, favicon.ico, blog, blogs, blogging, blog tools, blogging tools, browsers, Improbulus, A Consuming Experience, Consuming Experience

Add this post to Del.icio.us, Digg or Furl | Email this post to a friend | Edit | New

Links to this post on:

Icerocket -
Blogpulse
Bloglines
Delicious
Google Blog Search -

<$BlogBacklinkTitle$>: <$BlogBacklinkSnippet$>
posted by <$BlogBacklinkAuthor$> @ <$BlogBacklinkDateTime$>

Create link here by posting on Blogger

16 Comment(s):

I love favicons in my own IE6 linkbar. Problem is I don't have them too often since I'm cleaning up with Norton and it's not possible to protect the folder where they are kept (acc. to Norton support). Shame, isn't it?

(By ritzy, at Thursday, September 01, 2005 4:29:00 AM) Edit Comment

Well maybe you could change the folder where they are kept, to say a dedicated favicon folder? See e.g. http://personal-computer-tutor.com/abc2/v12/vic12.htm#favicon

(By Improbulus, at Thursday, September 01, 2005 9:03:00 AM) Edit Comment

he he... your magic is back, wizard! I could have googled this for years without getting anywhere. Hasn't implemented it yet but it sure seems straight forward.

As I have you on the line, I've noticed that many blogspotters have a problem with their sidebars, e.g. they're falling down, and only appears after the posts. In my experience that would be b/c of a picture that is too large (bloggers rezising isn't very good I think) or more commonly for me, the wmsyghij#$@ editor can't cope with three different font sizes in two colors and bold and italics and centered text in a blog post that also has - or not- an image.

-- That isn't a question, more a suggestion if you've already blogged everything on your mind today and want to use your wand for something else.

Many thanks -- also for letting me take up so much space here / ritzy

(By ritzy, at Saturday, September 03, 2005 2:31:00 PM) Edit Comment

Clicking on YourUpload opens this: http://server3.pxtek.com/suspended.page/ with the 404 error message "No such domain." I had been storing my favicon.icos at YourUpload for over two months with no problem, until a few days ago when the images disappeared.

(By Sereena X, at Wednesday, October 26, 2005 3:15:00 PM) Edit Comment

Thanks Sereena. Looks like that site has gone - I've not been able to access my own favicon for days now too. Will have to update my post. Meanwhile, I've not tried it yet but imgzhost allows upload of ico files.

(By Improbulus, at Sunday, October 30, 2005 12:06:00 AM) Edit Comment

YourUpload not allow ico file upload anymore. I use geocities, rename the file as favicon.zip then upload, after that rename it back to favicon.ico.

(By gazard, at Saturday, February 11, 2006 3:42:00 PM) Edit Comment

Thanks for that info gazard, I'll update my post shortly. And that's a neat workaround.

(By Improbulus, at Friday, February 17, 2006 10:09:00 PM) Edit Comment

Ripway is a free image storage site that allows favicon.ico files.

Thanks, improbulus! I now have an animated favicon at my blog.

-Cranky

(By The Cranky Insomniac, at Sunday, April 30, 2006 10:49:00 AM) Edit Comment

The Cranky Insomniac, glad it helped.

Only thing to watch with Ripway is that now you have to log in at least once a month or you'll lose your files.

(By Improbulus, at Thursday, May 04, 2006 8:37:00 AM) Edit Comment

I am thankful to google for having me bumping into your post.I was looking for ways to upload icon files and then use them in blogger
Tahnks to your post.. now i upload my icon at Ripway.
This is my test post.I ahve uploaded 2 iconfiles.small..&.. big( i just changd the size).I see a border around these icons.Can u help me as to how to remove the appearence of border.I used photshop to resize and irfanview to create icon
Thks again
Deepa
http://horizonwitinus.blogspot.com

(By Deepa, at Thursday, November 09, 2006 7:59:00 AM) Edit Comment

Your post had been extremely helpful.Thank you verymuch.I have mentioned this post here
Deepa

(By Deepa, at Friday, November 10, 2006 10:29:00 AM) Edit Comment

Thanks for your comments Deepa, glad it's been helpful. Hope you sorted out your border issue? Wouldn't be a problem as a favico in the browser, I would have thought, and in fact yours looks fine.