How to Create Favicon.ico File in Photoshop for Blogs/Website

In this post I will explain you creating favicon.ico file using Adobe Photoshop. If you are looking for different article than checkout the popular posts and recent posts in the sidebar. Favicon is a small image which is displayed by browsers in the URL bar. The icon also appears when users bookmark the site which contains favicon.ico file. It is generally located at the left side of the URL and bookmarked site. Most browsers look for favicon on the websites root directory. Root directory is a place where the index page is kept. You will also need to provide a link to the favicon.ico file which is located in the root directory. I will explain these a little later. At first we should know how to create a favicon file for websites or blogs. As the Post Title suggests we will discuss creating a favicon file with the help of Photoshop. So, let's see the various steps on creating a favicon.ico file using Photoshop.

Take a slight look at the different favicon designs used in various popular sites. By using this your site will get more professional feel. Your sites favicon icon can also be used by users to quickly remember your site. See the image given below.

If you were already trying to create a favicon.ico file using Photoshop than you have seen that there isn't any way of creating a image with ICO (Windows Icon) extension. Actually you will need a Photoshop Plugin that will help you in saving file as .ico extension. You can download the plugin for creating favicon file here. Installing instructions is provided in the file that you will download. But to make it more easier for you I have written the process of adding that plugin in Photoshop below.

• First of all Download the from the link given in above paragraph.
• Now open the File. Extract the file if it is zipped.
• Move the file to the File Formats folder (Programs > Adobe > Photoshop CS > Plugins > File Formats).
• Now Restart the Photoshop if you have kept it open while adding the Plugin.
• Now you can start creating Favicon file in ICO Format for your Website or Blog.

Follow the instructions given below to know how to create favicon file in photoshop. You will need to create a new image with little smaller dimension or you can also create an image with larger size and than resize the image to 16 by 16 pixels later before saving.

• First of all open Photoshop after installing the plugin for creating favicon.
• After opening Photoshop Choose File > New. Create an image of 72 pixels/inch resolution image with the dimension of 128 by 128 px. Don't Worry about the size as we can resize the image later after creating the favicon image. You can also start creating the file with much larger dimension but make sure that it will look good when resized to 16 by 16 pixels.
• If you are facing difficulties in creating your desired design for favicon icon than just keep editing until you create a design that will best fit your Blog or Site. It is little difficult to create a very beautiful image in such a small size. Just keep your favicon simple and clean.
• When your design is ready than go to Image > Image Size and change the image dimension to 16 by 16 pixels. Now click on Resample Image and choose Bicub Sharper to make sure that the image don't looks blurry after resizing it to 16 x 16 pixels. If your image looks still blur than try changing Contrast, Hue, Saturation etc. until you get your desired look. After editing the image resize it 16 by 16 pixels.
• After getting your favicon ready Go to File > Save As. Now name the file as favicon.ico and choose ICO (Windows Icon) from the pulldown menu and than save it. I should remind you that the ICO file format extension will be only available after you successfully install the Plugin in Photoshop.
• Now you will need to upload this newly created favicon file in your Website's root directory (I mean the folder/directory at which your index page is kept).
• After uploading the favicon file to your website root folder add the link of your favicon file in the head section of your webpage. See the link given below to know how to link favicon file.

<link href='http://your-website-name.com/favicon.ico' rel='icon' type='image/x-icon'/>

Change the link in red with your favicon.ico file address. Add this link in <head> section of your webpage. Now a days almost all modern browsers support PNG and GIF file as favicon. If you would like to add favicon as PNG image than you can do it but keep in mind that it may not work in Browsers like Internet Explorer. To use the PNG and GIF file as favicon than use the link type given below in place of above link to link your favicon file.

<link href='http://your-website-name.com/favicon.gif' rel='icon' type='image/gif'/>
<link href='http://your-website-name.com/favicon.png' rel='icon' type='image/png'/>

The first link in the blockquote above is for gif image type. If you want to use GIF file as a favicon than use the first link from the quotes above. And the second type of link is for PNG file. If you would like to use PNG file as a favicon for your Website or your Blog than you will have to use the second link type from the quoted text given above.

Great! You have successfully added favicon to your website or blog by creating the favicon.ico file with Adobe Photoshop. I hope this post helped you a little in creating a favicon file in ICO file format with the help of Photoshop.