Ubuntu – How to Create and Host favicon.ico Files on Apache


I recently installed an web-based feed aggregator called Gregarius on Apache and found that there was no favicon displayed next to the URL or in the browser tab.

So I took this as an opportunity to learn two things – first how to create a favicon.ico file on Ubuntu and second how to configure Apache to display favicon files.

A favicon is typically 16×16 pixles. You can create an image yourself (as a.png file for now) or use your favorite search engine to find some free ones.

I found some great, hand drawn icon sets and decided to use one of the 16×16 .png files from them:



Click the above images to download the icon sets.

I extracted the downloaded icon sets and copied the icon of my choice (rss_16x16) to my home directory.

Now we just have to convert the .png icon file to an .ico file. To do this we will install a command line utility called icoutils.

Click Applications, Accessories and then Terminal and enter the following command:

sudo apt-get install icoutils

Convert the .png icon to an .ico file as follows:

icotool -o favicon.ico -c rss_16x16.png

Obviously you will need to change the filename of the .png file to the name of your chosen icon.

The final step is a little configuration on your Apache web-server. The following line of code is a basic template that we will adjust according to our environment. Typically this line of code just needs to be inserted into the site header between the <head> and </head> tags.

<link rel="shortcut icon" href="htttp://domain.com/favicon.ico" />

For my environment I had to adjust the href destination to the ip-address of my web-server followed by the path to my favicon.ico:

<link rel="shortcut icon" href="http://192.168.0.43/rss/favicon.ico"
 />

Gregarius is written in PHP and so I had to add the above line to /var/www/rss/themes/defaut/web/header.php. This location will vary depending on your application / environmrnent.

Then I restarted Apache:

sudo /etc/init.d/apache2 restart

All that was left to do was to refresh my Gregarius web-page and my favicon was there in all its glory!

Sources:

http://steve.kargs.net/hosting/create-a-website-faviconico-with-ubuntu-linux/

Many thanks to my brother for helping me figure out where the shortcut icon code belonged in my Gregarius installation.

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s