Favicons and Shortcut Icons

Question
A thread in the General forum made me think about favicons and icons. It's something you don't see discussed too much because you only have to do it once for a website, and it's not a necessity.

I like favicons/desktop icons because:
  • they add polish to your site
  • they help "brand" your site
  • they can make you stand out--especially with a catchy desktop icon that reminds your viewer they saved that shortcut for a reason.
A favicon is that graphic that shows to the left of the URL in the address bar of your web browser. An icon is that picture that represents a file, program, or shortcut on your computer.

A great example of incorporating a favicon/icon in your marketing strategy is MSN's butterfly. It appears on their website, in their ads, and in the web browser. When you see the butterfly in your Favorites list, you know what it is. When you're looking for it on your desktop, it's not hard to find.

If you want to see what an company-specific favicon/icon looks like, go to Google or MSN. The favicon shows in the Address bar next to the URL. Now, right-click on the page and choose "Create Shortcut". See what the icon added to your desktop looks like?

Making your own
An .ico file can contain several different images in varying sizes. The program using the .ico file chooses the correct sized image to display. For example, if you create an .ico file with both a 16x16 image and a 32x32 image, then IE will display the 16x16 image in the Address bar. If you save the page as a shortcut to your desktop, Windows will display the 32x32 image. (Please NOTE: If you only make a 16x16 image, then that will be s-t-r-e-t-c-h-e-d to 32x32 on a desktop shortcut and that's just UGLY!) Each is a completely different image, just stored in the same .ico file. Although most people use the same image for both graphics, you can use compelety different images if you like.

Tools and resources
Here's a how-to article from MSDN: http://msdn.microsoft.com/library/de...ortcutIcon.asp
Pay particular attention to the method of linking inside a web page. Although IE will pick up the favicon from the root directory, other browsers, like Mozilla, will not. For those browsers to see the favicon, you must link it in the web page.

A free icon editor:
http://www.bouffler.freeserve.co.uk/icon_edit.htm
I like this one, although it will frustrate you at first. The help is nonexistant, and the buttons have no descriptions on them. After about 5 minutes, though, you can see what's what. Other than that, the functionality is better than most other free programs.

Basic steps
  1. Decide what image you want to use. You can take a part of your website logo, or something you want to associate with your website, or start with a text letter.
  2. Next, either import the image to the icon editor, or open the icon editor and draw your own image. If you import an image, you need to start with something tiny, so use a graphics program to shrink it first to something close to 32x32.
  3. After you are satisfied with your edited graphic, use the icon editor to copy it to 16x16. You'll notice that you lose a lot of detail, so you will need to edit the smaller image again.
  4. If you are using the icon editor linked above, a list of all the images stored in the .ico file are shown on the left side. Make sure you have a 32x32 and a 16x16 and they both look the way you want them.
  5. Now save the file. Upload to your website. Add the link to your pages.
  6. Go look at your beautiful, creative new marketing tool.


Answer
OK, it took me about 30 minutes to write that all out. I'm sure I've missed a few things, so if you have questions, ASK!

Answer
"Add the link to your pages"
Where do we add the link? An example perhaps?

Answer
Example:
HTML Code: <HEAD> <LINK REL="SHORTCUT ICON" HREF="http://www.mydomain.com/myicon.ico"> <TITLE>My Title</TITLE></HEAD> from http://msdn.microsoft.com/library/de...ortcutIcon.asp

Answer
Gracious! :-)
or...
GRACIAS!
Take your pick
© 2007 www.aqcollection.com | Contact us |