Tab Icon. Bookmark Icon. Favicon Icon. They're All the Same Thing. Here Is How to Get
and Use Tab Icons for Websites.
You should always be
looking for simple Website Improvements you can implement to better serve
your visitors and make a good impression. Creating a tab icon can do just that. Here is what you need
to know regarding the "whats," "whys," and
Tab Icon: What Is It?
Tab icons go by many names. A tab icon is officially called
a Favicon (short for favorite icon). But, they are also commonly referred to as bookmark icons, favorite
icons, website icons, and several other less-common names. They are commonly called tab icons because they
appear beside a website's title in browsers that support tabs.
If you use Firefox, these website icons will appear in the
bookmarks toolbar, the navigation toolbar beside the URL, and in each tab as indicated by the red
These are small 16x16 pixel icons. There is little detail
in them, but they are easily recognizable.
Tab Icon: Why Have One on Your Website?
There are a several reasons you should have your own tab
icon that represents your website. Here are the most important
1. Tab icons are easy to recognize. A
picture paints a thousand words. Think about all the products and brand names you buy. Do you instantly
recognize the product simply based on the appearance of the logo? Most people do. In fact, whole
advertising campaigns are dedicated to imprinting the visual representation of a product or brand name into the
mind of a consumer. Not having an icon that specifically represents your website puts you behind the
2. Tab icons give legitimacy. All the
big sites on the internet have and use tab icons. It is generally assumed. With a 16x16 pixel canvas,
it is difficult to wow anyone with brilliant displays of artistic creativity. But, you can under-impress
them. If you don't have a tab icon that identifies your website, people may be negatively
3. Tab icons simplify lists and keep visitors
happy. When people see a bookmark icon in their favorites list, they eventually stop looking for the
text. They identify the icon with your website and find it quicker by scanning for the familiar
image. The internet is constantly providing people with new tools. These tools are becoming
indispensable helps in people's busy lives. The bookmarks toolbar of browsers gets full when icons
and text are present. If you don't have a favicon icon file for your website, the only way to
distinguish it when bookmarked is by text. That can be quite annoying for people pressed for both time
and toolbar space. One tab icon can replace all text. Decrease toolbar clutter for
your bookmarking visitors!
4. Tab icons make your website easy to
re-locate. When your website makes it to someone's bookmarked-sites list, the favorite icon
will be there alongside. This small image makes it easy for that someone to see your website
and remember why they bookmarked it in the first place. Always make it easy for your customers to find
you. A quick scan will find your icon and lead to a click. Those clicks lead to the next, and ultimate,
5. Tab icons increase traffic.
Anytime you make it into someone's favorites list they are more likely to come back to your website.
When the favorite icon pulls their attention enough to click it, your traffic increases. The opportunity for
this to happen occurs every time they look in their bookmarks. So, keep reading and learn how to get a tab
icon installed and ready to go for your website.
Tab Icon: How to Get and Install Yours
Now, on to the development of your own tab icon. Walk
through these steps and you'll soon have your website icons displayed for the world to
1. Choose your design method. You basically
have two options: design it yourself (or modify an existing file) or download and use an already-created
one. Downloading and using one is obviously easiest. However, I recommend you create your own (or at
least personalize one by modifying it). You can use Photoshop, the default Paint program that comes with
Windows, or any other image editor. If you insist on downloading a cookie cutter icon, you can
do so here, here, or here.
Probably the easiest way to create tab icons for your websites is
to use the tools at Favicon.cc. Find a picture you like, upload it, it is automatically converted into a
favicon (tab icon), and then you can edit it as much as you like. Once finished, just click the button to
save the favicon.ico file to your desktop.
2. Design your tab icon. You can do this
several ways. You can design it pixel by pixel in the standard 16x16 pixel format. Or, you can
design it in a larger square and reformat it later. You lose any extravagant details when you
resize your creation down to the standard favorite icon size, so don't spend too much time on the
3. Resize your tab icon, if needed. If your
tab icon is 16x16 pixels, you can skip this step. If it is larger, you can either resize it with
Photoshop or use this handy online favicon generator tool. This tool will a standard format image of any size and convert
it into a properly-sized file with the correct ".ico" extension. With this tool, you can
skip the next step and go straight to step 5.
4. Save your image file as a ".ico" file. Many
of the newer image editing programs can convert an image into the tab icon format by using the Save
As option in the File menu. Older versions of Photoshop may require a
plugin. It is downloadable here. Make sure the final name for your file is exactly:
5. Upload your tab icon. After you have your
finished tab icon ready to go, you will have to upload to the appropriate directory. The directory is
usually the root ("/") directory or the directory where the website files are located (depends on which hosting
service you use - a common one is "/public_html"). If you aren't sure, you can always upload it to
both. Once uploaded, you should be able to access the file by typing
in www.yourdomain.com/favicon.ico (where yourdomain.com is actually the name of your
specific domain). It should be where your index.html (home page) is.
6. Make your tab icon display correctly.
Uploading the favorite icon alone will occasionally work. Some browsers search for this file automatically
and will display it if it finds it. Others, however, need code to tell them where to look. So, to
ensure that your tab icon is discovered and displayed correctly, copy and paste the code in the box into the
HEAD section of each of your webpages. If you have an html editing program like XSitePro, you can use the
Global Scripts (or similar function) to automatically apply it to all HEAD sections of all your
webpages. Highlight the code in the box below and copy it to the HEAD section of your
<link rel="Shortcut Icon"
A note here: you may need to verify that the <link>
reference matches the casing of your file if you are running a Linux system.
7. Verify your tab icon. Verify that you did
everything correctly by typing your website URL into this verification tool. If it checks out as valid but you still don't see your bookmark icon
appearing on your own browser, refresh your home page. If still not there, restart your browser. If
still not there, dump your cache, history, and temporary files and then restart your computer, and it
should appear when you next visit your home page.
Tab Icon: Conclusion
Have fun with it! Your tab icon is what will
represent you when it becomes a favorite icon or bookmark icon on the computers of (hopefully!) thousands of
people. Make it representative of your website! If you haven't yet, definitely get one. Not
having a tab icon is a demerit for any website.
If you have a WordPress blog, you can download a theme
that allows you to upload customized favicons, or you can download one of the plugins that allows you to manage
favicons for your blog.
If you are ready to keep up the pace, click the link to
learn how to Syndicate Your
Content with RSS. Remember, each of the Website Improvements you make will increase the likelihood of you Getting Website Traffic.
Copyright © 2009-2010, Issachar Knowledge, LLC: Tab