How to Create Favicon

Favicon is small image file that is being displayed in the left side of your address bar.

It also being displayed in: links bar, bookmarks and tabs.

If your internet resource (site, blog, etc...) doesn't have favicon - default browser icon will be used.

Most common file type that is being used for faveicon is .ico (which is windows extension used for the icons);

However other formats are supported too by most of the modern browsers.

You can use PNG, GIF, JPEG in all browsers except Internet Explorer and even animated GIF in all browsers except IE and Safari.

Most common size for favicon is 16x16 pixels, but it also can be used with dimensions 32x32, 48x48 and 64x64.

You can obtain the best quality of your favicon by following steps below.

1. Create your square icon in Photoshop (you can use any other editor but for the best result I would prefer Photoshop). Dimensions will need to be 16x16 for options 3.2 and 3.3 and for 3.1 any square should be fine.
2. If your icon is not a solid square, you will need to check for any kind of strange effects around it. You can check that by inserting black background layer behind the image. Scale down to 100% percent and make sure that you're happy with the result.
3. Next you will need to save your image and here you will have few options. 
1. Best option is: in Photoshop open File-Save for Web & Devices and save it as transparent PNG24 with name of the file favicon. If you pick any other format it may have a white border around image or be choppier than you expect. After you can use web service to convert your PNG image to .ico file with proper dimensions. You can do it by checking in the Google for favicon generator or simply following this link. 
2. If you prefer to not use 3rd party tools you will need to get plugin for Photoshop as .ico is not one of the standard Photoshop formats. You can download free plugin here. To install plugin you will need to exit your Photoshop. Copy plugin file from downloaded archive (name will be ICOFormat64 or ICOFormat depends from version) and paste it into C:\Program Files\Adobe\Photoshop\Plug-Ins\File Formats. After re-opening Photoshop you will have option ICO (Windows Icon) (*.ICO) under File-Save As-Formats. Result will be okay but not the best (it looked choppier for me than with option 3.1)
3. You can also use "cheating way" - save your file as PNG24 and than change extension manually from .png to .ico. Unfortunately, it didn't work well for me in all browsers. 
4. You can put your favicon anywhere in your site, but it's a good practice to place it in the root directory of your website. You will need to reference it in the home page of your website (don't have to do it on every page). In the header section of the site put next line:
   <link rel="shortcut icon" href="http://yoursite.com/favicon.ico"/>. In general, as long as favicon is located in the root directory of the site it should be shown without any references, however it's a good practice to point to it, to avoid any anomalies. If you decided to put it in some other place (let's say for organizational purposes in the folder with other images) - make sure you provide a full path to it in <link rel> tag.

You can also create Icon for the Apple devices and some Android devices. Dimensions for the Icon will have to be 57x57 or for best quality 114x114. For the tablets basic size is 72x72 pixels.
To reference it in the smartphones version of the site use next link:
<link rel="apple-touch-icon" href="http://yoursite/image.png"/>
Note that it doesn't have to be in .ico format and can be actually placed in any accessible folder of your website.


In HTML5 you're able to use multiple icon sizes and formats, but I believe that any of the current versions of browsers are supporting size attribute (and I am 100% sure that it will not work with smartphones). Anyway, just for reference, syntax is like that:
<link rel="icon" href="http://yoursite/image.png" sizes="16x16 32x32 64x64" type="image/png"/>


You can still use it without sizes - browser should pick the actual size of the image.
Good thing about HTML5 is that you can reference different image formats to get the best quality icon for any version of the browser.