Author Topic: Create the perfect favicon  (Read 2016 times)


  • Administrator
  • VIP Member
  • *****
  • Posts: 1827
  • I want to show my performance at any where
    • View Profile
    • Higher Education
Create the perfect favicon
« on: May 12, 2013, 07:57:32 AM »


Create the perfect favicon
Create the perfect favicon
By Jon Hicks on December 20, 2011 | 3 comments

    Short url

Today Jon Hicks' much anticipated Icon Handbook, published by Five Simple Steps, is going on sale. We present an exclusive excerpt on creating favicons

This is an edited excerpt from Chapter 3 of The Icon Handbook by Jon Hicks.

Even if youíve never created any other types of icons before, Iím willing to bet that everyone reading this has at some point made a favicon. For the majority of you, itís probably a regular task. Theyíre an ideal place to start, as we can look at ways of achieving pixel-crisp artwork and clarity at small sizes.

ďA logo is a flag, a signature, an escutcheon, a street sign. A logo does not sell (directly), it identifies.Ē
Paul Rand

Favicons (also called shortcut icons) first appeared in Internet Explorer 5, where placing a favicon.ico icon in the root of a website would cause a 16px square image to appear next to the URL in the address bar and in bookmark lists, without requiring any HTML. Initially this had the added benefit of estimating how many times our sites were bookmarked by counting requests for the favicon, but this is no longer reliable since browsers started supporting the favicon for more than just bookmarks.

The difference between favicons and the kind of icons weíll tackle in the application icons chapter, is that thereís no deliberation over the correct metaphor here. Their purpose isnít to summarise an action or overcome language barriers, but to represent the site as a signpost and extend its branding into the browser. As such, it will almost always be a smaller version of the siteís logo. Fortunately, it is generally simpler to recreate a logo in sixteen pixels than an application icon.

While much larger sizes can also be used these days, a 16px version is essential and an ideal place to start if youíre new to designing icons. The skills you pick up from creating them will serve as the basis for the other types weíll be looking at later. If you can achieve clarity at this size, the rest will fall into place!

Even if youíve never created any of the other types of icons discussed in this book, I'm willing to bet that everyone reading this has at some point made a favicon and, for the majority of you, that itís a regular task.
Before you start

Before we start creating any icon, we need to know how and where it will be used, as that will affect how we create and deploy it. The subsections below will cover the different considerations:

    What is the context?
    What sizes are needed?
    Which formats are needed?

What is the context?

A favicon could appear on a variety of backgrounds, so we will need to use transparency to get the best option to fit all. It wonít always be displayed on a white address bar background Ė it may appear on Windows Aero glass, a grey Mac OS X UI, or a dark browser theme. Firefox 4 also adds a grey button background to favicons in its address bar; it is set slightly larger so it will always border the favicon.
What sizes are needed?

If you were to create a favicon for every possible use, the sizes you would need to create are:

    16px: For general use in all browsers, could be displayed in the address bar, tabs or bookmarks views!
    24px: Pinned Site in Internet Explorer 9
    32px: New tab page in Internet Explorer, taskbar button in Windows 7+ and Safariís ĎRead Laterí sidebar
    57px: Standard iOS home screen (iPod Touch, iPhone first generation to 3G)
    72px: iPad home screen icon
    96px: Favicon used by the GoogleTV platform
    114px: iPhone 4+ home screen icon (twice the standard size for the retina display)
    128px: Chrome Web Store
    195px: Opera Speed Dial
Acquire the knowledge and share the knowledge so that knowing,learning then sharing - all are the collection