Mostly Harmless

Mostly about my amusement

Adding favicon.ico to every web page

Edit May 2nd, 2009: It’s amazing that I still get hits for this web page.  This info was from 2005 and these days it is easy to add a favicon.ico just by putting a copy in your web servers root directory.

Original post below.

– – – – – – – – – – – – – – – – – – – – – – – –

Recently I figured that I would add an icon for the web pages. After some digging I found that in order to do this, all you need to do is put a Windows formated favicon.ico file on your web server and add the following tags

<link rel=”icon” href=”/favicon.ico” type=”image/x-icon”>
<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon”>

within the <HEAD> portion of the web page. The second tag seems to be for Internet Explorer. Pretty easy to do, an when you add that URL to your favorites in Internet Explorer, the icon gets listed in the menu next to the title.

In Firefox it’s even better. The icon next to the URL http://www.dembowski.net/ shows up there too. Very cool. I put the favicon.ico I created on my web root so http://www.dembowski.net/favicon.ico works.

Then I realized that in order to get the icon onto all my pages I would have to insert that HTML tag into every page by hand.

Not so cool. Some of the pages, WordPress blog software for example, were not created by me. I can modify them but that is potentially a lot of pages to mess with.

I run this server on a Linux distribution (Fedora Core 1) and am running this blog on the Apache 2.0 web server software. It’s a good environment and just about every idea has been done already.

Turns out there is an Apache module called mod_layout (http://tangent.org/index.pl?lastnode_id=478&node_id=362) that can dynamically modify web page content based on entries in the config file.

So I downloaded the latest source from the author’s web site (http://download.tangent.org/mod_layout-4.0.2a.tar.gz) uncompressed the software and built.

That’s when the fun began. The documentation I found online is dated and no longer entirely applicable. The mailing list archives were not much help either. I could have sent the author an e-mail (the mailing list archive shows he’s a really good guy) but I A) did not want to bug him for a RTFM question and B) why couldn’t I just figure it out? I have the source code after all.

After looking at the source code and trying unsuccessfully to figure it out, I reasoned that some distribution (not Fedora) bundles mod_layout. I went onto google and found apache2-mod_layout-2.0.48_4.0.1a-2sls.i586.rpm. It’s part part of the OpenSLS distribution which I never even heard off. This rpm contained a well commented config file 15_mod_layout.conf which spelled out what each config option does.

I’ve put a copy of that sample conf file at http://www.dembowski.net/15_mod_layout.conf. OpenSLS apparently became Annvix at http://annvix.org/.

On Fedora Core 1, I needed to install the httpd-devel package (yum install httpd-devel as root). The Makefile needed be changed since Fedora moves the apache source and utilities from the default.

The diff for the Makefile is

$ diff Makefile mod_layout-4.0.2a/Makefile
5,7c5,7
< top_srcdir=/usr/local/apache2
< top_builddir=/usr/local/apache2
< include /usr/local/apache2/build/special.mk

> top_srcdir=/usr/lib/httpd
> top_builddir=/usr/lib/httpd
> include /usr/lib/httpd/build/special.mk

Then as root just

$ cd mod_layout-4.0.2a/
$ make && make install

This will build and copy the binary mod_layout.so to /usr/lib/httpd/modules add to the /etc/httpd/conf/httpd.conf file the line

LoadModule layout_module /usr/lib/httpd/modules/mod_layout.so

Which I copied and deleted. The httpd.conf file is part of the httpd rpm package; I try to not mess with that except when needed. Instead in the /etc/httpd/conf.d directory I created a file called mod_layout.conf. All *.conf files in that directory get read and included, so modifying the the main file is just not needed.

In that file I placed the following lines:

LoadModule layout_module modules/mod_layout.so
AddOutputFilter LAYOUT html

Layout “<HEAD>” “<link rel=”icon” href=”/favicon.ico” type=”image/x-icon”><link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon”>” append

LayoutComment On

First line is loads the mod_layout module. Then I have a AddOutputFilter LAYOUT for html. I have to try peppering a plain text file with <HEAD> just to see what happens, but the filter should only be engaged for HTML content.

The Layout command is where the good stuff happens. Whenever the <HEAD> string is seen, it appends right after that the two tags

<link rel=”icon” href=”/favicon.ico” type=”image/x-icon”><link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon”>

This way I keep the <HEAD> tag intact and get what I want, a reference for the icon on every web page. I added the LayoutComment On as a sanity check.

Here is the difference it makes. For http://www.dembowski.net/foo/junk.html

<HTML><HEAD><TITLE>mod_layout test</TITLE>
</HEAD>
<BODY BGCOLOR=”#fefefe” TEXT=”#222222″ LINK=”#000000″ VLINK=”#222222″>
TEST OF GAH!
</BODY>
</HTML>

Comes out as

<HTML><HEAD>

<!– Beginning of: Static Content –>

<link rel=”icon” href=”/favicon.ico” type=”image/x-icon”><link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon”>

<!– End of: Static Content –>

<TITLE>mod_layout test</TITLE>
</HEAD>
<BODY BGCOLOR=”#fefefe” TEXT=”#222222″ LINK=”#000000″ VLINK=”#222222″>
TEST OF GAH!
</BODY>
</HTML>

Which works exactly as I wanted. It’s all good.

The only minor drawback I see is that the next time I get an update to my httpd package (security, bug fix, developers added something, etc.) I’ll have to rebuild the module.

3 Comments

  1. Hey Thanks

    This is exactly what I was looking for!

  2. HappySpaceInvader

    February 16, 2010 at 6:18 am

    This seems like the long way round… surely all you have to do is add the favicon.ico file into the root of your web folder and then add the line:

    AddType image/x-icon .ico

    to Apache’s httpd.conf (either site-wide or in the virtual hosts you want to apply it to)?

    This displays the favicon for every page on the site and you don’t have to add anything into any of your pages whatsoever.

  3. You 2009 edit nailed it, it is worthy to remind that if you have multiple sites in a server you must put the icon in the site subdirectory from /var/www

    Thank you.

Comments are closed.

© 2018 Mostly Harmless

Theme by Anders NorenUp ↑