How to Create a Favicon and Upload It

Home >> Website Additions >> Creating a Favicon Icon

A favicon (pronounced fav-eye-con) is a small, 16x16 pixel icon that appears next to a website URL in the address bar. It is also displayed next to the site name when the URL is added to your "Favorites". Some people refer to them as a "bookmark" or "favorite" icons.

The easiest way to create one is to use Photoshop, but if you do not have that program, below you'll find links to websites that offer free favicon generators.

Using Photoshop to Create a Favicon

First you'll need to download the ICO plug-in for Photoshop. This allows you to save the image in the .ico format. You can get it for free here.

Once you've downloaded the plug-in, copy the ICOFORMAT file into the Photoshop directory. It should be saved inside the "File Format" folder which is a sub directory of the "Plug In" folder. (Photoshop is usually saved in c:\Program Files\ Adobe\Photoshop....)

Once that is done close Photoshop and re-open it. When you click "File", "Save As" you should now see .ICO as one of the file formats.

Designing Your Favicon in Photoshop

1) Open a new canvas with the "File", "New" menu command. I would make the canvas about 100x100 pixels so you can see what you're working with. You will resize it down to 16x16 after you're done.

icon at 100x100

icon at 16x16

Just remember to keep the canvas equal in width and height because you are going to have to size it down at the end. If you don't, your icon will be out of proportion.

2) When creating your favicon, make sure you keep it simple. If you try to get too detailed, you won't be able to make it out in the 16x16 format. Two colors with one shape like the example above works well.

Hint: Use the Custom Shape tool and choose one of the many icons that are available in Photoshop. That's where the butterfly came from in the above example.

3) When you're happy with your creation, click Image --> Image Size from the Photoshop menu. Now change the width and height to 16.

Photoshop CS users will see a "Resample Size" option in this menu. Be sure to select "Bicubic Sharper". This will help keep the icon sharp upon resizing.

4) Once you are satisfied with the look of the favicon, "Save As" and be sure to change the file format in Photoshop to ICO and save the file as favicon.ico. Do not name it anything else but this.

Uploading Your Favicon

Now save the favicon to your website's root directory (the same place as your index.html or index.php if you use WordPress). DO NOT save it inside a sub folder (images, etc.)

If you use WordPress, the favicon can either be saved at the root or in the images of the theme folder.

So the path would be...

/wp-content/themes/[themeFolder/ or
/wp-content/themes/[themeFolder]/images

If you need help with uploading the favicon, I have a tutorial on FTP here.

Some WordPress themes will allow you to upload the favicon right from the admin panel so check there first.

Browser Support

Be sure to clear your cache in all browsers before checking to see if the favicon shows up. In IE6, the icon will not appear until you add your website to your favorites.

To ensure your favicon is displayed in most recent browsers, add the following lines of code inside the <head> of your pages.

For XHTML, the link element must be empty (terminated by /> )

Favicon Generators

If you don't have Photoshop then you can find a site that has a favicon generator. Of course you lose some creative control this way, but some of them can get the job done pretty well.

If you liked this, please share. Thanks!