Sometimes it’s the little things that count in making a good first impression. Favicons fall into that category.
What’s a favicon? A favicon is that little 16 pixel square image that captures a recognizable bit of your brand and presents it at the beginning of your website’s address (URL) in a web browser’s address bar or preceding your site’s name or description in a browser’s tab. Here’s how TheeBootCamp.com’s icons appear in the Firefox browser:
Why Do Favicons Matter?
Why are they important? Simple. The web is about visibility and, for visitors finding you from search engines, answering the question, “Am I in the right place?” An identifiable favicon is the first element of your brand that a visitor encounters. It basically answers that question with a, “Welcome! You’re here.”
We mentioned that a customized favicon helps to identify your brand. Take a look at the browser tabs below where only favicons are displayed and see how many organizations you can identify from theirs’…
Famous Favicons
To understand how much information a little thing like a favicon can convey, take a look at the following well known brands represented only by their favicons. How many brands can you identify from the image? (Click the image to get the key).
- Click for Favicon Key
How did you do? I’m guessing that you successfully identified most if not all of the brands based on their favicons. The exception, of course, is the last brand which mysteriously does not employ a favicon…
Make Your Own Favicon in 4 Easy Steps
Take a look at your website now. Do you have a favicon that kicks your online branding off to a good start? If you don’t, we’ll help you change that now.
You can easily create and use your own favicon instead of the generic one provided by your website hosting company. It’s pretty easy, a 3 on the geek-o-meter scale, and consists of just a few basic steps.
(The following instructions assume that you have access to your logo files in web-friendly format; a graphic file with a *.jpg, *.gif or *.png extension.)
Step 1: Decide which part of your logo you’ll use for your favicon. Remember, your icon will only end up occupying 16 square pixels so simple is better. You don’t need to limit yourself to 16 pixels when creating your icons source file but it’s a good idea to create a square image.
As you noticed, we used the ‘e’ from eBootcamp to create our favicon.
Step 2: Use a simple image editing program to crop out the parts of your logo you don’t want to use. Microsoft provides a free image viewer and editor, called Picture Manager, with versions of Office. You can use a commercial editor like Adobe Photoshop or one of the many, free online image editors available. One of my favorites is Picknik.
- Turning eBootCamp into ‘e’
Step 3: If your graphics program allows you to save your file as a favicon then save (or export) your new file, calling it favicon.ico. No other name will work! If you can’t generate icon files with your image editor then point your browser to favicon.cc and use their free tool to import your image and convert it to your own, personal favicon.ico…
- favicon.cc lets you easily create a favicon.ico file
Step 4: Now that you’ve created your own favicon.ico file, you’ll need to log in to your website hosting account and upload your file to your site’s root directory. Chances are there will already be a generic favicon present that was supplied by your web hosting company. Just overwrite this file with yours and voilà, you’ve successfully extended your brand online – if only just a little bit!
The above image shows our favicon before we created and uploaded our very own custom eBootCamp favicon file. Which, do you think, represents the eBoot Camp brand better?
