FAVICON- A short tutorial

24/Sep/2009

As part of establishing your “brand” as a blogger (or marketer, business or commercial website) you need to pay special attention to the consistency in which you present your image. This includes what people see in the tab of their browser when they are on your site.

image

image

The “FAVICON” or Fave Icon if you’re a human, helps identify your site in the URL and in a tab. Originally Favicons appeared on the bookmark menu when you “favorited” a site. (Thus the name)

To make a favicon there are several methods and tutorials you can use.

If you already have an image or logo that would look ok at 16x16 pixels:

(Example)

image

image

Use these online tools to create your favicon out of an image

http://www.html-kit.com/favicon/ *note, this tool also uses your twitter icon if you’d prefer.

http://tools.dynamicdrive.com/favicon/

You’ll notice your file becomes a “.ico” file. This is an “icon” file that IE requires in order to display the icon correctly in the toolbar and bookmarks menu.

You can also DOWNLOAD A PHOTOSHOP PLUGIN to create your own favicon.ico (Be sure you save it with that file name. You know how IE is when you don’t do what it needs.)

Be sure you size it at 16px x 16px
*Note: You can also save it as a 32px x 32px icon for bookmarking purposes. This will automatically get scaled to 16x16 for the URL bar.
*This is the method I used on my site.

image

If you don’t already have an image

You can use some online tools to create a new favicon.ico:

http://www.degraeve.com/favicon/

Or you can download some of the ready made ones.

http://www.freefavicon.com/

http://www.loreleiweb.com/faviconz.htm

Placing the Faveicon.ico on your server.

Use your FTP program to place the image on the root level of your domain. (Example: http://blogher.com/ or http://mrsflinger.com”)

You’ll be able to acess it by going to http://yourdomain.com/favicon.ico

*Yes, it is possible to put the image elsewhere on the server like some Wordpress Themes do. However, browsers don’t always recognize this method so for consistency, it’s best to place your icon at the root.

Placing the Faveicon.ico on your server.

Place this code between the

< head >  and < /head >

tag in your header template.

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

If you want to use a GIF or PNG instead, use this format instead (just remember that it won’t work in IE):

<link rel="icon" href="/favicon.png" type="image/png">

<link rel="icon" href="/favicon.gif" type="image/gif">

And VIOLA!

image

Hi

3 guests here now.

Comments

  1. I love when you get all layman’s terms geeky for the masses.  You’re good at it.  I’m like, “I’ll just do it for you.”

    By Karen Sugarpants on 2009 09 24

  2. You realize that this kind of thing is why people like me hire people like you.

    By Amie aka MammaLoves on 2009 09 24

  3. Great tutorial about Favicon, Thanks.

    By vijay on 2009 09 27

  4. omg, my head hurts just LOOKING at that sexy code.

    Can I whip mah tittays at you to get you to do it for me???snort

    By VDog on 2009 09 29