Image description

RACINEonline.com

Let's play   "What is..."

Disk Space

Cache / Caching

Domain

Favicon

HTML

Hyperlink

iFrame

Image map

Landing Page

Meta Tag

Navigation

Plug-In

Registar

Script

Template

URL

Web Standards

What is Favicon?

favicon

(pronounced: "Fave-icon")


A favicon is a small, iconic image that represents your website. Favicons are most often found in the address bar of your web browser, but they can also be used in lists of bookmarks in web browsers and feed aggregators.


Well-designed favicons are styled to match the logo or theme of your website, that way users have a quick and easy way to recognize your website at a glance.


What type of image is a favicon?

Although most modern browsers will recognize PNG, GIF, and JPG formats for favicons, Internet Explorer currently does not. It is recommended to use the Microsoft ICO format, which works in all browsers.


What size should my favicon be?

Another good reason to use the ICO format is because it can contain multiple favicons of different sizes in one ICO file. It is best to have, at minimum, a 16x16 pixel version. I usually include 32x32 and 48x48 versions as well. That way, if users drag the bookmark to their desktop they will see a nicely scaled version of the icon instead of the 16x16 version stretched out. 


The most common sizes for favicons are:

  • 16x16
  • 32x32
  • 48x48
  • 64x64
  • 128x128

How to create a favicon

Although there are many ways to create favicons, the easiest is to use an online tool.  We happen to use a favicon generator that's entirely free.  It's called Favikon.  To create your favicon using Favikon, simply upload an image, crop it, and then download the resulting icon.


How to link to your favicon

Now that you've created a nice little favicon, you need to tell web browsers and other applications where to find it. Adding this line to the <head>section of your HTML will ensure that your favicon will be found:

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

The location of the favicon isn't really important, as long as the hrefattribute is accurate. Most favicons, however, are placed in the root directory (the directory that contains the homepage). Keep in mind that it is not necessary to have multiple instances of the same favicon on one website.


If you add a favicon without linking to it within your HTML, you may notice that some browsers will still find and display it. This only occurs if the favicon is in the root directory. It isn't good to rely on this method, so if you want to make sure that applications will see your favicon, <link> to it!