Miscellaneous

How to Create A Favicon (3 Different Ways)


Favicon or ‘favourites icon’ is a small square 16*16px icon integrated in webpages and websites. Favicon is typically displayed next to the address bar in webpages and the links in bookmarks. Favicon gives a personal and graphical feel to the site, users can easily locate bookmarks with the help of favicons. Favicon supported formats are ico,gif,png but we’ll focus on only ico format because for its w3C standard.

The 3 ways we’ll learn to create favicon are :

  • Online Favicon Generator (Easiest Simpliest Free)
  • Photoshop Plugin
  • Other Softwares (Freewares)

Favicon Using Online Generators

Generating Favicon using online generators are the easiest free and best way if you are not very handy with graphics softwares and don’t have much graphic skill. Before you create favicon using online generator, resize your logo to any square size by cropping(though not mandatory but it helps).

The following sites offer free favicon genarator, all you have to do is upload the image and favicon is created automatically and download link provided.

Read the last part of the tutorial to know how to add it to your website.

Use Photoshop To Generate Favicon

Photoshop does’nt support ico format directly, so we need to install a plugin TELEGRAPHICS ICO PLUGIN, After you have installed the plugin you can read the next part.

Now create a new square file of 16*16px or 64*64 px anything you want, creating somewhat bigger size will make you feel comfortable to draw your icon. If you already have you logo ready you can also open it in photoshop crop it to make it square, you can also use transparent background for your icon.

Opened a gif file in photoshop and made it square with transparent background

Opened a gif file in photoshop and made it square with transparent background

Go to Image > Image Size in menubar and resize it to 16*16px

Resize Icon to 16*16px

Resize Icon to 16*16px

Go to File > Save As in menubar and save it as ico

Save the file in ico format

Save the file in ico format

Read the last part of the tutorial to know how to add it to your website.

Other Free Softwares To Create Favicon

There are many free softwares where you can create your favicon from scratch. Some of them are listed below

Creating icons in these softwares are a piece of cake just create a new square file and create your icon, resize it to 16*16px, 32*32px or 64*64px according to your needs and export as ico.

How To Favicon in Site

Rename the exported ico to favicon.ico and then uplaod to your website root then add the following lines after <HEAD>

<link rel=”icon” href=”/favicon.ico” type=”image/x-icon”>

And your favicon is ready, clear your browser cache and test it !! More references visit : How to Add Favicon w3c

For some inspiration visit here : 50 Remarkable Favicon

Hope you all enjoyed the tutorial. Thanks !!


Currently working as MD in SandBoyMedia. Based in India having keen interest in Design and Development.

    View Comments