Web Design – How to design Favicon in Photoshop

9 January 2010 No Comment

We have already discussed the importance of favicon in web design in an earlier article. Favicon is often overlooked by Web Designers but is vital in web design. A professionally designed website should include a custom favicon as it important for website branding.

Favicon is a small icon that is displayed next to the URL of a website in the address bar of the browser. It is important to design a custom favicon for your website for branding reasons.

Most browsers including Firefox, Internet Explorer and Safari support favicons. New versions of many browsers, support standard image formats such as gif and png in favicons. However for a wider coverage and to ensure the custom favicon for your website is displayed on most browsers, it should ideally be created in .ICO format.

How to design a Favicon in Photoshop

You can easily create a custom Favicon icon for your website without employing the services of a Web Design Company or professional web designer. In this tutorial, we are going to cover how to create a Favicon using Photoshop. Photoshop is easy to use and is one of the leading software used in web design. Other graphic design packages will offer a similar approach.

The process is simple. All you need to do is download the right plugin and place it in the plugins folder. That is all you need to do in order to start creating custom Favicon icons for websites using Photoshop. The steps are explained in detail below.

Step 1: Download the plugin

By default Photoshop does not have the right plugin installed to create a Favicon. You need to download the Favicon plugin first.

You can download Photoshop Favicon plugin for free from http://www.telegraphics.com.au/sw/

Step 2- Install the Plugin

Once you have downloaded the plugin, extract the file if it is compressed. Place the extracted plugin file in the plugins folder of Photoshop. This is typically located at C:\Program Files\Adobe\Adobe Photoshop CS2\Plug-Ins\File Formats

The folder path may differ slightly depending upon the version of Photoshop you are using.

Step 3 – Design custom icon for your website

Once the plugin is installed, you will be able to create custom icons to use on your website or other web design projects. Create a custom small square image based on how you wish to present your website or your brand. You can use graphic, text or your logo. As Favicons are tiny, it is important to Keep the graphic simple.

Step 4- Resize and save your graphic

Once you have designed the right image, resize your graphic to 16 pixels x 16 pixels. In Photoshop, you can do this via the ‘image size’ option under ‘Image’ menu at the top. Enter 16px in width and height in the image size pop-up window and press OK. This will resize the image to the correct size. Save your image with the name ‘favicon’. The file should be saved as .ICO format. You can do this by selecting ‘windows (.ICO)’ in the file type option in the ‘Save As’ pop-up window.

STEP 5 – Upload custom icon to the web server

Finally, you will need to upload the custom ‘favicon.ico’ image you have created to the web-server where your website is hosted. You can do this by FTP. Place the file in the main folder where the website files are located. If a Favicon icon is already present on the server, overwrite this with your custom image. That is all. When you visit your website next, you will see your custom icon displayed next to the URL in the address-bar of the browser. Remember to refresh the page to see the change.