SectorPrime

fav2png - Free favicon.ico to png image converter

Try a domain:
Result:

This is a really easy way to brighten up your link pages - by using the favicons of the pages you're linking to!

A site's favicon is typically displayed in your browser's address bar, and in your favourites or bookmarks. Their standard location is http://some.domain.com/favicon.ico. They have a standard size (16 x 16px) and are ideal for placing next to your links. We use fav2png throughout SectorPrime.

Most modern browsers display the .ico format (the normal format for favicons). So why use this script?

It converts the favicon to png format, for even greater browser compatibility.
If the site doesn't have a favicon, it servers up a default icon instead.
For faster performance, previously cached images can initially be downloaded by javascript while the latest image is created.
The script can be easily modified to change the size and age of the image cache.

The actual image manipulation is provided by Tony Cook's Imager.pm.

This code is free under the GNU GLP (see code header of Fav_2_Png.pm). For a general image-conversion program, see our image converter; for other PNG-supporting applications, see libpng.org.

fav2png.pl

#!/usr/bin/perl -w
use strict;
use lib '.';
use CGI ':standard', '-debug';
use Fav_2_Png;
delete @ENV{ 'IFS', 'CDPATH', 'ENV', 'BASH_ENV' };

# get favicon domain
my $faviconDomain = param("fav");

# convert to png and output with content type
print "Content-type: image/png\n";
print "Cache-Control: max-age=3600\n";
print "\n";
Fav_2_Png::fav2png($faviconDomain, \*STDOUT);

fav2png.pl is a wrapper around the real functionality in Fav_2_Png.pm, to make testing easier. The default image is expected in fav_default.png, and cached images are stored in a folder called img_cache.

Fav_2_Png.pm

package Fav_2_Png;

# Copyright 2007 SectorPrime
#
# This program is free software: you can redistribute it and/or modify
# it under the terms of the GNU General Public License as published by
# the Free Software Foundation, either version 3 of the License, or
# (at your option) any later version.
# 
# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
# GNU General Public License for more details.
# 
# For a copy of the GNU General Public License see
# <http://www.gnu.org/licenses/>.

use     strict;
use     Imager;
use     LWP::Simple;
require Exporter;
our @ISA    = 'Exporter';
our @EXPORT = qw(fav2png);

# exported subs
sub fav2png($$);

# private subs
sub downloadAndOut($$$);
sub outPngFile($$);
sub purgeOld($);
sub safeFile($$$);

# returns favicon.ico as png, caching for next time
sub fav2png($$) {
  my ($faviconDomain, $fh) = @_;

  # set filehandle to binary mode;
  binmode $fh;

  # create cache directory if needed
  if (! -d "../img_cache") {
    mkdir("../img_cache", 0755)
      or die "Cannot mkdir ../img_cache: $!";
  }

  # get cached filename for this favicon url
  my $cacheFile = safeFile("../img_cache",$faviconDomain,"png");

  # purge old version
  my $cacheExists = purgeOld($cacheFile);

  # does cached image exist?
  if ($cacheExists) {
    # write cache out to file handle
    if(outPngFile($cacheFile, $fh)) {
      # success
      exit;
    }
  }

  # download and output
  downloadAndOut($faviconDomain, $cacheFile, $fh);
}

sub downloadAndOut($$$) {
  my ($faviconDomain, $cacheFile, $fh) = @_;

  # download favicon to temporary file
  my $faviconUrl = "http://$faviconDomain/favicon.ico";
  my $tmpFile = safeFile("../img_cache","favicon",$$);
  LWP::Simple::getstore($faviconUrl, $tmpFile);

  # read in downloaded file
  my $img = Imager->new;
  my $needDefault=1;
  if(-e $tmpFile) {
    $needDefault=0;

    # read in downloaded file
    $img->read(file=>$tmpFile)
      or $needDefault=1;
  }

  # read in default file if have to
  if($needDefault) {
    my $defFile = "fav_default.png";
    $img->read(file=>$defFile)
      or die "Cannot read $defFile: ", $img->errstr;
  }

  # remove temporary file
  unlink $tmpFile;

  # write out to file handle; other possible image types include gif and jpeg
  my $type = "png";
  $img->write(fh=>$fh, type=>$type)
    or die "Cannot write image to file handle: ", $img->errstr;

  # purge old files
  my $numCache=purgeOld("../img_cache/*.$type");

  # don't cache any more if over max
  my $maxCache=200;

  if($numCache < $maxCache) {
    # write out to cache
    $img->write(file=>$cacheFile, type=>$type);
  }
}

