There are many elements of which a good website should consist of and one of these not often spoken about is the humble favicon. Sitting in your browsers address bar as a 16 x 16 pixel image the favicon is often the first impression a user gets of your sites brand. There was a time when your favicon would only appear once in the address bar, now however your favicon appears in your bookmarks, links to RSS feeds and various other places, so again the favicon is further responsible for that first impression.
What makes a good Favicon..
Tips for a good favicon are similar to that of producing a good logo. Firstly the graphic needs to be scalable; so if you are working on a 64 x 64 pixel canvas initially this needs to be visually effective once it has been scaled down to 16×16px. The favicon may even be a chance for you to develop your brand; many smaller companies have no real brand guidelines and maybe only one variant of their logo. Using a favicon however gives a chance for a brand to express itself in it’s purest form.The key to this is to make your favicon as simple as possible whilst still portraying your company’s image. For a more complex logo simply scaling it down into your favicon may not be enough; also on some logos there are no discernable design elements on which to base the favicon. In this instance I would advise using one or max 2 key letters in the brands font and presenting these in a graphical box. IE. For JoeBloggs.com you could use the letters JB in a coloured square.
Include your favicon in brand guidelines..
In the future I suggest making it standard practice to have a section on your favicon in the brand guidelines (If you are responsible for these), if however you aren’t then hopefully this technique will go mainstream in the future. If you are struggling for inspiration some of the best website favicon can be found at David Burkas website: www.deltatangobravo.com/archive/2004/march/favourite .
How to create a favicon…
To create your favicon simply save it as a jpeg file and upload it to your chosen faviocn generator website which will then convert it to an ico file; now simply put this ico file in the root level of your website and paste in this code into each page <head> file of each page (preferably in an include file):
<link rel=”icon” href=”http://www.appointmentrooms.com/favicon.ico” type=”image/x-icon” />
<link rel=”shortcut icon” href=”http://www.appointmentrooms.com/favicon.ico” type=”image/x-icon” />
Just remember first impressions are vital and by not including a favicon in your site you are creating an unprofessional first impression. Here at IHM we make the favicon a core part of the web design process in order to help make your website as successful as possible. Remember it’s all in the detail…
Tags: Branding, Favicon, Logo Design, web trends
|
|
