How to: Create a Favicon
Why a little icon shouldn’t be ignored
Google has a new favicon, in true Google manner the new small “g” is only a beta version - open for suggestions according to the Google blog. Whether you love or hate the new favicon (I love it), it does remind us of the importance of this VERY little icon.
What is it?
A favicon (short for ‘favorites icon’), is a graphic image (icon) associated with a particular web page and/or web site.
Where will I see it?
It appears (on most browsers) at the left hand side of the URL in the address bar. It can also be displayed in the bookmarks or favourites (its original intention) and on the tab bar of the web browser.
Why should I have one?
No longer just an extra gimmick, a favicon is actually part of your site’s identity. It is the first thing a visitor will see – as the favicon is loaded in the head of a web page before the body content.
As I show you in this ‘How to’ it’s also extremely easy to make, so really the question you should be asked yourself is, “Why shouldn’t I have a favicon?”. I would like to note here that there are legitimate reasons for not having a favicon; if, for example a site is a sub-domain and doesn’t have its own unique branding, however these issues are not for this post.
How do I create a favicon?
1. Decide which part of your logo/identity you want to represent
A favicon is a 16 by 16 pixel image. Unless you have a very simple logo, you won’t be able to show it at such a small scale and still retain clarity. Remember, this is not your brand, it is just a visual aid to remind visitors of which website they are on. However it does need to be in-keeping with what you are communicating in the rest of your logo and branding.
Some tips: you will want to use a distinctive part of your logo – something which has identifiable colours and shapes.If the logo is text, you can use one letter (e.g. wikipedia and Google) otherwise use the image component of your logo.
It’s amazing how much creativity you can fit is such a small space. Smashing Magazine recently showcased 50 remarkable favicons.
2. Sharpen your image
At such a small size this is important for creation definition.
In Photoshop go to Filter > Unsharp mask and set to about 50%
3. Resize your image
You will need to crop so that the image has equal width and height. If your favicon is not equal dimensions you can leave transparent or coloured background around it. Alternatively you can crop the image so that the edges are chopped off. Smashing Magazine utilises this last method to great effect. To see the final effect resize to 16 x 16px.
4. Convert to .ico file
To use your image as a favicon it will need to be in .ico format. You can download plugins to generate this from Photoshop, or you can use an online convertor like Favicon Generator or favicon.ico Generator. One tip â?? some of these generators can make your favicon animated â?? steer clear of this feature!
5. Name favicon.ico and upload to the root directory of your website
This is where your index page resides. For many browser this will be enough or them to recognise this file as the favicon, but I highly suggest you add the following code to your webpages in-between the
tags
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
References
- Daily Blog how to create a favicon
- Smashing magazine showcases 50 remarkable favicons.
- Wikipedia entry: favicon.
- W3C methods for adding favicons to website.
- Plugins for ico format