A Favicon is a little custom icon that appears next to a website’s URL in the address bar of a web browser. They also show up in your bookmarked sites, on the tabs in tabbed browsers, and as the icon for Internet shortcuts on your desktop or other folders in Windows. And when I say little, I mean 16 pixels by 16 pixels. So if you like a good design challenge try your hand at this one.
All you need to add a Favicon to your site is a Windows Icon (.ico) file usually called favicon.ico that you upload to the main directory of your website. Nowadays, most browsers besides Internet Explorer can use a GIF (including animated ones) or PNG (including full transparency) instead. But since all browsers including IE understand the .ico format, and because it’s got a lot of intriguing features that GIFs and PNGs don’t, read on to find out how to make one
Download The Plugin
You’ll need the Windows Icon (ICO) file format Photoshop Plugin to export to the .ico file format. You can download the plugin from Telegraphics. The plugin reads and writes ICO files in 1, 4 and 8-bit Indexed and 24-bit RGB modes, and also reads and writes 32-bit “XP” icons (with 8-bit alpha channel). Make sure to install the plugin before you begin this tutorial.
link to follow photoshop favicon tutorial , but I would really suggest You to just use favicon generators to automate the process.
So I will cut workflow into steps:
a. You must make 16×16px small image – it`s really small, so You can put there just very simple and remarkable shapes, so sure it is a little challenge. Save image as *.gif, *.jpg or *.png.
*comment – You can make 32×32px icon too, but that`s not really necessary – it will be shown only if user on his Bookmark/Favorite toolbar enable it to display large icons.
b. At this step favicon generators will take place. Sure, web is full of those, but I choose only the most useful of them :
1. Nice design and very easy to use application:
2. DynamicDrive.com as always always some good solution:
3. kit.com tool, which I prefer to use this generator because there`s an option to make animated favicon to make it more remarkable and conspicuous
Just upload Your image and download generated version, check animate favicon if You want to get one.
To submit favicon to Your web-page upload it on Your web-page and add the following code between <head> … </head> section :
<link rel=”shortcut icon” href=”favicon.ico” >
<link rel=”icon” href=”animated_favicon1.gif” type=”image/gif” >
congratulations you have created and uploaded gr8 favicon.