Products » Education » How to Create a Favorites Icon

How to Create a Favorites Icon

Lily O'Halloran


Favorites icons provide a fun and interesting method of helping your website stand out from the myriad of websites in a customer’s Favorite’s list or Bookmarks. The Favorites icon, also known as a Favicon, is also displayed in the url bar beside a website’s domain name. Have you ever wondered how to create a Favicon for your website? Well, you have come to the right place! In this article, I will explain how to create a Favorites icon, and how to add the icon to your own website.


Create a Favorites Icon

A Favorites icon must be 16 pixels by 16 pixels to be compatible with most browsers. The standard size allotted for this icon is very tiny, so be sure to use the space as efficiently as possible. The icon must be created with a web-safe 16 color limited palette. You have two options for creating a Favorites icon. You can either use software that creates .ico image files -- there are freeware programs online, or you can use a graphics program to create a .gif image. If you create a .gif, you will need a separate application to convert the .gif into an .ico image file.

Start with a tiny box and zoom in, rather than starting with a large box and shrinking it down to the right size. A large design reduced to a small size will become choppy in appearance. Set the width to 16 pixels, and the height to 16 pixels. Decrease the color palette to 16 colors. Use your creativity to come up with a unique design for your icon. Keep the look, feel, and mood of your website in mind to create a design that complements your business. Save the file as an .ico, if possible. If not, then save the graphic as a .gif. After saving the .gif, you will need a separate program to convert the .gif to an .ico. There are numerous freeware programs online that you can use to accomplish this task.


Add the Favorites Icon

Name your icon favicon.ico, and upload the icon to the root directory on your server. Now, you will need to modify your html pages. Add the following line between you tags as follows:

<head>
<title>Your Title Here…</title>
<link rel=“icon” type=“image/ico” href=“http://yourbusinessname.com/favicon.ico” />
</head>

Try it out! If your Favicon does not show up immediately, try refreshing the page. If it still does not show up, then try clearing your cache – your browser may be pulling the page from your cache. Another trick you can use is to add a question mark after the url; this fools the browser into thinking that the page has not been cached. Some browsers do not display a Favicon until the website has been added to a user’s Favorites list.


A Few Notes

Although there are standards set by the World Wide Web Consortium (W3C), not all browsers adhere to these standards. Therefore, different techniques and formats are necessary for different browsers. For example, some browsers allow the use of 32 by 32 pixel images as well as 16 by 16. Some browsers also accept .png and .gif images in addition to .ico images. The W3C, at this time, actually prefers .png images. However, Internet Explorer does not accept .png or .gif images for Favicons. Play around with this technique and find what works well for your website. Adding a Favicon to a website aids in increasing individuality and professionalism.



Drop Ship Access is an excellent dropshipping source for brand name products at wholesale prices. You can learn more at DropShipAccess.com