Favicons (short for ‘favorites icon’ and sometimes referred to as ’shortcut icon’, ‘website icon’, ‘page icon’ or ‘urlicon’,) are 16px. x 16px. images that are associated with a particular website. Favicon was originally invented by Microsoft back when Internet Explorer version 5 was released.
In this article I will go over how to create this icon and the code used to insert in the pages web so that is visualized by your customers. The icon destined to be used must have equal dimensions to 16×16 pixels, be named favicon and its extension must be .ico. (note: The naming of favicon.ico is preferred in theory any name will work as long as the file extension is .ico). In order to generate the icon you will need to use either a specific software like IconCoolEditor, IconForge, Photoshop or as an alternative one might decide to use an online icon designer.
The favicon can be visualized in your browser address bar to the left of the URL as you can see here in the example:
If you decide to create your favicon online I strongly suggest The Favicon Generator. This is one of my favorite favicon generator sites as it is simple, fast, ideal for even a novice web user.
1. You choose the colors that you prefer (you may upload a pre-existing image or start without one)
2. Click on the squares and paint your logo
3. Download when you are finished.
4. Upload the favicon.ico to the directory main of your web server.
If designing the icon in a software program such as Photoshop the general options would be something as follows (note: this assumes you have a basic understanding of how to use Adobe Photoshop or similar graphic editing software program. If you do not, I suggest creating your favicon online.):
1. Start a new file or you may open an existing the image with software of diagram like Adobe Photoshop.
2. Change the dimensions of the image in 16×16 pixel.
3. Photoshop does not have the option to save files as .ico by default so we save the image like favicon.bmp or as an alternative you may download the ICOFormat.8bi plugin file from telegraphics.com which enables Photoshop to save files with a .ico extension. Once downloaded this plugin file should be placed inside your Photoshop/Plug-Ins/File Formats/ directory.
Once the icon is ready, you will need to upload (transfer) it to your main root web directory quite often the path for this is something similar to home/accountname/www/ or home/accountname/public_html/.
The code is then added into your web pages by adding a shortcut link tag and placed in the header area between the <head> and </head> tags.
For example:
<html>
<head>
< link rel=” shortcut icon” href=” http://www.dreamcore.net/favicon.ico” />
</head>
<body>
Hi welcome to my website
</body>
</html>
