Brand your site with a favicon

Favicons are those eye-catching little pictures that appear in your web browser’s address bar, favorites list (hence the name favicon, short for “favorites icon”), and, with modern tabbed browsers, on tabs.

Instantly recognizable when designed well, favicons represent the brand identity of sites that use them.


Examples

Wikipedia uses the “W” from its logo:
Wikipedia’s favicon

Digg’s favicon represents a person holding a shovel, an image that seems to have been created especially for the favicon:
Digg’s favicon


Usability in a tabbed, multitasking world

Tabbed browsers, such as Firefox and Internet Explorer 7, can show many page-tabs at once, squishing a site’s descriptive text.
Below are examples of tabs without favicons. What sites are they? I don’t know.
FireFox tabs without favicons

These have favicons. At a glance I see a seated robed figure (meditation site), a stylized “Ti” that I recognize as my private TikiWiki site, and a picture of me, which (if I can stop admiring its beauty for a moment), I know represents my blog.
FireFox tabs with favicons


Create your own mini work of art

Favicons are ordinary graphics, generally 16×16 pixels in size, named favicon.ico. How to make them? I found an easy method that even non-artists can use.

The free site FavIcon from Pics allows anyone to convert a normal-sized graphic into a favicon. Instructions:

  1. Go to FavIcon from Pics.
  2. Click the “Browse…” button to select an image from your computer’s hard drive.
  3. Click “Generate FavIcon.ico.”
  4. After a few seconds, the site will show a preview image and a download link.
  5. If you are pleased with your creation, download favicon.ico to your computer. Then transfer that file, via FTP or your preferred method, to your website’s root folder (often /public_html or /www).
  6. View your website with its new addition! (You might have to press the refresh button to make the favicon appear.)


Show your art

If this article inspired you to create a favicon, please add a comment here with the link to your newly enhanced site.

This entry was posted in Usability, Web development. Bookmark the permalink.

5 Responses to Brand your site with a favicon

  1. Deborah says:

    I wanted to create a favicon for my husband’s website, and your article provided easy to follow instructions. For others that may use Fav Icon from Pics, I suggest that you start by cropping your source picture into a square. You can see our fav icon at http://www.robsnotebook.com.

  2. Susan says:

    The instructions worked flawlessly. Thanks, Alan!

    Now, if I could just get the rest of the page to load correctly, we’d be fine….

  3. Amit Shah says:

    How could I implement favicon in Zend environment. Favicon should be in root folder while zend denied all files except index.php from the root.

    Would appreciate your reply.

    Thanks.

  4. Alan Seiden says:

    Yes, place the favicon in your document root along with index.php.

    Apache should be configured to allow static (non-PHP) files such as .ico, .js and .gif. Here are the commonly used directives:

    RewriteEngine on
    RewriteBase /
    RewriteRule !\.(js|ico|txt|gif|jpg|png|css)$ index.php

    Let me know if that answers your question.

  5. Hi there Dear, are you really visiting this web site
    regularly, if so after that you will absolutely take nice know-how.

  6. An outstanding share! I have just forwarded this onto a co-worker who has been doing a little research on this.
    And he in fact bought me lunch due to the fact
    that I discovered it for him… lol. So allow me to reword this….
    Thanks for the meal!! But yeah, thanks for spending
    some time to talk about this topic here on your site.

  7. Hello, I check your blogs like every week.
    Your story-telling style is awesome, keep it up!

  8. review says:

    I just like the valuable info you supply on your articles.
    I will bookmark your blog and take a look at
    once more here frequently. I’m moderately sure I’ll learn a lot of new stuff proper
    right here! Good luck for the following!

  9. I really like what you guys tend to be up too.
    Such clever work and exposure! Keep up the good works guys I’ve
    included you guys to blogroll.

  10. It’s an remarkable paragraph in support of all the
    web users; they will get benefit from it I am sure.

  11. This design is steller! You obviously know how to keep a reader entertained.
    Between your wit and your videos, I was almost moved to start
    my own blog (well, almost…HaHa!) Great job. I really enjoyed what you had to say, and more than that, how you presented it.
    Too cool!

  12. Expert plastic extrusion companies serve the vital function of
    creating specific shapes out of hard plastic that are used to make various other products like tubing, casing, and more.
    * Ram Extruder. These heaters are good at absorbing as well as
    dispersing heat energy.

  13. To understand the process that plastic extrusion companies use to manufacture their
    own products, you have to have some knowledge of chemistry and an understanding
    of the complex machines that are used in the manufacturing
    process. a ceramic heater the current is automatically minimized.
    The screw must also be designed to suit a specific type of die.

  14. I’m not that much of a online reader to be honest but your
    sites really nice, keep it up! I’ll go ahead and bookmark
    your website to come back later. All the best

Leave a Reply

Your email address will not be published. Required fields are marked *