Make Your Site Unique by Adding a Fav Icon in Three Easy Steps
A "fav" icon or favorite icon (sometimes called a shortcut icon) is a simple way to associate an identifying icon with your website. If a visitor bookmarks your site they will see your icon in the Favorites menu, which creates excellent branding or recognition for your site.
Fav icons work with Microsoft® Internet Explorer v5.0 or later. They do not require any special web server scripting and the user is not required to download anything.
Create Your Icon
Using either your graphics software or special icon generating software, create three versions of your icon to accommodate the most common visitor configurations: (See: XP Style Icons - The Complete Creation Process)
Make sure you have saved your icon in a file named favicon.ico. Do not name your icon with any other filename or it will be ignored.
Upload Your Icon
Using an FTP program, connect to your website and put the favicon.ico file in the root folder of your HTML pages. This is the folder where your index.html or "homepage" file is stored.
Make certain that the filename "favicon.ico" is not changed during the upload process.
Associate Your Web Pages and Your Fav Icon
Simply by placing your favicon.ico file in root Internet Explorer will "see" and use the file. If, however, you wish to associate different icons with different pages of your site, name the other icons with a unique filename and insert the following code in the head of each individual web page:
‹HEAD›
‹LINK REL="SHORTCUT ICON" HREF="http://www.yourdomainname.com/youruniqueicon.ico"›
‹TITLE›Title of Your Page‹/TITLE›
‹/HEAD›
Want to go a step farther?
If you want to encourage your site visitors to add your site to their favorites, use the following code in your page to prompt them to bookmark your site:
‹SCRIPT›
‹!--
if ((navigator.appVersion.indexOf("MSIE") > 0)
(parseInt(navigator.appVersion) >= 4)) {
var sText = "‹U› ‹SPAN STYLE='color:blue;cursor:hand;'";
sText += "onclick='window.external.AddFavorite(location.href,";
sText += "document.title);'>Add this page to your favorites‹/SPAN›‹/U›";
document.write(sText); }
//--›
‹/SCRIPT›
Related Articles
Converting Icons from Raster Format to Vector Format
A "fav" icon or favorite icon (sometimes called a shortcut icon) is a simple way to associate an identifying icon with your website. If a visitor bookmarks your site they will see your icon in the Favorites menu, which creates excellent branding or recognition for your site.
Fav icons work with Microsoft® Internet Explorer v5.0 or later. They do not require any special web server scripting and the user is not required to download anything.
Create Your Icon
Using either your graphics software or special icon generating software, create three versions of your icon to accommodate the most common visitor configurations: (See: XP Style Icons - The Complete Creation Process)
- 16 x 16 pixels in 16 colors
- 16 x 16 pixels in 256 colors
- 16 x 16 pixels in RGBA/XP
Make sure you have saved your icon in a file named favicon.ico. Do not name your icon with any other filename or it will be ignored.
Upload Your Icon
Using an FTP program, connect to your website and put the favicon.ico file in the root folder of your HTML pages. This is the folder where your index.html or "homepage" file is stored.
Make certain that the filename "favicon.ico" is not changed during the upload process.
Associate Your Web Pages and Your Fav Icon
Simply by placing your favicon.ico file in root Internet Explorer will "see" and use the file. If, however, you wish to associate different icons with different pages of your site, name the other icons with a unique filename and insert the following code in the head of each individual web page:
‹HEAD›
‹LINK REL="SHORTCUT ICON" HREF="http://www.yourdomainname.com/youruniqueicon.ico"›
‹TITLE›Title of Your Page‹/TITLE›
‹/HEAD›
Want to go a step farther?
If you want to encourage your site visitors to add your site to their favorites, use the following code in your page to prompt them to bookmark your site:
‹SCRIPT›
‹!--
if ((navigator.appVersion.indexOf("MSIE") > 0)
(parseInt(navigator.appVersion) >= 4)) {
var sText = "‹U› ‹SPAN STYLE='color:blue;cursor:hand;'";
sText += "onclick='window.external.AddFavorite(location.href,";
sText += "document.title);'>Add this page to your favorites‹/SPAN›‹/U›";
document.write(sText); }
//--›
‹/SCRIPT›
Related Articles
Converting Icons from Raster Format to Vector Format
Network Database Icons
Accounting Software Icons
Email Application Icons
Navigation Icons
Web Icons
People and Objects
Conceptual Icons
E-commerce Icons
General Articles
Everything You Wanted to Know About Icons and Icon Designing
Using Alpha Channel to Blend Image on a Background Smoothly
Familiarize Yourself With these Basic Concepts in Icon Designing
Do it Yourself Tips
Add Fav Icon to Your Website in Three Easy Steps
Converting Icons from Raster to Vector Format
Design Tutorials
Learn how to Create an XP Style Button Icon
Using Icons
Which Icon Formats and Sizes Should You be Using?
