Ever notice with you browse to some web sites that there is a mini logo to the left of the “http://” in the address field? That’s a Favicon and I think they’re cool.
In this article, we will create one of our own and place it on our Apache web server for all to see. The icon also appears in your browser’s Favorites, if you bookmark the site.
Here’s an example from my own bookmarks
The favicon stores different sizes in the one image, this allows the favicon to display the appropriate size image when your web site is bookmarked. There are sites on the Internet that have free favicons available for download, sites that will take an image you upload and create a favicon for you or you can generate your own.
SLED 10 SP1 installs the utilities needed to create your own favicon by default.
Using your favorite editor, vi, gedit, kate, etc. Create a bash script called mkfavicon.sh
This script will convert any size image file into the three standard 16×16, 32×32 and 48×48 files required to create a standard favicon file.
The image files that will be excepted by the script are PAM, PNM, PPM, PGM and PBM; other images files can be easily converted to the required image format by using one of the many image tools available in the netpbm package.
The docs are in HTML format and located /usr/share/doc/packages/netpbm/doc/pbm.html
#!/bin/sh if [ -z $1 ] ; then echo -e "\\nUsage: \"mkfavicon filename.pnm\"\\n" exit fi rm -f favicon.ico pamscale -linear -xsize=48 -ysize=48 $1 > tmpicon48.ppm pamscale -linear -xsize=32 -ysize=32 $1 > tmpicon32.ppm pamscale -linear -xsize=16 -ysize=16 $1 > tmpicon16.ppm pnmquant 256 tmpicon48.ppm > tmpicon48x48.ppm pnmquant 256 tmpicon32.ppm > tmpicon32x32.ppm pnmquant 256 tmpicon16.ppm > tmpicon16x16.ppm ppmtowinicon tmpicon16x16.ppm tmpicon32x32.ppm tmpicon48x48.ppm -output favicon.ico rm -f tmpicon*.ppm #End of mkfavicon.sh
Now make the script executable.
chmod +x mkfavicon.sh
You might want to copy this script to /usr/bin
To convert PNG format files, they have to be converted to PNM format first. Issue the following command before running the script.
pngtopnm -mix png_image.png > newformatimage.pnm
Run the script with your image file.
The output will be similar:
pnmcolormap: making histogram... pnmcolormap: 1695 colors found pnmcolormap: choosing 256 colors... pnmremap: 254 colors found in colormap pnmcolormap: making histogram... pnmcolormap: 810 colors found pnmcolormap: choosing 256 colors... pnmremap: 252 colors found in colormap pnmcolormap: making histogram... pnmcolormap: 232 colors found pnmcolormap: Image already has few enough colors (<=256). Keeping same colors. pnmremap: 232 colors found in colormap
Copy the favicon.ico file to the DocumentRoot for Apache
cp favicon.ico /srv/www/htdocs/
Edit your index.html or whatever default page, and add these lines to the <head> section.
<link rel="icon" href="favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
That’s it! Now, let’s test it.
Open a browser and browse to your web server.
Since it’s so small in the address field, I cropped the browser screenshot to just the needed data.
I bookmarked it.
And now we see it in the bookmark.
You can use company logos, your own images or whatever. I do suggest not using the web servers default favicon. They will instantly tell the user what web server your running.