Skip to: main content, sidebar content

The Making Of A Favicon

What is a Favicon?

"Favicon," short for "Favorites Icon," is an icon associated with a website, and chances are that you've seen them before.

Where have I seen a Favicon?

Here are four common places to find a favicon:

Example 1. Next to the URL in the address bar:

Favicon: Next to the URL in the address bar

Example 2. In the history, favorites, or bookmark list after a page is added:

Favicon: In the history, favorites, or bookmark list after a page is added

Example 3. By the page title in those browsers that have tabbed browsing:

Favicon: By the page title in those browsers that have tabbed browsing

Example 4. In the Windows Start menu after installing a program:

favicon_program.jpg

Why Use a Favicon?

Everyone's doing it! The use of favicons has grown to the point where the lack of a favicon can reduce the comfort level of online visitors.

Credibility and Branding
Using a favicon on your website is one of those small touches that goes a long way towards improving the overall quality of a website. For one, it adds credibility: that little icon can be a strong and reassuring indicator to your online visitors that they came to the right place.

It also has an important role in building your brand because it acts as an iconic representation of the site.

"In fact, favicons are fast becoming an import aspect of brand identity online. Nowadays, not having a favicon can reduce credibility. Remember, your favicon is often your visitors' first impression of your brand online. Make it a great one."

- John Williams, Entrepreneur.com

Ease of Use for Visitors
Using favicons can save your visitors time as they browse the Internet. It shouts "Here I am!"

When you look at a web page, your eyes notice an image before the text surrounding it. If you've bookmarked a website that doesn't incorporate a favicon, your web browser will place an icon of a blank page next to the name.

Example 5: A long bookmark list of sites showing only blank page icons and text can be a bit tedious to sift through:

favicons_blanks.jpg

If you've filed websites that use favicons, you can find the site you are looking for much more quickly by scanning your folders and bookmarks for those colorful images instead of reading the text of each title.

Creating a Favicon

Start by asking yourself this question: can you translate your logo symbol into a 16 x 16 format?  If you have not yet created your company logo, it's important to keep the favicon space in mind. Because of its size, a favicon does not allow for much detail. If you do have a logo design and it is too complex to reduce, you may have to edit it to fit the format.

  1. Make a 16 x 16 jpg or gif (or ICO of PNG) file using 256-color and save it as favicon.ico. Larger sizes can be used if you are creating an icon for another purpose, for example, as a shortcut icon on your desktop.
  2. Place the image in your site's root directory. Simply upload the file, favicon.ico, to the root web directory of your hosted website with, Microsoft FrontPage, Adobe Dreamweaver MX or your favorite FTP program.
  3. Inside your header, link to the icon:
    • <link rel="shortcut icon" href="http://yoursite.com/favicon.ico" type="image/vnd.microsoft.icon">
    • <link rel="icon" href="http://yoursite.com/favicon.ico" type="image/vnd.microsoft.icon">

After incorporating your favicon into your web design, when someone bookmarks your site, your favicon will appear in their browser.

CrossLink Suite. Less Maintenance. Better Marketing.

Request more details on how CrossLink can streamline your web content management and boost your online marketing at 1-888-242-5751.