SUSE Conversations


Creating a Favicon for Your Own Apache Server on SLES 10

mfaris01

By: mfaris01

February 26, 2008 11:35 am

Reads:1168

Comments:0

Rating:0

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.

Procedure

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.

/usr/bin/mkfavicon.sh newformatimage.pnm

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.

Conclusion

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.

Enjoy.

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)

Tags: , ,
Categories: SUSE Linux Enterprise Server, Technical Solutions

Disclaimer: As with everything else at SUSE Conversations, this content is definitely not supported by SUSE (so don't even think of calling Support if you try something and it blows up).  It was contributed by a community member and is published "as is." It seems to have worked for at least one person, and might work for you. But please be sure to test, test, test before you do anything drastic with it.

Comment

RSS