davesite.com / webstation / html tutorial

HTML Tutorial Chapters:


HTML Tutorial
Setting Up a Favorite Icon (favorite.ico)





...
Favorite Icons (favicon.ico)

Hopefully if you found this page you already know what a Favorites Icon is. In modern web browsers, when you visit a web site (and add it to your Favorites/Bookmarks) it will load a specific small icon set by the webmaster.

The Favorites Icon will show up next to the URL (the http:// web address) in your web browser near the top of the window (close to the Foward and Back buttons).

(Some older versions of Internet Explorer don't add the icon until you add it to Favorites, just FYI.)

snapshot of Favorite's Icon

How do I set up a favorite icon?
This chapter is a section of the multi-chapter HTML tutorial, HTML: An Interactive Tutorial for Beginners.

Other web site development sections you will find interesting as a web developer are the CSS tutorial, CSS: An Interactive Tutorial for Beginners and the web design tutorial, Dave's Web Site Design Guide: Tips and Tutorials.

Update: You can now download a plug-in for Photoshop, Photoshop Elements, or Paint Shop Pro to make your ICO file here.

Create a 16 pixel wide by 16 pixel high favicon.bmp file in a Program like MS-Paint, Adobe Photoshop, or Jasc's Paint Shop Pro, then use a program (such as the free IrFanView app [for Windows]) to reduce the colors to 16 colors [Image -> Decrease Color Depth], and then 'save as...' to a Windows Icon Format (favicon.ico).

Read my detailed walk-through guide: making a graphic into a Favorite's Icon

Upload the image (favicon.ico) with FTP to the root section of your web site. The root section is the main file area, where you would store the index.shtml file for your main page ( http://www.davesite.com/ would be the root, http://www.davesite.com/webstation/ would not be root).

This file, placed properly, will load as the default for your entire domain.

You can add customized links for sub-folders by using this code in the <head> section of your web page coding:

<link REL="SHORTCUT ICON" HREF="http://yoursitedotcom.here/yourdir/favicon.ico">

Example: We place a new favicon.ico in http://www.davesite.com/webstation/html/ ... then link to it with:

<link REL="SHORTCUT ICON" HREF="http://www.davesite.com/webstation/html/favicon.ico">

The pages with the Favorite code load our special icon, everything else on the site loads our ROOT Favorite Icon.

Reload the page... and try adding it to your favorites or bookmarks. (In Internet Explorer you may need to clear your cache/temporary files and Restart the browser.) Once you've added it to the favorites, close the browser and then open it again, and return to the site? Does it show up now? It should! :)

Return to Dave's HTML Tutorial and HTML Code Guide