What is a Favicon?

Posted on 05/10/2018 by Nikki Gagliardo

You’ve heard of it – you think you know what it is… but… wait.  No. What exactly is a favicon?

It’s referred to in many terms – an icon, bookmark icon, tab icon, URL icon, shortcut icon, website icon, website symbol, site icon and more.  Favicon is short for “Favorite Icon”, and can be pronounced, according to Oxford Dictionaries, either /fav-eye-con/ or /fav-ih-con/.

It’s literally the little tiny graphic that you see in the tabs in your browser, the URL bar, in your bookmarks and appears typically at a whopping 16 x 16 or 32 x 32 pixels.  It’s cute. It grabs attention. And it’s often the only space you have to give your brand a face.

Why do I need a favicon?

Because shapes and colors are my thing, my personal favorite reason to tell clients why they need a favicon is for brand recognition.  Think about those times when you have 137 tabs open in your browser window. How exactly do you find that one you had open so you can finish buying the pancake bot? Or consider, when you are browsing through your bookmarks list or bookmarks bar, likely combing through hundreds of URLs.  Your favicon is what can make your URL stand out in crowded lists. Which of these icons grab your attention?  Which ones are producing favicon errors?

Are there reasons you need a favicon?  Yes. Many basic website performance and optimization tests check for a favicon file and produce and error if your site doesn’t have one.  What does this mean? Should you drop everything you are doing to reach out to a designer to fix this immediately?  Should you loose sleep over it?  Should you spend millions of dollars to get a pixel perfect favicon by the end of the week? In my opinion, the answer to all of these is no.  Though, I wouldn’t be surprised if someone out there disagreed – and I’d love to hear their opinions on this in the comment thread below!

My advice to you if you don’t have a favicon:

Get it on your todo list.  Don’t panic about it, but at the same time, make it a priority.  Let’s say, between now and the next time you pay your car payment.  Fair enough?

Where do I get a favicon?

Of course, I’d love for you to reach out and let us help you create a well branded, styled, and optimized icon that speaks to your brands personality.  (Don’t have a brand personality yet? We can help with that too!) When we create a favicon for you, we’ll be sure it’s set up to follow current industry standards.

Favicon File Formats

Preferred – .ico

Also Acceptable – .png

Favicon File Sizes

Throughout the web, you’ll see favicons created in these most common file sizes:

  • 128 x 128 pixels
  • 64 x 64 pixels
  • 48 x 48 pixels
  • 32 x 32 pixels
  • 16 x 16 pixels

Favicon Generators

If you don’t have time time or the cash to pay someone to help you get set up with a slick, styled favicon, there are many resources out there at your disposal to help you at least get something generated for use.  Check out these links to find a generator that works for you.

Favicons are fun!

To conclude, I thought I would share a two fun facts I learned about favicons while writing this article. (Yup, that’s right, because I’m a nerd.)

  • Favicons were first supported by Internet Explorer 5, released by Microsoft in March of 1999. 1
  • It was once thought that you could estimate the number of visitors that bookmarked a page by reviewing the call requests for the favicon file.1

Need a Favicon?

Ready to hire a designer to help you create a styled, branded favicon for your website?  Reach out and we can have one added to your site this week.

Hire a Designer

References

  1. According to Wikipedia.org
  2. Wikipedia: https://en.wikipedia.org/wiki/Favicon
  3. A Beautiful Site: https://www.abeautifulsite.net/what-are-favicons
  4. The Digital Marketing Reference: https://www.marketingterms.com/dictionary/favicon/
  5. Site Checker.Pro: https://sitechecker.pro/what-is-favicon/
  6. English Oxford Living Dictionaries: https://en.oxforddictionaries.com/definition/favicon
  7. Yoast: https://yoast.com/favicons-and-your-online-brand/

Engineering amazing technology

729 Solutions is one of the oldest custom development shops in the San Francisco Bay Area / Silicon Valley. Our team is made up of developers versed in every programming language from basic HTML and CSS to Java, Python and Ruby. We are project managers that can streamline the process, ensuring your project gets done quickly and within budget. We are designers who make you ‘look' good. We are proud of the projects we take on and the quality of work we provide.

We are engineering amazing technology, everyday.

TELL US ABOUT YOUR PROJECT