Making Favicons in Photoshop

In this tutorial we will learn to create Favicons in Photoshop.

What is photoshop?

Photoshop is a professional picture editing program developed by Adobe Systems Inc. It provides us with a great platform to create, edit or modify images to our wish.

What things do I require?

There are some prerequisites for favicon creation in Photoshop. Here is a list:

• Adobe Software

First of all we require the adobe photoshop itself. Luckily Adobe provides a free trial version that can be downloaded at 'Adobe Downloads'. Download and Install it accordingly.

• Plugin For Saving File as .ico

Although photoshop itself doesn't allow you to save a file as .ico but a plugin from TeleGraphics.com named ICO (Windows Icon) Format enables Photoshop to save file with an .ico extension. To Install the plugIn Close PhotoShop > Extract PlugIn Files > Go To 'Plug-Ins Folder' of your Adobe Photoshop Location > And Paste the Extract at 'File Formats' Subfolder Here.

Now when using 'Save As' in Photoshop, you will have an option to save with .ico extension by selecting .ico format from drop-down menu.

How to create a Favicon in Photoshop?

Creating favicon in Photoshop can be done in four simple steps.

Step 1. Open Photoshop > Choose File > Create New Document

Though a favicon generally is 16x16 resolution but working in Photoshop in 16x16 resolution could be a troublesome task, hence choose 128x128 pixels as resolution as it gives you a bigger area to draw. We will definitely bring it down to 16x16 later on.

Step 2. Design or Paste your favicon on the document

If you are good in working at Photoshop prefer creating your own favicon or if you are a beginner try pasting a pre-created image in to the document.

Step 3. Image > Image Size > Choose 16x16 Resolution

Once you are done with the designing part, go to image and select image size. Now select image's width and height as 16 pixels each and the resolution as 72 pixels/inch.

Step 4. Choose File > Save As > Select ICO (Windows Icon) (*.ICO) from Format Menu

In the Final step, go to 'File', select 'Save as' and choose the format of the image as ICO (Windows Icon) and click 'Save'.

After these four steps what we have is, a favicon with a suitable file type. You can now rename your .ico as favicon.ico and use it in your site. This marks the end of the tutorial, if you find any problems feel free to ask me.