Image Favicon

Image Favicon

It is easy to add a favicon to your site. A working example is located at 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.


  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.



Create HTML file called INDEX.html

        Copyright 2010 Edward <>
        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
        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"
<html xmlns="" xml:lang="en" lang="en">

	<title> 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" />

	<h1> Test for favicon</h1>
	<p>More Information about Favicons can be obtained from <a href=””>Wikipedia Favicon Information</a></p>

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

Testing Favicon

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


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

Tags: , , , , , , , , ,

This entry was posted on Friday, July 30th, 2010 at 8:22 pm and is filed under Tips & Tricks. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response to “Image Favicon”

  1. Image Favicon Video 0005 Says:

    August 1st, 2010 at 3:10 am

    […] Video for the image favicon article. […]

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>