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.
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.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 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 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.
Hope you like this short and sweet tutorial!
Nice tutorial! Now if you could only help me in DECIDING on a favicon… (#):)
Check out Bush Mackel’s last blog post: The Intent – LSO (Part 2)
I’ve always wondered what those little images are called and how they’re created. Now i know! Thanks for the cute tutorial :)
Check out thecoffeesnob’s last blog post: Melbourne Food & Wine Festival ‘08: Celebrate the Bean.
I love favicons; they show up in bookmarks too sometimes. :) That’s why I have one. ;) (Say, Gee?)
Check out Grace’s last blog post: Being on Tech Support
great tutorial for the noobs! :) i personally use the favicon generator.
just to let you know, your blog is exceptionally slow today. it took me a few minutes to load the main page. no idea why. o.O
Check out Ivy’s last blog post: Checking Website Statistics
nice.. i had a favicon put in for my site a while ago, and i just love it!
Check out letti’s last blog post: Behold the Second Cattery..
Wow, I didn’t know there were favicon generators. I just did it the old skool way and made it on Photoshop, uploaded it via FTP and renamed it. Haha! =P But thanks for the plugs! They’re very helpful! =)
Check out Id’s last blog post: Silver Linings of the Coloured Kind.
Bush: Thank you! For your blog, maybe you would want to try using the word “BM” as your favicon, or even use that photo of you munching on a hotdog (is it?)! Heh.
thecoffeesnob: Thanks :) hope you find this tutorial useful!
Grace: Yep they show up in bookmarks and in tabbed browsers as well (Firefox, IE7.0 etc). It’s one simple way to different your blog from the rest of the bookmarks.
Ivy: I’ve tried to use easy terms this time (I even included the brief introduction about favicons at the start), since I have readers emailing me about me using a terms that are a little too technical. Whoops, haha! Anyway it took a long time for it to load in my browser too! I guess sooner or later I’ll switch to another host or something :evil: pffft.
letti: I see that you have a favicon of yourself :D niceeee!
Id: Same here! It’s only when Hendra asked me about favicons that made me google for generators. I did it the same way as you did – I downloaded the freeware which converts image files into icons. A little troublesome, but hey at least you don’t need an internet connection to do it :D
Great write-up on favicons! It is good to see more information on this topic, especially considering how useful they are for branding, name recognition, etc. I recently wrote an article covering just about everything you need to know about favicons. Hopefully it will further help your readers with their favicon projects. Cheers!
Check out Jeff Starr’s last blog post: An Easy Introduction to Web Feeds
Hey Jeff thanks for the link :) it’s way more informative than mine, heh. I’ll plug it after I edit this post. Oh and I’ve been to your site before, but I couldn’t remember when.
somehow you seem to always blog about things that i’m wondering about… or maybe i’m just too n00b..lol
Check out momo’s last blog post: Facebook App: Graffiti
Really? Thanks for the compliment :) actually favicon was quite a stranger to me only when I reaslied that it is called favicon – I wanted it badly for quite some time but didn’t know what is it called.
No you’re not a noob! Look at your blog – it’s gorgoues! :razz:
Your generosity is most humbling!
Thank you!
Aww don’t say that! It’s my pleasure to link :)
How can I make the favicon roll from up to down?