Trickin' out the Address Bar
You may not have ever heard of them, but we're pretty sure you've seen them. We're talking about Favicons!
You all probably just went "Huh?!" and that's okay. The Favicon is short for Favorites Icon and it's the little icon that appears in your browser's address bar, usually to the left of the website address you're looking at.
That's all well and good, but it's not very personal. Since that little globe is the stock icon for almost every website out there, you're gonna want something a little more "you". (We certainly did.)
And the best thing is, they're super-duper easy to create! (Don't tell our competition, k?)
1. First you need some image-editing software. If you're not familiar with Photoshop, you can get
IconForge (PC) or
FastIcns (Mac). FastIcns is free, but IconForge has a trial version (somewhere).
2. Using your image-editing software, create a workspace of 64 x 64 pixels. (Or 8 x 8, 16 x 16, 32 x 32, or 128 x 128. This is because your favicon should be set to multiples of 8 pixels, because browsers will reduce the size uniformly to fit in their particular address bars.)
3. Create away! You want a skull? Draw a skull. You want an "X"? Draw an "X". We'd say go nuts, but there's really only so much you can do with a workspace of 64 x 64 pixels.
4. IconForge and FastIcns will allow you to export the icon as an .ico file, but Photoshop won't. If you're using Photoshop, use this workaround: Once your file is looking how you want it, select "Save for Web" (under the "File" menu). In the "Save for Web" window, set the file's format to GIF. Once you've saved it, locate your file on your computer, select it and rename it to "favicon.ico".
5. The naming of your file is essential! The favicon's name must be "favicon.ico" for your web server to recognize it.
6. Using an FTP client, upload the file to your server. The favicon should be placed in the same directory that your index page is.
And that's it! No extra coding, no HTML wizardry. Most servers nowadays are automatically set up to recognize the favicon, and if yours doesn't automatically show up, contacting your ISP and asking them to allow favicons should take care of it.
Consider your website officially (somewhat) tricked out!
Note: If you can't see any favicons other than your browser's stock icon (usually a little globe or "@" symbol), then you're probably using Internet Explorer. To which we must ask: WHY?!?! Do yourself a favor and get Firefox or Opera. They're more secure, W3C-compliant (which we'll explain in a future Design 101) and just all-around better.