Read my article HTML5 apps as a learning tool
<Table of Contents>
Get Details on GreenGeeks Secure Hosting Learn HTML5 Today!
- Bob's HTML Course - Take HTML5 Lessons - Twitter - Dave's Blog - Learn on your iPad
Web Hosting HTML Tutorial CSS Tutorial Web Design Tutorial Hosting under

HTML Code: Favorite Icons, The Favorites Icon

FatCow Web Hosting. Free Trial , Free Setup, Free Support -- All risk free!

HTML Tutorial Chapters:  

iPage Hosting $95 Plan on sale today for $1.89/mo
Click Here for More Details!

FatCow Plan for $3.15/mo. only

Get Web Design Basics for iPad

Web Design Basics

I have a new iPad Course: Web Design Basics.   Download your copy now from AppStore.
Web Design Basics covers both HTML and CSS together in one interactive guide.   Get it Now!

Setting Up a Favorites Icon (favorite.ico)

Favorites Icons (favicon.ico) -- Adding a Favorites Icon to your Web Site with HTML

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.

snapshot of Favorite's 

Look at the top of your browser near the Back button and WWW address to see the Favorites Icon.

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.)

Learn about software apps used to create icons and graphics.

How do I set up a favorite icon?

50% off hosting plans from GoDaddy!

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).

Don't have a favicon.ico file yet? Learn how to make one.

Read my detailed walk-through guide: making a graphic into a Favorites Icon

Loading The Icon for The Entire Web Site (no coding)

iPage Affordable Web Hosting only $4.50/mo
Get a Free Domain Name for your Web Site with iPage Hosting. Get Details.

Upload the image (favicon.ico) with FTP (read our FTP tutorial) to the root section of your web site. The root section is the main file area, where you would store the index.html (index.asp, index.php, etc) file for your main page. would be the root would not be the root isn't root either

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

Loading Extra Icons for Specific Folders and Pages

You can add customized links for sub-folders by using this code in the <head> section of your web page coding:
iPage Affordable Web Hosting only $4.50/mo


Example: We place a new favicon.ico in ... then link to it with:

Get 250 premium quality, color business cards FREE! Order today! Click here.


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! :)

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

continued... >

Copyright © Dave Kristula. All rights reserved.