How to Make Your Own Website
 Home  The Blog  Free Downloads  Recommended Resources  Contact Us  About  Guarantee  Privacy  Terms of Use  Site Map


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 "hows":

Tab Icon: What Is It?     Tab Icon What

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 arrows below:


Tab Icon Firefox


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?     Tab Icon Why

There are a several reasons you should have your own tab icon that represents your website.  Here are the most important ones:


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 field.


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 influenced.


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, reason:


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     Tab Icon How

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 see. 


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  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 details.


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: favicon.ico.


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 (where 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 pages:


<link rel="Shortcut Icon" href="/favicon.ico">


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     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 Icon


Bookmark and Share

 UnderstandWebsites Fan   Understand Websites