|
Step One: Introduction to Creating a "Favicon" |
Favicon (Pronounced fav-eye-con)
The term "favicon" refers to a small icon image that is used to display your company logo in the left hand side of the address bar of your visitor's browsers, like this:
In this section we are going to look at 3 different ways to use favicons to generate awareness of your company logo.
Favicon Display Option #1:
Shown above on the left of the web site address is the red CNN favicon. In addition to being used there, the favicon is also used two other ways.
In addition to the icon being visible in the address bar, you can also see it when you add specific web sites to your Internet Explorer Favorites or your Firefox Bookmarks.
Finally, the third way to see the icon is when you are "right clicking" on a hyperlink located on a web page and are choosing the "CREATE SHORTCUT" option.
The little red (16 x 16) "CNN" favicon is created from a basic image that's 16 pixels in height by 16 pixels in width.
You can create additional favicons to use on your site that are larger, measuring 32 pixels in height by 32 pixels in width.
(In the example above we are looking at a 16 x 16 pixel icon.)
Just to familiarize yourself with other favicons you may have seen and remember, here are a few more:
Surprisingly, there are more requests for a "favicon.ico" file on our server than any other page, which means people are bookmarking the page or adding to their favorites and the server tries to find the .ico file and if it can't, it shows as a "missing file".
So although the impact won't be great, there is room here to scoop up a few returning visitors who add you to their favorites or create a shortcut on the desktop.
|
Step Two: Creating Your Own Favicon |
The easiest way to create your own Favicon file is to use a free online generator.
Step 2.1: All you need to do is find an image you want to use for the icon.
For our example, I am going to use an image of a traffic sign.
-
Supported file formats: gif, jpg, png, and bmp.
-
Use a gif or png with transparency if you require it.
-
Maximum file size: 150.00 kB.
So find an image on your drive that you want to use. Make sure it's square if you can, and small.
Step 2.2: Go to this site:
http://tools.dynamicdrive.com/favicon/
Step 2.3: Browse your hard drive for the image.
Just click the BROWSE button, then look around on your hard drive for the image you want to use and select it.
Step 2.4: There are 2 checkboxes below the image. Check those off to see what your icon will look like as a SHORTCUT on the desktop.
Step 2.5: Preview your icon in the preview section:
Step 2.6: Click the submit button and when the page reloads, it will show your icon merged into the 2 desktop items with an address bar preview:
Step 2.7:If everything looks okay to you, just go ahead and click the download icon button:
From here you need to add it to your page so go to step #3.
|
Step Three: Adding the Favicon to Your Web Page |
You can add a favicon to your web page by uploading favicon.ico to your
website and inserting the following HTML tag inside the <head> section of your web page.
<head>
The code would be placed right here, inside your source code.
</head>
Here is a working example:
<head>
<link rel="shortcut icon" href="http://www.yousubscribed.com/favicon.ico" />
<link rel="icon" href="http://www.yousubscribed.com/favicon.ico" />
</head>
When that is entered into the web page code and then your site is added to the favorites or bookmarks, it looks like this:
When a shortcut is made to the page and the icon goes onto the desktop, this is what it looks like:
Unfortunately the whole word "dashboard" didn't appear and the background is a bit dark but when you look at the whole desktop itself, it looks pretty good!
|
Step Four : Validating Your Favicon File |
If you would like to test the favicon after updating your web page, the
Favicon Validator can check the favicon files and tags on your website.
http://www.htmlkit.com/go/favicon/validator/
