Hello there. I am Terry and I am a full-time undergraduate based in Singapore. I take photos, write a blog and design websites.

And no, I'm not a teddy bear.


Hendra asked me something about generating your own favicons, so I’m thinking of sharing things I know about it :razz:

So what is a favicon?

According to the all-mighty Wikipedia, favicons is actually a short form of favourite icons, and…

[Favicon,] also known as a website icon, page icon or urlicon, is an icon associated with a particular website or webpage. A web designer can create such icons in several ways, and many recent web browsers can then make use of them. Browsers that support them may display them in the browser’s URL bar, next to the site’s name in lists of bookmarks, and next to the page’s title in a tabbed document interface.

Here’s how webpages with favicons look like in Internet Explorer 7.0. I know as a Firefox enthusiast I should take a screenshot with Firefox, but mine was too cluttered with bookmakrs (an evidence of being a not-so-IE-loving person, heh :smile: ) From left to right, my blog, Wikipedia and Flickr.

How favicon looks like in IE7.0

In the past browsers request for favicons by searching for the file favicon.ico in the webpage root directory (which was exploited by over-zealous webmasters who can’t wait to see who bookmarked their sites – bookmarks will need the browser to request favicons, which are logged by tracking programmes), thus increasing burden on the host. However, with so many improvements and advacements since the development of favicons, it is now possible for you to instruct the browser to load the favicon from elsewhere!

Make your own favicons!

A simple search of using the term favicons generator gaveme a handful of websites that provides favicon-generation services for free! That’s what Google’s for!

Important tip: Since favicons are square icons, it is high recommended that you upload a cropped image (of a square shape, that is) instead of allowing the generators to compress the image to fit the dimension.

1. Favicon.cc
Favicon.ccFavicon.cc allows you to personally modify your processed icons! What you’ll need to do is just upload an image and then later edit the generated 16*16 icon file pixel by pixel to your liking! And if you love to do things from scratch, you can skip the image upload step and directly paint the pixels over the create an icon file. And it comes with a preview too, cool! :cool:

One downside though – you can only create icons that are of 16*16 dimension. Nothing larger than that.

Tip – if you can’t find the download link, look at the center of the page, near the preview section. There’s a download link over there! I spent 10mins looking for it!

2. Favicon from Pics
Favicon from PicsFavicon from Pics allows you to create a favicon from a file of any resolution and size! You’ll just need to browse for it and then upload it. It’s even nice enough to create two different versions for you – one that is static (like the ones on most webpages) and another that is animated (scrolls upwards). It procudes icons of different sizes!

When you download your icon package, it comes in a zip file – you’ll have a 32*32 icon in it, plus an extra folder with a 16*16 animated and 16*16 static icon file (the animated one is in gif format, don’t worry – majority of the recent browsers recognise favicons in gif, and even png!)

If you want larger icons, this is it!

3. Favicon Generator
Favicon GeneratorFavicon Generator is simple to use upload an image, wait for it to convert the image to an icon file, and you’re ready to download! However, just like Favicon.cc, it only generates a 16*16 icon file and nothing else.

If you’re cool with small cute little icons, it’s the most convenient one around! It also gives you a preview if your nifty little icon! You can download it at the download link provided, which is directly below the preview of your icon.

How do I insert it?

All the favicon generators above is kind enough to tell you how to insert a favicon into your webpage. Well, if you want it to be XHTML valid (this term is meant to be understood by those cranky, perfectionist web designers like me, haha!), continue reading! If you don’t really care, you’re done for good, heh :wink:

What I did was loading the favicon.ico file into my root directory, and specified the browser to load that particular file by using this line of XHTML valid code:

<link href="http://www.teddy-o-ted.com/favicon.ico" rel="icon" type="image/x-icon" />

Since this code allows you to load favicons from elsewhere in your server, you can do this:

<link href="file-path-of-favicon.ico" rel="icon" type="image/x-icon" />

For example, if you’ve placed it in a folder called icons in your directory,

<link href="http://www.yourdomain.com/icons/favicon.ico" rel="icon" type="image/x-icon" />

After this, just insert the code anywhere between the <head> </head> tags! This is important! :twisted: if you don’t do that, the favicon will stubbornly not show up.

Jeff’s writeup

Jeff is very nice to leave a link in the comments that he has a writeup about favicons as well! After reading his, I think mine pales in comparison, heh :D if you find mine too simple and Wikipedia’s entry too complicated, you can read Jeff’s article – Everything You Ever Wanted to Know about Favicons.

Jeff’s favicon writeup

Hope you like this short and sweet tutorial!

Be Sociable, Share!

Burn after reading » Now you're done reading. What's next?


Related posts that might interest you:


Posts that are popular among visitors: