Creating Your Own Shortcut Icon

Have you seen those colorful little pictures in the address bar of your browser, to the left of the web site’s URL? These pictures are called shortcut icons, and they also appear next to web site names in favorite and bookmark listings and make those web sites easily recognizable. Your web site can stand out from the crowd too, and with a minimum of effort, because the process of creating a shortcut icon is surprisingly simple.

The first step is to create the image itself. This may be the hardest part of the process, because although the icon can be any image you want, you only have a size of 16 pixels by 16 pixels to work with, with 256 colors maximum (see the grid below to see how TechHelpBasics shortcut icon was created). Use your favorite paint program to create the image. If you magnify the image to make it easier to edit, be sure to preview it frequently at actual size to see what it will look like in the browser. Too much detail in an image won’t show up in such a small size, so keep your icon simple.

the TechHelpBasics shortcut icon in a 16 x 16 grid

When you have a finished image, it will need to be converted into the proper icon format before you can use it on your web page. You can download or buy programs to do that, but an easier way to convert your icon is to use an online icon generator, such as the Favicon Generator and Gallery. Follow their instructions — upload your image, preview the conversion, and download the finished icon when you’re satisfied.

After you have an icon in the proper format, you need to upload it to your web server and tell web browsers to use it as a shortcut icon. There are two ways to do this:

1. Name your icon favicon.ico and upload it to the root directory of your web site. This is the simplest method but it assumes you have permission to upload to your web site’s root directory. It also means that every page on your web site will use the same shortcut icon.
2. Or — name your icon anything you want, upload it anywhere on your web site, and include a line similar to the following in the HEAD section of your web pages:

   <link rel="shortcut icon" href="/path/iconname.ico">

   Of course, replace the path and iconname in the above example with the real path and name of your icon file. This method gives you greater flexibility and even means that different pages on your site can have different shortcut icons. If you don’t want a particular page to have a shortcut icon, just leave out the link.

Creating a shortcut icon is a small project that doesn’t take much time or effort but can make your web site look much more professional and eye-catching. Try it and see how much more impressive your URL looks at the top of the browser!

Filed Under Uncategorized