Favicon UX

Favicons, or “Favorite Icons”, are a necessary and helpful addition to a great web presence. Originally created for Internet Explorer 5 almost two decades ago, their relevance is still at an all-time high, although not for the same reasons it was originally created.

What’s a favicon?

The favicon is the teeny-tiny (16×16) icon that’s up there ^ at the top, in the browser tab to the left of the text. On this site, you’re hopefully looking at a little black “M” that also happens to be the logo for my site. When you bookmark a website on your smartphone’s home screen, it’s also the icon that shows up there.

Favicons Circa 1999

Back in the day, when frosted tips and JNCO jeans ruled the world, we’d fire up our Dell behemoth and connect to the WORLD WIDE WEB.

Fast forward 15 minutes (…bing, bing, screeeeeech…) and we’re surfing the web at a face-melting 56k!

In order to more quickly navigate this pre-Google Wild Wild West that was the internet, the All Star move was to create a way for users to more Smooth-ly get from place to place, instead of having Every Morning you use the internet consist of Sometimes getting to the information they were looking for. So Microsoft listened to its users who were all saying I Want It That Way and created the favicon for users to save sites they liked. They were Livin’ La Vida Loca.

Useful. People who used the web a lot could create bookmarks and, if the website had a favicon, they could easily scan for the correct icon instead of reading through every bookmark in the list.

As an added bonus, site owners could estimate the number of people who bookmarked a page by the amount of requests for that site’s favicon. Neat.

Favicons Today

Much of the practicality of favicons is still relevant today. They’re still used in bookmarking, although tracking the number of users who bookmark your page is no longer a possibility through the favicon alone. More on that later.

The main use for favicons today, aside from bookmarking, is that the little icon displays at the top of your browser’s tab bar. If you’re like me, your browser looks like this:

Crazy, right? This is actually a slow day tab-wise for me. The way I like to work is 1) see a link I like, 2) right-click, 3) “Open Link in New Tab”. This way, I don’t get distracted from what I’m currently doing and I can read or act on that content later. The thing is, this happens a lot. So the tabs grow.

Where the favicon is helpful for me is, even without being able to read the full page title, at least I still know which website is which from its corresponding favicon. I am able to quickly navigate from tab-to-tab without wasting clicks on stuff I’m not interested in seeing yet.

Conclusion

Use a favicon. Don’t be like these guys:

I mean, what are those sites even for? I’m not wasting a click to find out. And to be frank, it just makes you look lazy when you don’t have one — like something is incomplete. It’s like you put all this effort into painting the walls and remodeling, then went out and bought dollar store plasticware and bulk disposable napkins for your restaurant’s grand opening. Finish the job. Get a favicon, or ask your designer to make you one (and don’t let them charge you for it because they should have given it to you in the first place and it will take them 5 minutes).

When you have a favicon — even if it’s a crappily-done favicon — you instantly get roughly +10 in credibility points. And you’ll appear much less sleazy.

Share your thoughts