How to create a favicon

A websites favicon is the little image that appears in the address bar of your browser when you visit a webpage. Depending on your webpage’s design, you want to create a customized favicon pronounced fav-eye-con. They have also been referred to as “bookmark” or “favorite” icons.

There are a few methods of generating a favicon. One way to produce a favicon is with a proper plugin for photoshop. (If you don’t have photoshop I highly recommend it since it is the industry standard for manipulating images.)

1. Creating a favicon via photoshop 

You’ll need to download the proper ICO plug-in for photoshop. The plugin will give you an additional file format to save into: .ico format. Download the plugin here. (Mac OSX and Windows supported).

When you have the plug-in, copy the ICOFORMAT file that is inside the zipped file into your photoshop directory. The proper place for it is in the sub directory within the “Plug In” folder. In Photoshop CS6 the sub-folder is named “panels.” In earlier versions the sub-folder is known as the “File Format” folder.  The directory on Windows operating systems is C:\program files\adobe\photoshop\Plug-ins\Panels or \File format)  (make sure not to go to the Program Files (x86) folder.)

Now make sure to restart photshop by opening and closing it and then re-opening it. Now, when you click “Save as” within photoshop you will have the icon supported file format with the .ICO extension.  Congratulations. Here is a video of me installing the plug-in.


2. Creating a favicon via irfan

With irfan (a photoviewing software) you can enable .ICO extension file saving when you install it. During installation make sure to click the .ICO check box to have the .ICO extension included as an option for “save as.” Your desired favicon image should be 16×16 pixels tall and wide. This software is free and downloadable here. It however is not recommended for commercial purposes.

Designing a flavicon in photoshop. 

Watch this video as I design a flavicon image with Adobe Photoshop CS6.


3. Using a favicon generator. 

If you don’t have photoshop you can use a favicon generator from the web.

Favicon generator (preferred generator)
Favicon generator 2

Quick video of me using the first favicon generator.

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>