A favicon (the term is a mashup of “favorites icon”) is one of those little details that should be a part of your visual brand. Go the extra step to reinforce your visual brand and enhance your users' experience of browsing your website by creating a custom 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:
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.
The favicon generator will convert your image into an .ico file.
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.
If you don’t have mobile icons created for your website, Apple devices will create a screenshot of your web page (first image). The better option is to create your own mobile icon so that you can control exactly what appears (second image).
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.
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.
So you dropped a few grand last year on a new website. You also paid for a domain name and some web hosting, both registered in your name. Congrats! You are now the proud owner of a website. Or are you?
Having a website that converts is more important than having a website that just looks good. Unfortunately, these priorities get mixed up all the time.