How to Create a Favorite’s Icon
September 6, 2007 8:29 am HTMLHave you ever noticed that some web sites have a cute graphic next their address. When you save that web page to your favorites (or bookmark it), you’ll see the graphic in your list of favorites.
![]()
This graphic is called a “favorites icon” and it’s really easy to make (if you use Adobe Photoshop). But other graphics programs can use this technique too. It just requires installing a free plugin from Telegraphics.com.
I recommend downloading the free plugin from Telegraphics.com before starting.
Step 1 - Create the Graphic
Create a new blank image that is 16×16 pixels. Next create an image in this space. It can’t be too complicated because it’s such a small space to work in.And it’s best to stick with one or two colors max.
Step 2 - Save the newly created image in ICO format
(the free plugin lets you do this).
In most cases, you just have to click FILE on the menu and then SAVE AS - give the file a name and save it as a .ICO image.
Once the image is saved (and you’re happy with it), you have to upload it to your server (preferably in the root folder (same place you’ve saved your index.html page).
Next you have to edit your web pages so they display the favorite’s icon. You must be able to edit the HTML source code to do this.
Open your home page and view the HTML source code. You’ll want to insert the lines below before the </HEAD> tag.
<LINK REL=”SHORTCUT ICON” href=”http://www.yourweb.com/favicon.ico” type=”image/x-icon” />
LINK REL=”ICON” href=”http://www.yourweb.com/favicon.ico” type=”image/x-icon” />
Be sure to replace “yourweb.com” with your actual web page URL and “favicon” with the name of your image.
You’ll have to copy and paste these two lines of HTML into every web page you would like the icon to show up on.
But it’s worth it. Having a unique favorites icon helps make your web site stand out from the crowd - which makes it a lot easier for your loyal visitors to quickly identify your web page in their list of favorites.
For more information, on creating a favorite’s icon, visit: http://www.wilsonweb.com/design/favicon-shortcut-icon.htm


