Psychology-driven brand design. Creating and refining remarkable brand identities.

Design - from all angles

A blog about branding, marketing, and design, mostly through the lens of practical psychology, intended to be a resource to small businesses and entrepreneurs. Unless otherwise noted, all articles are written by Nyla Smith, owner of n-Vision Designs. {Subscribe to the RSS feed here: RSS}

"F" is for: Favicon

Nyla Smith | Tuesday, August 18, 2015

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.

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 (16x16 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.

Apple makes a screenshot of your web pageMobile icons on Apple
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 (72x72 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 is a Graphic Designer, Web Designer, Front-End Web Developer and Consultant with over 12 years of experience. She is the owner of n-Vision Designs, LLC in Hampton, 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.
Comments
Post has no comments.

Keep reading: