How to…make a fav icon!
Ever looked at your bookmarks and wondered how websites have their own custom icon? Then this article is for you!
Look in your browsers address bar, see an image? This little icon is called a ‘favicon’ (favorite icon).
They display in most browsers and make your site stand out more, and stand out in their bookmark list!
I want one!
First you have to draw one. You will be aiming to make a favicon in .ico format, that is 16×16 pixels in size.
There are two ways you can do this, 1. make an image and convert it to an icon with some special software, or 2. use an icon editor to make it from scratch.
I will be using a macromedia fireworks and a free converter called, @icon (http://www.towofu.net/soft/e-index.php).
Making the icon
- First, create a canvas 16×16 pixels big in fireworks/your drawing package.
- Draw your icon, try to make it fit with your site’s image. If you want a transparent background, make it a solid colour for now (im using bright pink). When finished export it as a .bmp. A method I use for drawing icons is using the pen tool and drawing pixel by pixel, but if your no good with pixels feel free to use shape tools!
- Open @Icon and goto File>open and find the bmp you just made.
- We now need to make the background transparent, so click the button that looks like a black silhouette (edit transparency mask).
- Use the “create mask by colour” tool (colour picker icon) and click the background you want invisible (in our case; pink). Click ok
- Your icon is now ready to save. Goto File>save as single icon, and save as favicon.ico
Adding it to your page
Just upload the favicon.ico to the directory with your files (best to put it at the root of the site), most browsers will find it automatically when your site is bookmarked, then everyone should see it.
Alternatively you can put some code in the header of your page,
<link rel="shortcut icon" ref="http://www.mydomain.com/myicon.ico"> but I dont tend to bother with that. This code does however allow you to use an icon with a different name, e.g in the code example the icon would be called ‘myicon.ico’.
So there you go, a quick guide to favicons. Go play!
Found this post useful? Why not buy me a coffee!
Anthony says:
mexe I use a different program called Iconfoge and the great thing about this program is it will convert your Gif image into an ico image for use as your favicon. Check out http://www.cursorarts.com/ca_if.html
Comment made on February 9, 2007 at 4:34 pm
Gina Mikel says:
Great instructions! I used your directions to make some. See them at http://www.scientificillustrator.com/illustration/favicons.html
Comment made on March 23, 2007 at 2:09 am
Mike Jolley says:
Great work
Comment made on March 23, 2007 at 8:08 am
Avinash bikumalla says:
hi, its a nice post;
Comment made on September 8, 2007 at 12:52 pm
Web Dev :: Alex says:
Thanks for the link to that converter, been looking for a better way to make a favicon for a while.
Comment made on November 18, 2007 at 12:05 am
Juau says:
Also note that you could use gifs of pngs using type=”image/gif” (4bpp – 16×16 pixels) or type=”image/png” (4/24bpp – 16×16), that way you get rid of conversions and/or dedicated programs.
In ico files, though, you have up to 128×128 and they can hold more than one res in the same file.
Comment made on February 8, 2008 at 9:58 pm
gav says:
great post, but I couldn’t see a favicon for blue-anvil?
Comment made on December 5, 2008 at 4:39 pm