How to create your own designed icon?

When you have a web site page loading you can see sometimes a small icon (or a picture if you want) in the address bar. A more common name of such icon is favicon (stands for shortening of two words - "favorite" and "icon") - a small picture in the ICO format sized 16х16 pixels.
Some time ago all the web browsers had the same picture for all the web pages. For ex. in Microsoft Internet Explorer it was a lower-case "e" in the semicircle of a pseudo-orbit, for Netscape it was some kind of a bookmark. However, nowadays we have a great opportunity to create a favicon that would be some kind of your own visiting card representing your web site style with your own original picture.

Just to note that a favicon is displayed in the tags, in the address bar, in the tag board. A favicon represents the idea of the web site, increases its recognizability, as well it can be seen in the search results of the most popular web browsers. As well I am sure you will agree that it is easier to distinguish the sites in the Internet space if they have favicons.

In order to set up a favicon you shall design an image sized 16х16 pixels and save it in the ICO format in the root of the site under the name of favicon.ico.

Adobe Photoshop cannot read ICO format and cannot save images in this format that's why you will need an additional plug-in to save your future favicon.

Download a plug-in to Adobe Photoshop to save your favicon in ICO format, ZIP, 8kb

To make this plug-in work you shall unpack the zip-file and save it in the the folder named Plug-Ins\File Formats. For example, by default Photoshop CS for Windows gets installed in the folder c:\Program Files\Adobe\Photoshop CS. Thus, the whole path for the plug-in file will be c:\Program Files\Adobe\Photoshop CS\Plug-Ins\File Formats.

After the plug-in was added, when you are saving a picture, you will see a new point "Windows Icon" in the list of available formats (don't forget to restart Adobe Photoshop).

All you havw to do now is to design your creative favicon sized 16х16 and save it under the name of favicon.ico in the root of the site.

However, your icon may not be located in the root of the site and have the name of favicon.ico. You may place the file in any folder of the catalogue. The only thing you should do is set up the location of the file for the browser. You can do it with the help of tag, as in the example below:

<head>
  <link rel="shortcut icon" href="/images/favicon.ico">
</head>

href parameter assigns the location and the name of the file.

Close