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

  If you have found this page useful, please consider donating. Thanks!

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.

Pages: [10] 9 8 7 6 5 4 3 2 1 » Show All

Pages: [10] 9 8 7 6 5 4 3 2 1 » Show All

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.