How to Create a Favicon For Your Website

A Favicon, also known as a Favorites icon, is a small icon representing a website that is commonly displayed next to the URL in a web browsers address bar and/or the browser tab.

Below you will see a screen shot from Firefox showing my latest Favicon which is the letter G. You can also see the Favicon for Engadget’s website in the next tab.

In the past I have used graphic editors to create my Favicons such as Adobe Photoshop. To create a Favicon you typically start with an image that is 16×16 pixels in size. You can also do 32×32 which will scale down. Once finished creating the image, you would save the icon with a .ICO file extension. There are many converters that can be found on the web to convert your graphic file to this format. There are also plugins for Photoshop that will let you directly save in this extension.

To create my most recent Favicon I stumbled across a great website http://favicon.cc/ that allows you to create your own on the fly and automatically download it. You are presented with a grid that is 16×16 pixels in size and you have various paint tools to create your Favicon.

After downloading the Favicon you can upload it to your web hosting provider. You will need to place the following code inside the HEAD tags of your webpage.

Here is an example:

<html>
<head>
<title>My Website</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
</head>
<body>
</body>
</html>

Be sure the href option has the correct file name and that you give it the proper path to the Favicon file. The example assumes that the file is located in the root directory.

Enjoy your new Favicon for your website!

About this entry

You’re currently reading “How to Create a Favicon For Your Website,” an entry on GregAshbaugh.com

Published:
10.22.08 / 11pm
Category:
Web Design & Code