Quick Tutorial on authoring Favicon for the web. I believe it customary to do this in question form, “I’m why not just the point”, getting back on track:
What’s a Favicon?
This is the technical part so I’ll let Wikipedia explain: a favicon (favorites icon), also known as a website icon, shortcut icon, url icon, or bookmark icon is a 16×16 pixel square icon associated with a particular website or webpage. A web designer can create such an icon and install it into a website and most up-to-date web browsers display it. Browsers that typically display a page’s favicon in the browser’s URL bar, (or adress bar) and next to the page’s name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page’s favicon next to the page’s title. – wiki
How does it work?
First you have to have a icon (.ico) which for you window users that have played around with the shortcut and executable files’ preferences then you’ll recognize the file name. After the file is create (that’s explained further down) it needs to be placed in the root directory of the website. *Side Note: favicons are images meant for the internet and not for local use meaning don’t freak out when your add a favicon not see it right-a-way* To link your icon to the web page you need a link tag (simple huh?). Here’s the tag <link rel="shortcut icon" href="/favicon.ico">. The rel tells the browser what are you linking with out it this won’t work. href lets the browser know where the image is, with this yes you can put the icon in an images folder but that slows down or even prevent the end user’s computer from auto cache the icons. Meaning even if you only put the link tag in the index (Linux) or default (Windows) you’ll find that the icon will filter down through the other pages and show up on the rest of the pages. Also the file must be called favicon in order to work.
How to create the .ico extension?
Two easy ways: first is for Photoshop users only, second is everyone else.
Photoshop users:
- You can create an icon with Photoshop but you’ll need a plugin (http://www.telegraphics.com.au/sw/); add the plug-in to the (Adobe Photoshop CS(2,3,4) > Plug-Ins > FileFormat folder)
- Take your logo, initials, or whatever and fit it into a square of any size for now.
- Once your image is in place go up to the image menu and choose image size (cmd+opt+i or crt+alt+i) making sure the measure is set to pixels change the width and height to 16.
- If the plug-in is loaded then all you need to do is a save-as (cmd+shft+s or ctrl+shft+a) and select “Windows Icon (ICO).”
Everyone else:
- Create the icon in your graphical interface of choice
- If your going to use transparent save a gif if not use a gif. The reason is gif’s only have 256 colors and a 16 pixel by 16 pixel grid is 256 pixels total
- Go to “http://tools.dynamicdrive.com/favicon/
- Follow the on screen insturctions, click create icon, and click download favion