Welcome to Dagon Design. In addition to free scripts, WordPress plugins, and articles, we offer a variety of services including custom theme design, plugin creation, and PHP scripting. Contact me for more information.

Updated Friday, April 6th, 2007 at 12:00am

Favicon Generator

This free tool allows you to create a custom favicon for use on your website. Simply upload an image (JPG, PNG, or GIF - 100KB max) and it will automatically convert it to a standard 16×16 favicon. If you upload an image that is larger than 16×16 it will resize it for you, although for best results use an image that is already that size. Transparent favicons can also be created by uploading a transparent GIF.

What is a favicon?

A favicon, also called a ‘favorites icon’, is just a small image which is displayed for a website. It is often shown next to the address bar, in the favorites/bookmarks, and/or the taskbar. It is purely for looks, although it adds a nice touch to a website. Most modern web browsers automatically look for a favicon on every site you visit. If you have ever taken a look at your log files and seen a lot of requests for this missing file you will see what I mean (unless you are using one already). Not only will a favicon make your site look a bit nicer, but it will keep those (harmless) errors out of your log files.

Try it out

Changelog

  • 04-06-07 Transparent favicons can now be created (Just upload a transparent GIF)
  • 08-05-06 First version

Instructions

After you have generated your favicon and saved it to your computer, it must be renamed to favicon.ico (since the files this tool generates are given a random name).

The common method for using a favicon is to simply upload it to the root directory of your public web space. This is where most web browsers automatically look for it.

Just uploading the file is generally fine, but for the best support across various browsers, place the following lines in the head section of your HTML:

<link rel="icon" href="http://example.com/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon">

(where http://example.com/favicon.ico is the path to your favicon)

Be sure to add that code in all of your html files - not just the index.

Topic: Tools | RSS Feed

  1. 8
    HÃ¥kan

    Tried to upload a .gif image and got:

    returned an error: /usr/bin/png2ico /home/design/public_html/tool-data/favicon/1198415851.ico /home/design/public_html/tool-data/favicon/1198415851.png

  2. Thank you for this tool! It was great to use it for just that extra touch.

  3. This tool is really helping me! Thanks a lot! ^^

  4. Gephri: I just updated the script. You can now create transparent favicons. :)

  5. 4
    Gephri

    I think I really like Favicon Generator except for the fact that is adding a black background to the .ico image. Is there a way to make it transparent - and yes I am uploading a transparent to the Generator.
    thanks

  6. Hi mister Dagon.
    i’d never tolf that your favicon creator is a standard workout for me when i’m designing a new website. Great tool. Wish i had it for offering my visitors :) Great simple but usefull tool.

  7. [...] * Dagon Design - Favicon Creator - I used this site to create a new Favicon for both HART-Empire.com and HART-Network.com [...]

  8. [...] I just found a favicon generator and a wp plugin…and well, this is way too much fun…and also really cute. I am still so in love with my new wp blog…it’s sickening. I’ve still been trying new stuff…new plugins…that don’t always work for me. But hey…I now have favicons…so it’s all good. [...]

Leave a Comment

Before you comment: If you are having an issue with a script, please make sure you have read the entire article. Also, please read through the comments because most common issues have already been discussed many times. Thanks.


Be sure to wrap all code in <code></code> tags.