Credits

Inspired by a tutorial in Photoshop User magazine.

Related Articles

TBD

Other Resources

TBD

 

Those Little Icon-y things and how to make them

Ever wondered where those little icons on the browser path line come from? They're called favorites icons, and if you have Photoshop, it's easy to roll your own.

Ever wonder about those little icons which always appear to the left of the URL on your browser window? These files are technically called "Favorites Icons," and live on the website as a file named favicon.ico stored in the same directory as the index page. Those of you who frequently look at your web server logs may have noticed failed requests for this file and wondered what it was.

The favorites icon is a 16x16 pixel file in Windows Icon (.ICO) format. First introduced in Internet Explorer as an icon for dragging and dropping bookmarks (favorites), these icons are now supported in just about every modern browser.

The .ICO format, however, is not a commonly-supported one in most graphics programs. Even the Swiss Army Knife of graphics programs, Photoshop, does not have built-in support for this format. There also doesn't appear to be an editor for .ICO files which comes with Windows. If you have Photoshop, however, there is a way to make the files.

Telegraphics makes a shareware (US$5 voluntary donation) Photoshop plug-in for opening or saving .ICO format files. It can be downloaded at: http://www.telegraphics.com.au/sw/

Once you've downloaded and unpacked the Photoshop Plug-in file, place it in the folder for File Formats inside the Plug-Ins folder for your version of Photoshop:

Photoshop CS (Mac):

/Applications/Adobe Photoshop CS/Plug-Ins/File Formats

Photoshop CS (Windows):

C://Program Files/Adobe Photoshop CS/Plug-Ins/File Formats

(If using other versions of Photoshop, place it in the plug-ins folder for that version instead.)

After copying the file into the folder, all you need to do is restart Photoshop, and you'll be able to open or save images in .ICO format. Typically you'll open your desired image, crop to a square image with the desired content, resize to 16x16 pixels using Image Size, and then Save As, with the format set to .ICO.

From there, you need only upload the image (which is only about 800 bytes in size) to your root folder, and the icon will be available. Note that some browsers may not show the icon immediately; some of them will require emptying the cache before the change is visible.

Other sites with tutorials on this subject:

http://www.photoshopsupport.com/ tutorials/jennifer/favicon.html

http://www.golivein24.com/tips/favicon/