Learn the 3 Rules to Creating a Successful Favicon

Learn the 3 Rules to Creating a Successful Favicon

Learn the 3 rules to Creating a Successful Favicon

A favicon is the most under-rated part of a website when it comes to small businesses. First off, what is a “favicon”? Favicons are icons that show up in your browser tab. If you look up at the tab of this blog post you are reading, you will see a cute, black skull next to the web page title. THAT is a favicon. These icon-like grap can be a helpful source in branding, individuality and adding some memorability to your website. Check out my Pinterest board for a visual example of favicons.

Designing a favicon is much like designing an icon, but an icon that have to be very small. Favicons are only really about 25px by 25px. That is a small icon. Some of you who are reading this may have not made an icon before. Think of a very small picture that has to tell a story. Icons use white space (or negative space) and simple lines to make a representation of an object. See an example below.

A beer mug next to an icon of a beer mug.

A beer mug next to an icon of a beer mug. They are designed much like icons.

Use More and More Negative Space

The first step to a successful favicon is to use more white space than you think you need. Below are some visual examples of real favicons. You will see the top favicon is hard to make out what it is. The bottom favicon is a powerful branding tool that tells even people who cannot read that they are on the Apple site. Use your favicon as a tool for your website rather than an after thought.


It is hard to see what this favicon is. It needs more white space.

Apple Favicon

Apple is using a clear brand message to communicate with their favicon.

Get Creative

Your favicon can be anything you want it to be. Think about what would grab your attention if you were looking at multiple sites at a time. Think about ways to can pull your viewer’s attention from a competitor’s website. Is there something your brand is known for – besides the logo – that you can use to get the attention of the viewer? Humor, cuteness, and bright color always work when it comes to getting attention. Here are some favicon examples below that took their brand a step farther in their favicon choices.

Ben & Jerry's former.

Ben & Jerry’s former favicon. It’s a cute and colorful ice cream cone.


deviantART’s favicon is a cool, alien monster. Very on point for their target market but still fun.

San Diego Zoo's favicon

San Diego Zoo’s favicon could be better but the point is it still is on brand but fun!

Stay on Brand

Your website is the face of your brand many people will see first. It should reflect your business in all the right ways. That goes for your favicon as well. Don’t go too off the rails. Take Ben & Jerry’s for example. They didn’t pull right from their logo but it is still an ice cream cone. The San Diego Zoo is using an animal but not something pulled directly from their logo. What does your brand have that’s special but not in your logo?

If you are officially inspired to change your favicon, it’s simple. Look through icons here or generate your own here. Remember to always call your web developer when making changes to your site. Or if you have a WordPress site that just needs a face lift, you can contact me! I would love ti talk web strategy with you.

In the mean time, See the best according to Smashing Magazine if you are officially fascinated. You can read more about web design on my blog here!

Leave a Reply

Your email address will not be published. Required fields are marked *