A Favicon is also known as shortcut icon, website icon, URL icon, or bookmark icon is a file containing small icons and mostly associated with a particular Website or Webpage. It is the web designer who creates such an icon and installs it into a Website. Browser that provides It supports typically display’s the page’s Favicon in the browser’s address bar and next to the page’s name in the list of bookmark’s. And the browser that supports a tabbed document interface typically show a page’s Favicon next to the page’s title on the tab, and the site specific browser use shortcut icon as desktop icon. Moreover It was named the so because it was first developed in Internet Explorer, which calls bookmarked sites “favorites” and this icon was displayed in the favorites menu.
The purpose of Favicon
In the early days of internet, These were used as a tool to estimate website traffic by counting the number of visitors who bookmarked the page. But nowadays the main reason for having Favicon icons is to improve the user experience. A few browsers show shortcut icon whenever you create a shortlink for a corresponding website in your desktop or mobile device.
How to create a Favicon icon?
In fact It can be created using any free icon generator or in a free online shortcut icon generator.
Here’s the Favicon generator list:
• Favicon CC
• Favicon Generator
• Dynamic Drive Favicon Tool
• Chami Favicon Service
• Favicon Generator ORG
• Favicon UK
• Degraeve Favicon
• Gen Favicon
The file favicon.ico must be 16×16 in dimension – 16 colors and must be saved as an .ico file. Finally, the file favicon.ico should be uploaded into the root directory on the server hosting your web page.
How to create shortcut icon in Photoshop?
So many tools are available to create Favicon. One thing to remember is that Photoshop doesn’t natively support “ico” file, so you have to download the plug-in from telegraphic. Check whether there is an “ICO” option in your Photoshop “Save As” box to confirm the plug-in is installed.
Create a new document in Photoshop from the menu item “File” and the following option “New”, then set your canvas at 64×64 pixels. Then paste your logo into the document .Once you’re done, simply select the menu “Image” and the following option “Image Size” and reduce the image to 16×16 pixels. Remember to click on “Resample Image” and choose “Bicubic Sharper”, this is to make sure the image doesn’t blur when resized. If you don’t like the final result simply undo your latest changes with “AltCtrl/AltCmd+Z” and keep on working on the design until you’re happy with it.
In order to finish your favicon all you have to do is to click on the menu “File” and the following option “Save As”, there you remember to name your file as “favicon.ico.
How to install Favicon?
Installing a favicon on your server shouldn’t take more than a couple of minutes in two steps. For that you’ll need access to your website root folder and a text editing tool to change your website HTML code.
You’ll need to upload the “favicon.ico” file to your server. In order to do that, point your browser address bar to your FTP server; your URL should look similar to this:
Press enter and the browser will prompt you for a username and password before granting access to the file server. Once you’re in, just upload the “favicon.ico” files to the root folder .
Now you’ll need to edit your website HTML page to help browsers find your Favicon image. Keep your FTP window open, find and download the “index.html” or “header.php” file from your server and follow the steps below according to the file you get: If your website is made of plain HTML, insert the code below in the HEAD area of the “index.html” file, and don’t forget to change “yoursite.com” for your own website address.
<link rel=”shortcut icon” type=”image/x-icon” href=”http://yourwebsite.com/favicon.ico”>
If you use WordPress, insert the code below in the HEAD area of your “header.php” file.
<link rel=”shortcut icon” type=”image/x-icon” href=”<?php bloginfo(‘url’) ?>/favicon.ico”>
With that done, upload the file back to where you got it from. On a matter of fact, most modern browsers are smart enough to find your this file even without any piece of code, but only as long as this icon has 16×16 pixels, it has been named as “favicon.ico” and is saved in the root folder of your website folder.