|
|
home > graphic
design > creating an IE favorites icon
creating an favorites icon
This tutorial focuses on creating and adding
a favorites icon to your web pages when a visitor adds your
site (or "bookmarks") to their favorites using Microsoft
Internet Explorer versions 5 and above, Mozilla and Opera.
The icon will display next to the link in the user's Favorites
and also to the left of the url in the browser's address bar
(see below). If a visitor bookmarks your page, Internet Explorer
will automatically look for a favorites icon in the root directory
of your web site with the default name favicon.ico. If this
is found, it will be displayed instead of the default IE one.
You can also create different icons for different pages, or
sections, of your site.
step 1 - creating the image
- Using your favorite graphics
software, create a 16x16 pixel image depicting your
icon
- Most web sites use a smaller version of their logo
or similar
- The main consideration is to keep your icon simple and
clear at such a small size
- It is also often important to use as few colors as possible
- Most browser interfaces (the top tool bar containing
the browser buttons) can display 256 colors, but it's
best to use the Windows 16 colors
- Save this image as favicon.bmp
- It is important to save as .bmp format as some icon
editors won't open .gif format graphics
Step 2 - creating the icon
- Open up your icon editor and browse for
your saved .bmp
- When you open your .bmp to create an icon from it, make
sure that you are using no more than 256 colors (IconForge
gives you the option to choose how many colors) and preferably
the Windows 16 colors
- If necessary, edit the image
- Save the image as an icon
- Make sure it is called favicon.ico and now
has the file extension .ico
Step 3 - including the icon in your web pages
- Publish the icon into the root directory
of your web site
- This is where Internet Explorer will automatically look
for it when a visitor bookmarks your site
- Help the browser find your icon by including in
the html, somewhere between the <head> and </head>
tags, the following: <link rel="shortcut icon"
href="http://www.your-web-site-name.com/favicon.ico">
- Preferably nearer the closing </head> tag, because
more important information, such as your meta
tags, should come earlier
- Save your web page and publish it
- If you want to create different icons for different
pages, simply call them something other than favicon.ico,
but still retaining the .ico suffix
- Link to them in your pages in the same way as above,
just changing the href location for the different
icons
step 4 - testing your icon
- Open Internet Explorer (version 5 or above) and
bookmark your page
- Determine if your icon stands out from other bookmarked
web sites with favorites icons
- If necessary, re-edit your icon and publish
it again
- However, you will need to remove the bookmark
(Favorites > Organize Favorites, select your bookmark
and click "Delete") and delete your temporary
Internet files and page history (Tools > Internet
Options, tab "General" and click "Delete
Files" under "Temporary Internet Files"
and click "Clear History" under "History").
- This may take a few minutes if you haven't done
this recently
- Close your browser and re-open it , bookmark
your page again to check the new version of your icon
- Repeat until you're satisfied your icon is suitably
eye-catching
more information
http://www.favicon.com/
|
navigation