Designing a Favicon for your web site


A “favicon” is that neat little icon just to left of your address bar or bookmarks and is referred to as a page icon. These favicons are associated with a particular website and can be customized to any desire so long as fits the 16×16-pixel ratio. Most modern browsers like Firefox, Internet Explorer 7 and Opera support favicons and are often used as a logo display on the micro scale.

designing-a-favicon IE Favicon

Originally, when using Firefox the favicons were just for bookmarks, which were generated from a favicon.ico file placed in the root directory of your server. However, as technology advanced and open source browsers became more widespread the use of the favicon was made more flexible using XHTML.

Opera FaviconFavicons

Creating Your Favicon

Step 1: Using your favorite editor (Photoshop, Fireworks) create a new canvas. Because of the small size of the favicon, it’s best to use a larger pixel size like 32×32 or 64×64. Then create your graphic, make sure to keep in mind how small your product is going to be; try to keep it simple and use few colors.

Step 2: Re-size your file image back down to 16×16. In Adobe Photoshop this can done by selecting Image > Image Size then entering 16 in the height and width boxes. In addition, save your image to a convenient place.

Step 3: Convert your file to .ico, this can be achieved a couple of ways. First, if you use Adobe Photoshop download the ICO plug-in from Telegraphics.com. Once installed all you need to do is select Save As > then Format and save it as .ICO. Alternatively, if you do not use Photoshop you can use web based converters like ConvertIcon, IrfanView and IconEdit 32 or you can use a favicon generator. There are also free software downloads for converting a .PNG to .ICO like ICOFix and FAVIcon.

Step 4: Now you are almost done. Find the .ico file on your computer and upload the image to your web server. Save it, somewhere you can find easily preferably the root directory, with a simple filename like favicon.ico.

Step 5: The final step is to insert the code into your HTML and you are done. Find the head tags and between them, insert this code. Link text
(Make sure your href is modified to wherever your favicon is saved)

One Response

  1. » Branding your Feeds | Utah Web Design Says:

    […] But does all this easily accessed information help you? What happens to branding, image and PR when information is syndicated without your oversight? Most aggregators do not display logos or favicons leaving fans disconnected with the information they are receiving. Simply inserting more self promotional content won’t work because readers will stray from your blogs and Podcasts if they do not gain enough from them. The solution is to add some script which will allow readers to pull your favicon along with the feed. And although many feeders do not support this, eventually they will all follow suite. Itunes is the pioneer of this technology and you can see how great it looks below. […]

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.