Tweet

The Ultimate Guide to Create Favicons

Guest post by: Thomas Carson

Article Overview: Help you to create your own favicon and install it to your website step by step. Additionally, you'll learn all the information about favicon, including some advanced tricks.

The Ultimate Guide to Create Favicons

What is a Favicon

A favicon is a small 16x16 pixels image that is shown on the browser's address bar and bookmark menu, associated with a particular web site or web page. Additionally they're often displayed next to the site's title in a user's list of open tabs making it easier to quickly identify amongst other sites. Although many modern web browsers support favicons saved as animated GIFs, JPEGs, PNGs or other popular image file formats all versions of Internet Explorer still require favicons to be saved as .ICO files (a Microsoft icon format). So the safest format of favicons is a .ico file.

The name "Favicon" (short for "Favourites Icon" or "Favorites Icon" for Americans) is derived from the bookmark list of Microsoft Internet Explorer which is called Favorites list. When you add a website or url to your Favorites list, Internet Explorer (version 5 and above) asks the server if it has a file called favicon.ico. If exists, this file will be used to provide an icon that is displayed next to the bookmark text.

For common web browser users, favicons are very helpful to quickly identify a site amongst other favorites sites; For web designers, it is a good way to brand their sites and increase the prominence in the visitor's bookmark menu.

How to Create Favicon

To create a favicon.ico, simply create a 16x16 graphic (in PNG format, for instance) in the image editor of your choice and convert it to an icon file with a favicon converter. The 16x16 size is the minimum requirement that most browsers used. Of course, if you want, you can add more images to the same icon resource to provide alternative resolutions. Most browsers only use a 16x16 image but in a different context (e.g. when you drag a URL from the address bar onto your desktop) a larger 32x32 pixels or 48x48 pixels icon may be shown. If the icon resource only contains a 16x16 image, it will be scaled to the appropriate size, so technically there is never a need to add alternative resolutions. However, doing so can increase the quality of the displayed icon.

Keep in mind that for a user with a slow modem a favicon.ico may increase the page loading time by a few seconds if it is too large, so don't overdo it. Adding a 32x32 alternative should be enough to make sure the image will look good even in contexts with larger icons. Adding even more and larger alternatives is unnecessary bloat. You may try to keep the number of colors below 256 or even 16 if your image is simple enough. This will result in a smaller file that loads faster.

Another problem is when you create the images to include in your favicon.ico, don't forget that the icon may be composed against various background colors so you should use transparency rather than a solid background if you want to avoid that your icon appears inside a box. Icon images with a none-32bit color depth only support binary transparency, i.e. a pixel may be visible or invisible but not something like 40% translucent. Only the 32bit color depth (24bit true color plus 8bit alpha channel, introduced from Windows XP) supports the semitransparence effect.

Installing Your Favicon

After you've created a neat favicon, it's time to add it to your site. To do so, follow the below simple procedure:

1. Upload the generated icon file (must named "favicon.ico") to the root directory of your site. Most browsers will automatically detect and use the favicon.ico file, even on pages that are written in PHP, ASP, etc.

2. It has been suggested that both of the following HTML lines should be included in the HEAD section of your pages, at the very least, your site's main index page:

[link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /]

[link rel="icon" href="/favicon.ico" type="image/x-icon" /]

That's it! Note that your favicon may not appear immediately after you've completed the above two steps. In fact, it may take a few days, and in IE, sometimes the favicon will disappear from time to time due to a browser bug.

More About Favicons

Different favicons for each of your web pages:

To add a custom favicon for a non-homepage web page, upload it to the same directory of the web page. That is the first place a browser will search. If it doesn't find an icon there, it checks the top-level directory of the server, so by putting it there you can have a default favicon for all the pages in your site. Depending on browser and configuration, the favicon.ico is not always rendered, even if it is in one of the above locations, unless the web page explicitly declares its presence. To declare that your web page has an icon, you add the following two lines into the HEAD section of your page:

[link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /]

[link rel="icon" href="favicon.ico" type="image/x-icon" /]

Other image formats than ICO:

A favicon can usually be in any image format supported by web browsers, the major exception being Internet Explorer, which only supports ICO. The .ico file format will be read correctly by all browsers that can display favicons.

Histroy of Favicon:

Originally, Internet Explorer only used favicons for bookmarks, which created a minor privacy concern in that a site owner could tell how many people had bookmarked their site by checking the access logs to see how many people downloaded the favicon.ico file. However, since newer versions of Internet Explorer and most other browsers also display the favicon in the address bar on every visit, that concern may no longer be relevant.

Issues of Favicon:

Most modern browsers implement both methods to request favicons. Because of this, web servers receive many requests for the file "favicon.ico" even if it doesn't exist. This may annoy web server administrators by creating many server log entries, and unnecessarily loading the disk, CPU, and network. Another common problem is that the favicons may disappear if the browser's cache is emptied.

