Have you visited a website and seen it change the default browser's icon in the top left hand corner and on the URL address line? Or maybe you've seen a custom icon in your RSS reader?
If you visit Microsoft's ASP.net website, you'll see a special, customized icon in the top left hand corner. That image is called a favicon.
If you goto the Ottawa Business Journal's website, you'll see the regular and default webpage icon (mine is IE cause, well, I'm using IE! :>).
If you save your websites to your Favourites/Bookmarks, you will also see the special/customized favicons are displayed there too.
Very cool eh?! I think so! :> But how do they do that? There's two ways, one is really easy, and another way which is a bit more complicated (not by much though) and gives you some flexibility.
But before we get to setting up your website, we need to create a favicon image. What is that? You can't just whip out MSPaint to create one of these things, sorry. You'll need to be able to create an icon file, a special image file format and create an icon image that's either 16X16 (as in Wikipedia's favicon) or 32X32 (like Microsoft favicon).
If you don't have an icon editor/creator, then you'll need to go find one at this point. The .ico file format accomodates multiple sizes in the one file, therefore you're able to create one favicon.ico file with just one of the sizes listed above or you can put both in there, what ever you fancy. Your browser will try to use the best quality image it finds in the ico file that it can display based on it's own capabilities (think of a phone/device, it may not be as "capable" as your $350 gaming video card with 2mill megaflops and 300 GHz and refre.....yes, I'm getting silly, it's getting late, cut me some slack :>).
The Easy Way
Now that you've created your icon file, now what? Well, first let's rename it to "favicon.ico" then you can drop it into the root of your website. That's it, your favicon is now "deployed!" Easy eh? Try it out, goto your website, you might have to hit CTRL+F5 to absolutely refresh the webpage and force the browser to reget all the files (which should force IE to recheck for the favicon.ico file).
But how does that work?! Well, check out Microsoft's root website, then check out this url, http://www.microsoft.com/favicon.ico. From clicking on the second link, the one with the favicon, you'll see something like this.
Your browser (IE has to be greater than IE 5, not sure about Firefox or Mozilla or Opera versions, sorry) will automagically look for that file (http://www.WebSiteName.com/favicon.ico) after it loads up a webpage. If it finds one, the browser thinks GREAT, let's pull it down and increase the "user's experience for our website!" If it's not there (as in the first website listed above), it displays a default IE icon. Check out the source for the root page for MS, no favicon.ico reference at all. But it still works, the favicon is still displayed cause it's in the root of the website (and of coure the security is such that the webserver can access the file and serve it out).
That's the easy way to "deploy" your favicon file. But what happens if you don't want to call it "favicon.ico?" What if you don't want to have it displayed on ALL the webpages on your website? Maybe you have one web server but you have multiples web apps hanging off of it and you don't want to have one favicon.ico displayed for every different website? Well, you'll just have to continue reading then won't you?! :>
The More Complicated Way (but gives you a bit of flexibility)
Ok, so you have your favicon, but you DON'T want to put it in the root of your website. Why not? hhmm, maybe it's not your website? Maybe you don't have security access, or maybe your not part of the privileged few? Ok, more seriously, maybe your corporate development standards dictate you to put all "image resources" into a dedicated resources/images/ico directory? If that's the case, cool, you just need to modify the webpages you want to show the favicon on with a little bit of html. If this scares you, not to worry, it's easy to cut'n'paste and change what you! :> LOL
Take a look at the source html of the www.asp.net webpage.
Notice the
tag in the within the tag in html. The syntax is vital for this to work and it has to be in the tag of your html. There are two forms of this syntax, namely:
- <LINK REL="SHORTCUT ICON" HREF="mypage.ico">
- <LINK REL="SHORTCUT ICON" HREF="http://www.mysite.com/graphics/icons/mypage.ico">
The first one is using a different icon filename than favicon.ico and the second one isn't even referencing a favicon on your own site but using someone else's.
Once you get this right and you point it to your favicon icon file, you're golden! This way gives you four advantages
- lets you use any icon filename you want
- lets you put the icon file anywhere on your webserver you please, but the webserver has to be able to see it and have security access to serve it out to your viewers, so test this out
- you can pick and choose which pages will display your icon
- and lastly, since this
tag has to go onto your webpages, you can have multiple favicons on your site and on your webpages, cool eh?!
Now that you've read a bit about creating and deploying your favicon, I hope you set one up on your website. Drop me a line and let me know the url so I can go check it out!
References:
Web Developer's Journal: Creating Your Own Favicon.ico Icon For IE5
Favicons FAQs
velvet blues: How To Make A Favorites Icon (Favicon.ico)