What is a Favicon and Why do you Need one?

by | Aug 23, 2017 | blogging, branding, business, design tips

Orana
Your Visual Strategist

Click HERE for
Design Solutions for Non-Designers

Follow me on Social Media!

Look up at the tabs on your browser. Yes, do it.

Ok. What did you see?

Every tab for every site you have open has the Title of the site and…..

A little tiny image!

 

That is a favicon.

 

Favicon’s are important, more so than you might think!

What is a Favicon? It’s an interpretation of your logo that shows up on the tab of your site. The fact that it’s the tiniest bit (in size) of your Visual Strategy doesn’t make it insignificant. Keep reading to learn how to make your own favicon.

First, let’s look at what a site without a favicon looks like as a tab.

  • 1 and 2 : The icons for Google Docs, that’s where I write my articles
  • 3: Viral Content Bee where I populate my Twitter and get my articles shared
  • 4: The WordPress editor for Orana Creative where I’m writing this article
  • 5: Visme where I’m building an infographic
  • 6: Facebook cause we all love to scroll once in a while
  • 7. The Documentary Lovers where I was watching the Helvetica Film
  • 8:  Some random Weebly Site
  • 9: Flickr where I’m looking for some photos for an article about Helvetica
  • 10: The Creative Commons site where I check the photos I use to see if I can really use them or not
  • 11: The Freepik Blog where I was reading an article of mine that was published yesterday.

Did you notice the site that didn’t have it’s own Favicon?

It was the Weebly site.

Not only did they not add a favicon, they also have forgotten to add their Site Title to their SEO settings. I know this is a site for a company I am writing about only because it’s the only one without a proper favicon, but I could easily lose that tab cause it’s not obvious as to what it is.

Do NOT let this happen to your site!

How to make a Favicon

Making your own Favicon is quite easy.
The easiest way is to look at your logo if you have one (
contact me if you don’t and we can sort that out).

Does your logo have an icon incorporated into it? or Is your logo really big and wordy?

The main idea is to grab a piece of your logo, or all of if it’s really neat and simple and create a square .png image with it, at around 150 x 150 pixels.

Why .png?

Favicons are better saved as .png because .png has a transparent background and that way your favicon will look great floating on its own in the tab. If you make a .jpg your favicon will have a white square background. If your favicon will be a full square graphic then it doesn’t matter either way.

 

Main aspects of a Favicon

  • Square 150 x 150 pixels
  • Resembles or is your logo
  • Preferable a .png file

Looking at the tabs again, analyze what is used in the favicon. Some are using the icon that is part of their logo, some are using an icon that represents the section of their app (like google docs), I for example use the O from my logo and Visme uses a pencil that isn’t even in their logo but describes what that tab is; an editor!

Now analyze your own logo and try out different choices to see what might look better in a square, that is readable and recognizable. If your logo is your name and it’s long and wordy, you should look into incorporating an icon into your visual strategy to use that as your favicon, or maybe create (or ask a designer) for an emblem of your initials to use as your favicon. Once you have an emblem you will want to use it elsewhere, like business cards or stamps!

Once you have your square favicon at around 150 x 150 pixels you are ready to add it to your site. Depending on your theme or platform the technique varies.

Here are some step by step  articles on how to add a favicon to WordPress, Squarespace, Wix, Blogger and Weebly. ( I should probably send an email to that weebly site without a favicon!)

– WordPress

– Squarespace

– Wix

– Blogger

– Weebly

Other things your site shouldn’t be missing are:

  1. Your Bio
  2. Branded Visuals

 

 

Web Hosting