Favicon Basics

favicon Favicon Basics
It’s interesting, but true. You probably don’t even think twice about your site Favicon’s, but you should. It’s your brand. For those that don’t know, the Favicon is the little logo you see in the address window or when you add a website to your favourites. Our’s is the little 8 you see above.

Also, believe it or not, people take their Favicon’s seriously, just look at all the talk over the change of Google’s Favicon.

So what is an ICO File?
The ICO file format is an image file format. A favicon ( short for favorites icon), is also known as a website icon, shortcut icon, url icon, or bookmark icon. In this incarnation, it’s a 16 x 16 pixel image universally used by all modern browsers to identify a website. The image should be saved as favicon.ico to allow for ease of detection.

How to create a favicon?
The image can be an ICO, PNG or GIF which you save in the ICO format at a size of 16 x 16 in a software such as Ifranview
or Photoshop. You can also use an online Favicon Generator. Test out the image so it’s clear and make sense at the small size.

How do your get your favicon to show up?
Load the favicon.ico to the root directory and place the below lines in your header:

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

Remember, the Favicon is about brand awareness. It should be something memorable, something easy on the eyes, something that represents your brand and something of quality. Make sure to take time to think about how you want your site to be represented. Your favicon is a split-second way to grab a users attention among their bookmarks, so make sure it counts!

Print This Post Print This Post
Saturday, January 24th, 2009 at 21:49
No comments yet.

Leave a comment

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