Image Favicon

It is easy to add a favicon to your site. A working example is located at http://ojambo.com. The favicon is used to distinguish your website. Warning! This article contains screenshots.

Graphical package for mock-up
Text editor for creating and modifying the website header html information.
Web server
HTML
Knowledge of the image to be served.

ImageFavicon.svg

Run Inkscape.
Show Document Properties are 400 x 400.
Zoom in Tool -> Zoom to fit drawing in window.
Layers -> Layer -> Move Offscreen.
Object -> Align & Distribute -> Move Offscreen.
Rename Layer -> Background.
Drag In Empty Button -> Align horizontally/centre.
Lock Layer Background.
New Layer -> Text -> O, Font-size = 350px, White.
Duplicate O -> Black, Blur = 2.0, Lower Down, Move down manually for 3D-effect.
Export -> Page -> 32 x 32px.
Drag Ojambo_ImageFavicon_0005 to test folder.
Rename Ojambo_ImageFavicon_0005 -> favicon.png.

Create HTML file called INDEX.html

<!--
        index.html
        
        Copyright 2010 Edward <http://ojambo.com>
        
        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 2 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.
        
        You should have received a copy of the GNU General Public License
        along with this program; if not, write to the Free Software
        Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
        MA 02110-1301, USA.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Ojambo.com Favicon Test</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 0.18" />
	<link rel="icon" type="image/png" href="favicon.png" />
</head>

<body>
	<h1>Ojambo.com Test for favicon</h1>
	<p>More Information about Favicons can be obtained from <a href=”http://en.wikipedia.org/wiki/Favicon”>Wikipedia Favicon Information</a></p>
</body>
</html>

The location of the favicon is specified with a link tag.

Testing Favicon

The favicon should show up immediately on the the index page.

Place the favicon in an easy to remember location such as the root directory.
Use image formats which are cross-browser compatible.