# writes cached file to file handle
# returns true if successful
sub outPngFile($$) {
  my ($file,$fh) = @_;

  # open png file
  open(PNG,"$file")
    or return 0;
  binmode(PNG);

  my $buffer;
  while (read(PNG, $buffer, 8 * 2**10)) {
    print $fh $buffer;
  }

  close PNG;
  return 1;
}

# clear out old files from the cache which match a pattern
# returns number of remaining files
sub purgeOld($) {
  my ($filePattern) = @_;
  my $maxDays = 30;
  my $numLeft = 0;

  my $file;
  foreach $file (glob($filePattern)) {
    if (-e $file) {
      if (-M $file > $maxDays) {
        unlink($file);
      }
      else {
        $numLeft += 1;
      }
    }
  }

  return $numLeft;
}

# ensures filename is safe
sub safeFile($$$) {
  my ($dir,$file,$ext) = @_;

  # remove unsafe chars from file
  $file =~ s/\W+/_/g;

  # make extra sure of .
  $file =~ s/\.+/_/g;

  # remove multiple _ from file
  $file =~ s/_+/_/g;

  return "$dir/$file.$ext";
}

1;

Simple usage

The simplest usage is to call the script directly as the image source:

<img height="16px" width="16px"
   src="http://www.sectorprime.com/cgi-bin/fav2png.pl?fav=<DOMAIN>"/>

Faster loading

If you have a lot of fav2png images on the same page, there can be a small delay while the perl script serves up the current version. In this case, you can use javascript to first load the previous cached version directly, and then let the perl script give you the current version. I've used the script/noscript construct to handle browsers with javascript disabled:

<html>
 <head>
  <script src="http://www.sectorprime.com/common/fav2png.js"
   type="text/javascript"></script>
 </head>
 <body>
  <script type="text/javascript">writeFavImg('<DOMAIN>');</script>
  <noscript><img height='16px' width='16px'
   src='http://www.sectorprime.com/cgi-bin/fav2png.pl?fav=<DOMAIN>'/></noscript>
 </body>
</html>

The source for fav2png.js is shown below.

Faster loading with hyperlinks

Finally, here's the HTML for faster loading, with the images hyper-linked to the domain:

<html>
 <head>
  <script src="http://www.sectorprime.com/common/fav2png.js"
   type="text/javascript"></script>
 </head>
 <body>
  <script type="text/javascript">writeFavLink('<DOMAIN>');</script>
  <noscript><a href='http://<DOMAIN>'><img height='16px' width='16px'
   src='http://www.sectorprime.com/cgi-bin/fav2png.pl?fav=<DOMAIN>'/></a></noscript>
 </body>
</html>

fav2png.js

And here is the source for fav2png.js:

// fav2png.js

// usage:
//  <script type="text/javascript">writeFavImg('<DOMAIN>');</script>
//  <noscript><img height='16px' width='16px' src='http://www.sectorprime.com/cgi-bin/fav2png.pl?fav=<DOMAIN>'/></noscript>

// writes image tag that looks like this:
// <img class='fav2png' height='16px' width='16px' alt='<DOMAIN>' src='<OLD_CACHE>'
//  onload="fav2png(this,'<DOMAIN>')" onerror="fav2png(this,'<DOMAIN>')"/>
// so the initial image is the old cache, but this is then updated.  Looks much faster, especially on Internet Explorer.
function writeFavImg(domain) {
 var cachedImg="http://www.sectorprime.com/img_cache/"+domain.replace(/[\.-]/g,'_').replace(/__/g,'_')+".png";
 document.write("<img class='fav2png' height='16px' width='16px' alt='"+domain+"' src='"+cachedImg+"' onload=\"fav2png(this,'"+domain+"')\" onerror=\"fav2png(this,'"+domain+"')\"/>");
}

// writes image tag (see above) in a hyperlink
function writeFavLink(domain) {
 document.write("<a class='fav2png' href='http://"+domain+"/'>");
 writeFavImg(domain);
 document.write("</a>");
}

// updates image to use latest fav2png image
function fav2png(img,domain) {
 var fav2pngSrc="http://www.sectorprime.com/cgi-bin/fav2png.pl?fav="+domain;
 if(img.src != fav2pngSrc) {
  img.src=fav2pngSrc;
 }
}

If you have any problems using this resource, or any suggestions on how it could be improved, please feel free to contact us.