What is a favicon?

What is a favicon? Defined & Explained

What is a favicon?

August 9, 2021 10:28 am

The favicon, a tiny icon used as a logo of sorts for your site, is a god-send for browse-happy internet users. It may not seem like much of anything when you consider its size, but, man, does it help with site identification.

Think about people like myself who rarely have less than five tabs open at a time. A favicon lets me effortlessly see which sites I have loaded and switch between them to get my desired content. Adding this small but essential icon will help anyone with a website be professional and recognizable, no matter the industry.

In this post, expect to learn the definition of favicon, discover why it is necessary, and gain knowledge on creating the perfect design for your business.

What is a Favicon?

A favicon is a small, square icon used to identify your site in a web browser. It is also called a shortcut icon, website icon, tab icon, URL icon, or bookmark icon (source). The graphic is often a simplified version of your logo or a related piece of branding.

Example of favicons in Firefox browser window

They display to the left of your website title in various locations. One such location is the bookmark toolbar and menu on the majority of browsers. Browser tabs and Google search results may also feature your favicon, depending on the web browser you use.

Why is a favicon important?

Users can easily find you

People no longer read or examine things closely. They scan.

Many of us have a list of websites in a bookmark list. A well-designed and visible favicon speeds up the ability to scan and find your site. Who would not want to be easily found by their fans?

Adds Credibility

You may be wondering what happens or what displays if you do not have a favicon. A WordPress site without a favicon will automatically display the WordPress logo. Other website builders use a similar practice. Regardless, you will get a generic output that is not related to your brand. Your site will look more trustworthy and credible if the favicon reflects your brand, not the brand of WordPress or another company.Edgy Megs & Postville Childcare's Logo as compared to their favicon

Builds Brand Recognition

A favicon travels with your site around the internet, so think of it as your website logo. But remember, the favicon is not always your entire logo or even your logo at all. See the next section on why it should be. People see the favicon and recognize it as the identifier of your website. Using elements of your logo and branding system will increase the chance of people identifying your favicon as part of your overall brand.

Tips to Create the Perfect Favicon

 

Decide on the imagery

A favicon should be eye-catching, related to your brand, but, above all else, simple. Whenever possible, design a favicon using the logo or recognizable parts of it.

MFL MarMac Bulldogs and The Gluten Free Mentor's logo as compared to their favicon

A logo mark is a perfect candidate for your icon. Isolate it from the rest of the design, simplify it as much as possible without modifying it beyond brand recognition, and make sure it is readable at a smaller size. If you do that, your favicon is ready to go.

Pinter's Gardens & Pumpkins & Decorah Rental's Logo as compared to their favicon

Complex and text-based logos can be a bit trickier. One option is to choose a prominent, single element of your logo. Considering a text logo, it might be the initials or first letter of the business name. Design your favicon to highlight that element in its simplest form. Another option is to use an image that relates to your brand. Be sure the chosen photo represents the brand, and the image subject is unmistakable at the small size. You do not want a misinterpretation of the image subject.

Use colors and a well-defined logo element to set you apart from other brands on the internet.

Pro Tip: Do not design an icon with words longer than three letters. The display size is too small, and readability will be difficult, if not impossible.

Check the dimensions

WordPress suggests favicon images be no less than 512 x 512 pixels. That size may feel large when considering that the icon is typically displayed at 16 x 16 pixels. In the past, multiple files sizes were necessary to accommodate different browsers and devices used by visitors. Because WordPress requests a large image, they minimize the possibility of pixelation due to stretching an image beyond its original size. This practice saves designers and developers time. WordPress automatically resizes the icon to fit all devices with a single file.

No matter how you are building your site, the favicon must be a square. The graphic inside is not required to fill the allotted space, nor must it be square. Choosing not to utilize all the space is sometimes necessary to retain the integrity of the original logo design. There is not much space to work with; use as much of it as possible.

Saving your file

Save your favicon as a png file. This file type allows you to eliminate the white background automatically created when saving images as a jpg. The quality image will have a transparent background letting your icon stand out.

Conclusion

Favicons are a small part of your website with a significant effect. Don’t let potential visitors pass you by because they can’t identify your site in a list of options.

The space utilized for a favicon is tiny. The favicon should be consistent with your branding while being legible and recognizable. No amount of squinting will allow your visitor to distinguish the complexities of an over complicated favicon.


Check out our article: how to update your favicon.

Contact our team with questions or if you’re interested in a website redesign. We are happy to assist you.

 

check out more

Style Guide: Defined & Explained Banner by Iroc Web Design Services
Examples of customer logos compared to their website favicon