Image Favicon

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.

    Tools Required:

  • 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

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

Image2

Image2


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.

    Recommendations:

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