Related Articles
  Logo Design & Your Favicon: Spotlight Your Brand Online
  "The Ultimate Question"-Answered
  The Ultimate Journey
  Pragmatic Optimism
  Top 10 SEO Optimization Techniques
  Setting Goals
  The Ultimate Financial Plan
  The Ultimate Gift
  4 Online Marketing Strategies To Give Attention To
  Internet Home Businesses - Email Marketing
  Selling Is All About The Whys
  Lead Generation & Marketing Automation How-To Guide
  Freeing the Voice Within
  The Secret - Sales and Marketing Training
  Obtaining Home Staging Client Testimonials
  How to Create a Favicon for Your Web Site
  Eleven Strategic Steps To Success, According Your Strategic Thinking Business Coach
  A Leader's Guide to the Galaxy
  TIPS OF WRITING EFFECTIVE MISSION STATEMENT THAT FITS WITH YOUR ENTIRE MARKETING STRATEGY
  Your Squeeze Page Could Be More Effective – Here’s How

Article Tags: create favicon, favicon converter, favicon creator, favicon generator, favicon maker



Related Forum Posts
Good Adwords Books? - I've just purchased "Ultimate Guide to Pay-Per-Click Advertising" by Richard Stokes. Has anyone read it, and if so what do you think? Does anyone have any other recommendations for books relating to Adwords? Thanks,
Re: Bye Bye Vista - [quote="RussellWebb":3q55cgov]I've been cleaning house...Finally rid myself of this atrocious operating system called Windows Vista. Eeeegads! It's good to have a nice clean computer again - all reformatted and shiny new! Windows XP has been reinstalled and Vista is in the trash can. Vista is a bomb... plain and simple. ..[/quote:3q55cgov] Where do I begin... I love Vista Ultimate on my personal laptop, but when I tried to integrate my Vista Ultimate laptop into the local area network here at work... Let's just say Vista couldn't quite take on the challenge of a network log-on and killed itself. I have since formatted Vista and vowed to keep my Vista at home, XP here at work. I have an XP desktop and I'm having an older laptop of mine reformatted into an XP Pro laptop for when I need to VPN in to work (as it turns out, Vista and my office network don't really like to VPN, as it is currently.) Vista is a lot of fun for personal use, but it's an abysmal atrocity for work use.
Getting links from the giants - Hi Kevin - it's simple - what do you have to offer them? What kind of compelling reason can you give them to link to you? According to my Google Webmaster Central Tools I have a total of 15,937 links to my site. 4,523 of them go to my homepage while the remaining 11,414 go to various pages on my site. My last sitemap indicated that I have 34,789 pages of content on my website so, excluding the homepage, I have about one link for every three pages of content. I think it’s important to also note that I don’t do any link buying and never tell people what anchor text to use when they link to me. I always suggest that they use whatever text they feel best describes the page they are linking to on my site (if everyone links to you with the same anchor text you can get penalized from Google). Having great content is one way to build links but usually you also need to take an active approach to marketing yourself. Can you build a section on your shoe site along the lines of "The Tennis Player's Ultimate Guide To Buying Shoes" where you talk about all the different considerations someone needs to make before buying shoes - and then at the end recommend Nike? In return Nike links to the site because it's a 3rd party endorsement of their products. Many big companies have News sections on their sites and always love showing off good news - you just need to find a way to give them something worth showing off!
Need a book recommendation for writing better - I'm always looking for ways to improve my writing skills, so I was just wondering if anyone could recommend a good copywriting or copyediting book? I was actually thinking of reading "The Copywriter's Handbook : A Step-by-Step Guide to Writing Copy That Sells" by Robert W Bly [u:w3cg00nn]OR[/u:w3cg00nn] "The Copyeditor's Handbook: A Guide for Book Publishing and Corporate Communications" by Amy Einsohn. Would anyone know if these books are any good? Thanks
Rich Schefren on Business Systems Video - Bigjim, 1. Create a systemized business 2. build accountability into your team 3. document your processes


Share this article with your friends. Fund someone's dream.

Leave a comment below or share on the left and you'll help support entrepreneurs in Africa through our partnership with Kiva. Over $50,000 raised and counting - Please keep sharing! Learn more.

Newsletter

Get advice & tips from famous business
owners, new articles by entrepreneur
experts, my latest website updates, &
special sneak peaks at what's to come!

Name:
Email:

Popular Articles

Why Use an Advertising Agency

Purchasing Real Estate using the SBA 504 Loan

Suggestions

Email us your ideas on how to make our
website more valuable! Thank you Sharon
from Toronto Salsa Lessons / Classes for
your suggestions to make the newsletter
look like the website and profile younger
entrepreneurs like Jennifer Lopez.