Tips for Designing a Great Favicon for Your Website

Thinking about resizing your logo down to a 32-pixel square and calling it a day? Unfortunately, favicon design isn’t that simple. Let’s look at great favicon examples plus eight tips to help you come up with the right one for your website.

The favicon may seem like an itty bitty detail for a website. But a poorly designed favicon can taint brand credibility along with the user experience.

In this post, we’ll take a look at the purpose of the favicon, how to create it and eight tips for designing an effective one for any brand.

What is a Favicon?

The favicon was introduced to the web in the ’90s by Internet Explorer and officially adopted by the W3C around 2000. Short for “favorite icon,” this small, transparent icon is what we see in browser tabs, bookmarks and even in search engine results.

Here’s an example of what the favicon icon looks like in the browser tab compared to its logo counterpart on the Zocdoc website:

Here’s what the favicons look like in my Brave browser history list:

Google search results pages also use favicons for easy identification of your favorite or most trusted websites. Here’s what they look like in a search for “keto friendly pumpkin pie”:

There are other places where the favicon shows up. For example:

• RSS feeds
• Browser bookmarks
• Saved desktop shortcuts

For brands, a well-designed favicon will strengthen brand recognition. For your users, it can make navigating between tabs, bookmarks, search results and other lists of website links much easier.

How to Create a Favicon

Let’s talk technical specifications before we get into the designing of a favicon.

File Format

In the past, favicons were saved in the ICO file format. That’s no longer necessary today. So long as you can export the file with a transparent background, browsers, RSS feeds and search engines will be able to read and display your favicon.

PNG is the most common file format, though SVG also works.

Size

The smallest favicon you’ll need to create is a 32px by 32px square. This is the size used by all the major browsers.

That said, there are some places where the favicon appears larger and the file will need to scale. For example, this is what the left side of my Brave home screen looks like:

You can disregard the two links in the middle. But the others surrounding them look familiar, right? Grainy and distorted, but familiar. These are the favicons for Gmail, PayPal, LinkedIn and WeVideo.

In order to ensure that your favicons scale for screens like these or for shortcuts that appear on smartphone or tablet home screens, you’ll need to create alternate sizes. Your favicon may need to be as big as 180px square for iOS or 192px square for Android.

Location

Depending on the content management system you’re using, you might be able to import your favicon directly to the site that way.

Another option is to upload your favicon file directly to the root of your website. Then add code to the head of the site so that browsers, search engines and others know where to grab your favicon file from. The code will look something like this:

<link rel="favicon" type="image/x-icon" href="favicon.ico">

Tips for Designing an Effective Favicon

A favicon may look similar to your logo design, but it doesn’t need to be identical in order for it to be effective. The trick is to imbue the favicon with your brand’s trademark style, a recognizable component from the logo, and make it look good within a 32px by 32px space.

Here are some tips to help you come up with a great-looking favicon for your site:

1. Keep It on Brand

The favicon is a part of your larger brand identity. Even if you can’t fit your entire logo into the small space, the favicon design needs to look like it belongs in the family.

Using brand colors and fonts (when relevant) is a must. The design should also incorporate an identifiable element like the first letter of your brand name or the symbol element in your logo.

The favicon for On Target Sports, for example, is the shooting target symbol that serves as the “O” in the company name.

Acorns is another brand that’s taken the brand symbol and repurposed it for the favicon.

The bright green acorn symbol in the pictorial mark logo works just as well for the favicon.

2. Design for the Smallest Space

32px by 32px is not a lot of space. So when you’re coming up with an idea for your favicon, get creative with it.

Don’t feel as though you need to use whole words or exact graphics from the logo in order to create your favicon. Take, for instance, what Sidecar Health has done.

The sidecar graphic from the logo has been shortened down from the original rectangular shape to a square. The wheel has also been removed from the bottom. Yet the favicon still looks in line with the brand and is recognizable in a minimized format.

American Express has also redesigned its logo for a smaller space.

The normal American Express logo has the full name of the company placed within a blue square. The favicon looks as though they’ve taken a close-up shot of the left side of the wordmark. All you see are the letters “AM” at the top and “EX” at the bottom.

3. Choose Between Graphics or Lettering

Whole words and complex graphics aren’t ideal for favicon design. But truncated, minimized versions of them are.

When coming up with your favicon, you need to figure out what will work best in this space for your brand. Your logo may have already helped you determine what belongs there, especially if there’s a pictorial mark that can easily be shrunken down.

For instance, QuickBooks uses the circular green “qb” design from its logo as the favicon.

Their competitor Wave has done something similar by stripping out the wave graphic element and using it for the favicon.

