Making Favicons

When I recently decided that I'd outgrown the free webspace that comes with my Shaw internet-connection, I signed up for paid web-hosting, purchased a domain-name (ereimer.net), and then decided my new website needed a "favicon".  While searching for a suitable iconic image, I tried and rejected several possibilities.  Here are a few of the more promising things I looked at, and played with:

- a black cat (from an image I found here);

- the Linux penguin, and (head of) the Penguin-Books penguin;

- (lip of) purple fringed-orchid, and blue-eyed grass, made from my own photos;

- several versions of the macro-mode symbol used on many cameras;

- a different and more elegant tulip icon (from an image found here);

- my first hybrid tulip icon, made by hand-painting a 16x16 image;

- made from my vector-graphic version, which I prefer, at least for bigger images;

I chose the tulip to denote photography especially closeup-photography, as well as the Dutch part of my ancestry.  Choosing the colour was tough: yellow-on-black is appealing because it's the way some cameras indicate the zoom-lens is within the sweet range for focusing close-up;  black and white suits my love of simplicity;  green better reflects my environmentalism;  that purplish-red is the hue used on the NOCI logo and one I like... 

Here are several bigger examples of my tulip image (from the vector-graphic version):

 

Here are blown-up copies of (a) my hand-painted 16x16 tulip icon, and (b) the 16x16 one made from my vector-graphic version:

 


How To Make a Favicon

Upon starting to make my second favicon.ico file, I found myself wishing that I'd kept an example of the required steps.  So this time, after googling to find the required information, I did construct a shell-script to serve as that example.  In the course of my googling I learned that, in addition to the ppmtowinicon program I'd used the first time, there's also one called png2ico; and using it has obvious advantages when one wants to construct a transparent icon (no need to master the confusingly documented bitmap method of specifying transparency).  So I promptly made two scripts: one to make ordinary solid-colour favicons, the other to make transparent ones.  These scripts may seem like overkill if you only want to make a single favicon, but if you look after multiple websites, or even if you have only one but are inclined to tinker with improvements to your images, then you may find them useful. 

Here is the script to make solid-colour favicons

And here's the script to make transparent favicons, which also needs my fairly general script to make transparent images


Requirements:

The mkfavicon script requires ppmtowinicom from the netpbm package, and ImageMagick, both of which Linux users will already have; Windows users can get them from netpbm at sourceforge and ImageMagick

The mkfavicon-transparent script requires png2ico, a package of its own installed by yum install png2ico on Fedora Linux, by the equivalent on another Linux, or from winterdrache.de for Windows users.  Also required are the netpbm and ImageMagick packages mentioned above.

Of course you'll need an image-editor to create or suitably modify your favourite image that's to become your favicon, for which I recommend the Gimp; the price is right (free), the features often superior to the high-priced Photoshop, well worth that wee bit of an initially steep learning-curve, after which it is a joy to use! 

One more program you may want is potrace.  It will turn a crude sketch into a vector-graphic image that'll remain smooth at any arbitrarily large size.  Having a vector-graphic version also makes it a lot easier to experiment with different colour-schemes. 


Running these scripts:

They are bash scripts, but since I rarely do anything fancy they will (for the most part) work with other flavours of Bourne-shell.  Unix users will understand that language.  Mac-OSX users also? 

For those running Microsoft operating-systems, using free software is rarely easy, but I have heard that installing Cygwin will give you many of the things enjoyed by Unix people; it includes the bash shell.  Likely easier to install and get going is either Unxutils or MinGW; the former includes the zsh shell, which although not the same as bash, is Bourne-compatible;  the latter is newer and includes bash, as part of something called MSYS.  Having no experience with any of the above, I can't recomend one, other than saying you'll want a Bourne-compatible shell such as bash, ksh, or zsh;  the c-shell csh, for example, is not Bourne-compatible. 
(The Bourne-shell is historically named sh, and bash is an extended variant thereof whose full name, Bourne-Again Shell, may evoke a smile from those with an evangelical or fundamentalist upbringing.) 

Using commandline tools in Windows is painful because of its pathetic "console" that's like a flashback to a dumb-terminal from the 1960's with its 25 lines of 80-column white-on-black text.  However this can be changed to taste, by right-clicking on the title-bar, selecting Defaults, and so on;  see also support.microsoft.com/kb/309019.  If it still seems inadequate, there's an alternative: the open-source "Console", from sourceforge.net/projects/console (there's also a shareware program called "Winconsole").