How to Create Your Own Favicon

create your own favicon - favorites iconA favicon is short for “favorites icon”. It’s also known as a website icon or urlicon. Most recent web browsers will display a favicon in the browser’s URL bar, next to the site’s name in lists of bookmarks, and next to the page’s title in a tabbed document interface. Some operating systems, like Windows, will also often use the favicon for Internet shortcuts to sites placed on the desktop or in other directories.

How to Create a “Favicon.ico” File

There are multiple ways to create a favicon. One method is via www.favicon.cc. I prefer a different method:

  1. Create an image 16X16 or 32X32 pixels in size. I find it easiest to take an existing image and resize it.
  2. Save the image as an ICO file (named “favicon.ico”, of course). If all you’ve got is MS Paint, that’s fine. You can save it as favicon.bmp and then rename it favicon.ico.
  3. Upload it to your website. Put the favicon in your root directory and the web browsers that support favicons will locate it eventually. You can also upload it into your images directory, but you will need to modify your web pages if you do.

Help the Browser Locate the favicon.ico file

If you have placed your favicon.ico file in a location other than the current web directory (relative to your web page) or the root directory, you have to help your visitors’ browser locate the favicon file by specifying it with a tag like the following in the <head> section of your web page.

<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon” />

You should replace “/favicon.ico” in the above example with the actual location of your favicon.ico file, for example, “/images/favicon.ico” if you have placed it in your “/images/” directory.

This step is optional if you have put your “favicon.ico” file in the standard locations, that is, in the same directory as the web page or in the root directory of your website. Otherwise you will need to modify all your existing web pages to take advantage of the “favicon.ico” facility.

Once you’ve got your favicon online, check your website to see if it appears. If you don’t see it you may need to delete the cache or temporary internet files on your browser.

While a favicon is not essential to your website it does add to the professionalism of your site.

Leave a Reply

Your email address will not be published. Required fields are marked *