That’s something else to think about when designing your favicon: What has the competition done?

For example, think about someone who has a bunch of tabs open in their browser as they consider competitive options. Or someone who is looking at related results on a search results page. If your favicon appears next to your competitors, what sort of impression does it give off? Is it professional looking? Is it eye-catching? Is it recognizable?

You might want to see if experimenting with a different favicon type, shape or color makes yours stand out better.

4. Make Use of the Full Space

The favicon is always a square. One way to maximize the space is to fill the background of it with color and then add your icon in the middle. This is what Xfinity does.

The all-black background looks sharp. What’s even more memorable about this favicon is that the bottom-right part of the “X” cuts straight through the background to the edge of the design.

You don’t need a solid background to make full use of space though. Transparent backgrounds are common in favicon design.

The Rakuten favicon, for example, is a purple “R” set against a transparent background.

What makes it stand out is that the underline swoosh that appears under the full “Rakuten” lettermark now appears under the “R.”

Whatever you put in this space, just be sure the design stretches as close to the boundaries of the square as possible. This will help enhance the clarity of the design so that people aren’t struggling to figure out what’s in their browser bar.

5. Make It Flat

Flat design is pretty much the standard these days. However, if your web design or branding includes three-dimensional elements, keep them out of your favicon design. There just isn’t enough space to convey that level of dimension.

One thing you can do is add a layered feel to your favicon. Here’s an example from Trello:

If you’ve never used Trello, you might not know what you’re looking at. Basically, the blue background and white shapes on top of it resemble the boards that users use to manage their tasks. The red dot in the top-right corner of the favicon represents the notification alert that lets them know about changes to tasks, timelines, etc.

The layered design makes it look as if the red notification alert is on top of or sticking out of the board’s UI. Yet the whole design remains flat.

Your email service provider’s favicon probably does something similar if you have browser alerts enabled. For example, this is the Gmail favicon:

Technically, the email counter isn’t an inherent part of the favicon. However, it becomes part of the design when the feature is enabled. Like Trello’s, the design is flat, but the number being placed in front of the icon makes it look as though the elements exist in a two-dimensional space.

6. Use a Memorable but Simplistic Color Palette

Color is a useful tool in design, even when it’s displayed in a 32px space.

When choosing colors for your favicon, try to keep it as simple as possible. Too many colors can make the favicon difficult to interpret.

ContentDetector.AI has the right idea.

The favicon comes from the pictorial mark logo. It’s a black square outline with rounded corners and a prominent black dot in the center. No other colors are needed for a strong, memorable design like this one.

That said, you can get creative with brand colors if you feel it’ll help attract more attention to your favicon. AllTrails, for instance, has taken the logo symbol and altered the colors.

The mountain symbol in the logo is a dark green outline shape on a white background. The favicon, on the other hand, is a neon green shape on a dark green background.

7. Create a Different Version for the Web App (Optional)

If you’re building an application that’s going to live in desktop browsers, then consider creating a unique favicon for it. Toggl is a good example of how this would look:

In the above example, we see what the favicon looks like for the Toggl brand. It’s a dark lowercase “t” against a yellow circular background.

When users step inside of the Toggl Track app, though, the favicon changes.

The app’s favicon turns into a version of the Start/Stop button that users use to record their session. It’s a black symbol on a gray background.

The colors and style are completely different from the original branding, but that’s OK since that’s not the sole purpose of the favicon. In addition to reinforcing branding, a favicon needs to make it easier for users to move from one site to another. So recognizability is just as important.

8. Make It Dynamic (Optional)

This tip won’t apply to everyone either. However, if you’re designing a favicon for a business or productivity app, you might be able to use it.

We’ll turn to Trello once more to see how this works:

The design you saw in Tip #5 above is the standard look of the favicon—the blue background, white shapes and red dot. It won’t always look that way though. When users customize the theme of their workspace as I’ve done here, the favicon reflects the new color palette.

Another web app that does this is Google Calendar.

The favicon uses Google’s trademark logo and favicon style with the blue-yellow-red-green geometric shape. Within the square favicon is a number. This number changes based on what the current date is.

While dynamic favicon design can’t be used in most cases, it’s an interesting way to make your favicon stand out. It’s also a handy tool in the case of something like Trello as it helps me keep multiple workspaces open in a single browser without getting them confused.

Wrap-up

Favicon design isn’t as simple as resizing your logo to a 32-pixel square. With such a limited space to work with, you really have to consider what you can put in there and whether it will make it a memorable and usable design.

As you can see in the examples above, there are different ways to approach it. Pictorial marks and lettermarks are the most common designs used in favicons, but you can play around with space, color and even typography to make them work even better for the tiny space.