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.
- Favikon
- Antifavicon (If you are trying to create plain text favicon opt this)
- Degraeve (Draw your own favicon and create !)
- Dynamic Drive
- Genfavicon
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
Go to Image > Image Size in menubar and resize it 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
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 !!
Brochures
Hi! Thanks for sharing this, it’s been real helpful. I didn’t even know what those were called before. Thanks again!, great job!
Dusboy
Great tut! but it’s a little funny that your site has no favicon…
Anyway congratulations for your site, i’m waiting for new tuts and articles!
subhadeep
yea its really funny i thought of it while writing the tut but as u know its brand new just 3 days old so it will take some time before i arrange everything
Karan
Thanks very much…I get what I was searching….I am really thankful to you..Keep Going……So many wishes
Abhishek
Good yaar, nice thing . quite cool
Jack
Good tutorial, thanks!
[offtopic]May I ask which addon that is next to your home page button?[/offtopic]
subhadeep
Its Yoono, a great socialising addon, https://addons.mozilla.org/en-US/firefox/addon/1833
bpthundercloud
Great Job I love staying independent from all the different servers. THANKS AND KEEP UP THE GREAT WORK.
Darren
Great stuff.
Or you can use MS Paint and save as an ‘ico’.
Nepal Trekking
Thank you very much for the great information
Liyo
THANKS DUDE!!