Creation and Using a Favicon on Your Site | Blogging, Small Business, Web Design & Hosting Tips - A Small Orange

Jazz Up Your Site with a Favicon

There are little things that you can do to make your site a little more spiffy, a little more professional, a little more polished. One of those things is the addition of a favicon.

So, what the heck’s a favicon? From Wikipedia:

A favicon (short for favorites icon), also known as a website icon, shortcut icon, url icon, or bookmark icon is a 16×16, 32×32 or 64×64 pixel square icon associated with a particular website or webpage.[1] A web designer can create such an icon and install it into a website (or webpage) by several means, and most graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page’s favicon in the browser’s address bar and next to the page’s name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page’s favicon next to the page’s title on the tab. Some programs allow the user to select an icon of his own from the hard drive and associate it with a website.

You can create a teeny tiny graphic pixel by pixel in your graphics program while squinting and desperately trying to make it look like something that has to do with the subject of your site, save it as favicon.ico, upload it to your home directory, and hope for the best.

Or you can use any one of the numerous free services on the Internet that exist to allow you to upload a picture, have it transformed into a favicon without the squinting and pixel by pixel painting, or conversely allows you to start with an uploaded pic and edit it pixel by pixel.

http://www.favicon.cc/

Favicon.cc allows you to upload a picture, or paint pixel by pixel with a little bit of help from them. It will also allow you to animate your favicon, and choose transparencies as well.

http://www.htmlkit.com/services/favicon/

HTMLKit (which is an extremely robust free code editor) has a favicon from images generator as well, though without the editing capability.

http://www.favicon.co.uk/

Yet another generator, and this one has a gallery so you can take a look at what others have done to give yourself some ideas.

A search for “favicon generator” in Google (or your search engine of choice) will bring up numerous places that will create favicons – the code that converts the image you upload can differ slightly on each of these sites, so its a good idea to have each of them render a favicon for you to see which system best renders your particular image.

Once you have the favicon.ico you want, you would upload it to the site in the home directory, or the same directory that houses your main index file, and then place this in <head> section of your web site code.

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

If you place it somewhere else, you’ll need to change the location.

If you have a favorite favicon generator, let us know!

  • Thanks guys. This article reminded me I needed to fix up mine!

  • Peter

    This is a great idea. I'd love to see more sites with these.

Stay Up-To-Date With ASO & Save 25%!