What is a favicon and why should your brand have one?

Humans are wired for visual content. In fact, over 80% of the information that the human brain stores is visual. Giving viewers visual-based content gives them a medium that their brains are designed to save and is a perfect way to establish your brand. One simple way to do this is by using favicons for your website. But what is a favicon?

We’re here to help.

What is a favicon?

A favicon is the small square image that tends to be displayed before the URL in the address bar of a browser, in browser tabs and next to the site name in a list of bookmarks.

Here’s an example of a favicon in a browser tab:

Favicons were introduced all the way back in 1999 by Microsoft as part of its Internet Explorer 5 “Favorites” feature. The concept caught on and was adopted across the spectrum of browsers shortly after.

Today, browsers and mobile devices all utilize favicons in some way, moving them from the “nice to have but not a priority” category to a necessary addition to your web presence.

Why should you have a favicon?

Now that you know what a favicon is, you might be wondering why it matters for your business. Having a clear and unique favicon is the perfect way to stand out from other sites. Brands like Facebook have very recognizable logos, meaning that their favicon would immediately catch your eye in a sea of browser tabs.

Having a favicon is a simple step towards improving the branding for your site.

In this way, favicons also improve user experience. It allows users to quickly scan and locate the site that they’re looking for. Google recently began to display site favicons in both mobile and desktop searches, so having a favicon is the perfect way to draw attention to your search result (and maybe include your click-through rate).

So to sum it up, some reasons to include a favicon are:

Your website will stand out (i.e. on bookmark lists and tabs).
Favicons provide more effective branding by allowing users to quickly identify the business and website.
Your website looks more professional and credible.

How to create a favicon

There are several considerations when creating a favicon for your site.

1. Choose your image

The first step to making a favicon is choosing the image that you’d like to use.

Most companies tend to use their logo, which is a great way to amp up your business brand identity.

If you don’t have a logo that will easily work as a small square image, consider creating a small image file with the first letter of your business name, or an abbreviation if your business name is on the longer side.

2. Consider your limits

Not all browsers and devices will display favicons in the same way.

In general, the preferred favicon dimensions are 32 pixels by 32 pixels. This means that most browsers and devices will scale the image that you assign as your favicon down to 32 by 32.

However, some devices keep a slightly larger image. For example, Google Chrome on Android devices prefers a larger image at 196 pixels by 196 pixels.

So what does this mean for you?

It means that you need to choose an image that is square and at least 196 by 196 or larger. Some devices even recommend using an image that is 260 by 260 for the best results when your image is scaled down.

3. Color choices matter

Not all devices will show your icon in the same way. Using a random icon, this is an example of how a favicon will appear on a Windows-based browser:

Meanwhile, Chrome on an Android device allows users to save a website to their home screen, which displays this way:
Pinned tabs on iOS devices using Safari require monochrome icons:
Given the wide range of uses and options for your favicon, it’s important to choose an image that can adapt to the many different devices and browsers available.

4. Create your favicon

Once you’ve picked your image, the real fun begins.

The process to create a favicon in the past required a bevy of photo editing tools and software. These days, there are free options online that will quickly and easily create the necessary files for your favicon.

RealFaviconGenerator, for example, will not only convert your image file to the correct formats, but it will show you how that image will look on a wide range of devices and browsers.

Another favicon generator favorite is Favicon.io. This site will create a favicon based on images that you upload, text (in case your logo is too complex for a favicon) or even emojis.

5. Upload your favicon

The final step is to upload your favicon. How this is done will depend on how your site is built. If you’re using GoDaddy’s Websites + Marketing, the upload process is simple.

Using WordPress instead? There can be a few extra steps involved, but in general, most WordPress themes these days will have favicon functionality built-in by default, making the process quick and painless.

Favicons are important for your brand

In today’s competitive online space, favicons are trusty tools that link your brand to a viewer’s memory and help your brand stand out in a crowd. Hopefully, these tips and tricks will help you on your way to amplify your brand online.

This article includes content originally published on the GoDaddy blog by Kate Harvey.

The post What is a favicon and why should your brand have one? appeared first on GoDaddy Blog.