Psychology-Driven Brand Design. Creating and Refining Remarkable Brand Identities.

“F” is for: Favicon

Table of Contents

What is this “favicon” you speak of??

Just to start from the beginning, let’s go over the pronunciation of this word. As is the case with many words in our evolving language, you will hear a couple of variations. Some will say “fave-icon” because it holds true to the full words that the term was derived from. Others say “fav (rhymes with ‘have’)-ee-khan” or “fav-ick-on” (emphasis on the last syllable) because it rolls off the tongue more naturally (and follows the precedent of the “emoticon” pronunciation). I adhere to the latter, but hey, anything goes, I guess! Listen here if you are curious to hear how others pronounce it.

But even if you don’t know it by name, or don’t know how to pronounce it, you probably already know what a favicon is. I sometimes get clients that ask about “the little logo beside my website name”, and I know they’re referring to a favicon.

When you’re viewing a website in a browser, you’ll notice that there’s an icon in the tab next to the title of that webpage.

If you bookmark the page, you’ll notice that this same little icon also shows up in your bookmark list or favorites list. That’s why it’s called a favorites icon.

Sometimes the favicon is the logo of the company, but since the icon is so small (16×16 pixels at its smallest), it often has to be simplified to a related visual element.

How do I get a favicon?

Designing a favicon is something that your web designer/developer can do. It’s not at all necessary for a functioning website, and is therefore often overlooked, so it’s nice if they’ve already done it – it means they are focused on the details!

But it’s also something YOU can do! There are online favicon generators that make it pretty easy to upload an image and generate the correct file needed to have your very own favicon. Some favicon generators are:

  • Favicon.cc – one of my favorites because it allows you to “paint” your own instead of simply uploading a pre-existing image.
  • Genfavicon.com – allows you to upload your logo and then crop it as necessary.
  • Favicon-generator.org – handy because it allows you to also generate icons for mobile devices (more on that below!).

Steps to create your favicon with a favicon generator:

  1. You should create and upload your image as a .png file if you have a transparent background. Ideally you want your image to be a perfect square since this will be the proportion of your finished icon.
  2. The favicon generator will convert your image into an .ico file.
  3. You download the .ico file (named favicon.ico) and then upload it into the root folder of your website. And voila!

Beyond the Favicon: The Mobile Factor

Your favicon doesn’t stop with your bookmarks list and browser tab. Your favicon can also serve a triple threat as your mobile icon!

If you use an iPhone or Android mobile device, you may notice that there is a handy way to bookmark a webpage by adding it to your home screen. What this does is place an icon directly on your home screen that links directly to this page.

If you don’t have icons created specifically for this purpose, Android will by default use your favicon.

Apple devices will create a miniature screenshot of your webpage as the icon.

Your web page squished down to a tiny square screenshot is not always ideal, so, it behooves you to have your web designer create mobile icons for your website. In these cases, you could potentially still use the same basic image as your favicon, but mobile icons are larger (72×72 on iPad displays). So you can take advantage of the larger size to make your mobile icons higher quality and more detailed than your favicon.

Going beyond the standard favicon and creating these mobile icons will help keep your brand consistent across those user experiences as well.

Favicons create a consistent visual brand.

A favicon may not seem all that important to you in the grand scheme of things, but if you’re serious about your brand, then you know that the success of your visual brand is in the execution of the details. All the little details add up! Since a favicon also enhances user experience (helps people easily identify what your web page is), and is so easy to set up, there is no reason why every small business owner shouldn’t have one for their website.

Picture of Nyla Smith

Nyla Smith

Nyla is a Graphic Designer, Web Designer, Front-End Web Developer and Consultant with over 15 years of experience. She is the owner of n-Vision Designs, LLC in Hampton Roads, Virginia, which exists to provide marketing support and brand consulting to small- and medium-sized businesses needing creative solutions. Contact Nyla if you'd like to discuss your next creative project. She can usually be bribed to a meeting with a cup of green tea and an oatmeal cookie.

More Like This...

Signing Off! Email Signatures the Right Way

In this high-tech age, something as simple as an email signature should be a breeze to create on your computer. Think again! Although all email clients support these signatures, each interprets it differently. This causes the HTML email signature to be one of the most unpredictable beasts in the digital world.

Read More »

8 Tips for a Better Website

If your website isn’t performing for you, there are probably reasons why. Before you go and do something drastic, like redesign it completely, there are a few things you should evaluate. Here are eight tips that could help you improve your existing website.

Read More »

“A” is for: Above the Fold

So often, when working on websites or landing pages, the client adamantly states, “We need to get all that above the fold.” I’m always curious if they’re saying it because they’ve heard it was an unbreakable rule, or if they have specific data to support their request. It’s important to know that “above the fold” alone is not a magic bullet for a successful page.

Read More »