A Blast From The Past – The Return Of The Favicon
Posted by Matt Davies on December 4th, 2006.
Matt Davies has posted 26 articles.
RSS Feed for Matt Davies
Favicons, you remember them, the little icons seen next to he URL on browsers such as Safari and Firefox. If you use Internet Explorer then you may have noticed them in your favourites folder. In short, they are tiny icons which help you to identify websites.
So why are we drawing your attention to Favicons – well, it was a huge fad about 5 years ago to add a Favicon to any website that came along. Designers loved them and they became the norm. However, over recent years, it seems to me, that this trend has dampened down a little. People are no longer adding them to their websites - even experienced web designers.
“Why”? You may ask – “I’m not sure” I reply, maybe we are just getting lazy, maybe the knowledge of how to add Favicons is being lost in the mists of time – or maybe we are choosing not to spend time on a small and almost insignificant icon but are rather concentrating on other, more important issues.
If you have the mindset of the first of these reasons – wake up and do some work, if the second – read on below to find out how to add a Favicon (it really isn’t that hard), if the third, let me say a few words in the Favicons defence – because someone’s got to stick up for them – they’re only small after all (16px x 16px poor things)…
As a graphic designer, I see Favicons as very important – especially when considering a brand. The more you can get your logo or colours in front of somebody – the more chance you will have of that person remembering your company. Favicons help to do this. Favicons also help to distinguish a company over their competitors – lets assume we are designing a site for an office suppliers. Our consumers may have a favourites folder containing 3-4 called “Office Supplies”. When they select this folder – if our website has a Favicon and the competition does not, their eyes will be drawn to our link and therefore we have more of a chance of getting some sales. Also they may recognise the brand colour over the competitors colours and select yours - there is less chance of confusion and a competitor getting a visit their site accidentally. Lastly I would like to add that Favicons are a mark of well thought out design. “The devils in the detail” they say – and so it is.
So ladies and gents, lets put a Favicon in out next website design – you never know, it may increase your chances of success…
How do I add a Favicon?
Its easy, really it is. All you do is open Photoshop – create a new file, about 50px by 50px, then drag in your clients logo and colour it up. Save for web as a gif to your desktop. Now go to chami.com and use their very helpful and free online Favicon service. You choose your picture from your desktop and this website resizes it and resaves it so you can download it.
Next download the Favicon and then upload it to the root file of your website.
On the pages you wish it to appear add the following code in the </head>:
<link rel="shortcut icon" href="favicon.ico" >
That’s it! Simple – you have no excuses now.
So keep an eye for the return of the Favicon… Any comments most welcome…
Make A Comment
( 12 so far )
12 Responses to A Blast From The Past – The Return Of The Favicon
Who isn’t adding them? I still see the Favicon as a norm — as a must even. Most people have been branded by their favicon!
If “designers” are not adding them, it must be laziness or ignorance — I can’t imagine anyone is making a willing decision to not include one.
I am with Martin, I still see them all over the place. Adding them is simple, and there are even more ways to add them than the above listed.
As someone who monitors and checks logs often, I add them just to rid the 404 from automated searches for the favicon and robots.txt file. You could omit the head link to the shortcut icon and it would still be picked up by most browsers or bookmarking applications (though its best practice to leave it in there - just making a note that it is checked by most anyway, just take a look at your logs)
I guess I never saw them fade in the first place…..
I think Safari 2 didn’t show the favicon next to address. That maybe a reason why designers let it down… “Loin des yeux, loin du coeur”
I find that, instead of messing around with .ico’s, this method works just as well. They icons don’t need to be 16×16, and they can be any recognizable format. I forget why you need both, for browser support or legacy stuff.
I wouldn’t consider favicons a trend, especially one that has dampened down. Approximately 80% of sites I subscribe to feature a favicon. For sites I bookmark and access frequently (web apps), I get frustrated when the bookmarks don’t have an icon associated with them. Favicons make it much easier to scan a list of sites (be it in an RSS reader like Net News Wire, or just browser bookmarks). They also do a good job of re-inforcing the brand.
The W3C recommends including favicons in the way you recommend. From my experience, I also usually put them in the root directory of a website as well. I remember it solving some compatibility issues. Also, not having it the root directory, you’re liable to get a lot of log file entries from user agents that look for the favicon there (see Nake K’s comment).
When adding a favicon, make sure it’s a finalized version. While it’s easy to swap out images included in the CSS file or on a web page, favicons are pretty persistent in the browser cache.
The more you can get your logo or colours in front of somebody – the more chance you will have of that person remembering your company.
I think that this is the most important issue here. If you can put your logo somewhere, why not?
It’s not just competition though. It stops confusion. If you have a folder of bookmarks labelled ‘accessibility’ for instance, it’s useful to see where those articles came from without having to click. It can be an aid to memory.
e.g.
What was that accessibility article on alt attributes?
Simple.
Adding to Nate & Martin, I don’t remember a ‘fade’ really, but I do recall a time when favicons were rather tacky random icons - not always branded. It was a case of “because one could” and now it’s a case of “because they’re good.
They went from bells and whistles to a usability feature. They grew up.
I don’t have a favicon yet. Even though I’m a designer, I decided not to make a custom design for my blog until I’ve successfully maintained it for 6 months. I didn’t want to be a fanboy that has a name for his band and first album before locating other band members. I do look forward to making my favicon, though. Wee!!!!!!!!11
in response to “giz404″, Safari 2 does show favicons, the only problem with Safari and favicons is that it caches them until practically the end of time.
Another problem is when a logo just won’t scale to 16×16. Some designers just omit doing it out of sheer laziness. These are the designers you should not hire.
RE: Justin
I understand what you are saying completely. I initially started my website on a wordpress blog, and haven’t been able to update it until around…now (over the christmas season). My favicon is simply the same fade as the default wordpress header. I added it to remove the 404’s from my server logs looking for the favicon.
I like the idea that you are waiting to commit fully to it, though. That is a good decision.
RE: Matt
I think it is just perception. I don’t really even think about it most of the time. I am using RSS more and more instead of bookmarking that I don’t really pay as much attention to the favicon. So, its not that you are wrong, just that it might not seem as ‘fading’ to others. The example of creating a favicon will help others, im sure.
Related In Some Way, Shape Or Form
The above post has obviously kept you amused. Why not discover similar material:
The posts Holidays, Home for Christmas, Away and Bug Squashing, The Life and Times of Cool, The Return Of Cream, are related to this post.
Or why not take time out to find out about the author of the post.
Sponsors
Recent Comments
- Schmoo:
Fadtastic, ferchrisakes, sort your RTE’s P tags out! It most assuredly told me it was... - Schmoo:
You’re spot on, Synthia, when you say it’s a case of "the newbies learned how... - alex:
very cool tips, hopefully many will benefit from this :))
Search
Topics
Authors
RSS Feeds
- Complete Feed
Everything from fadtastic. - Articles
Just the articles. No news/blog. - Reviews
Our book, brand and service reviews. - Blog/Site News
The 'FadBlog.' Site updates and news.
9rules
