What Is a Favicon and How to Make One for Your Website

This article was last updated on March 3rd, 2022.

When creating a website, many people tend to overlook a little finishing touch that can actually make a big difference: the favicon. This tiny addition to your web design leaves an impression that’s much bigger than its actual size—so don’t underestimate its importance.

What makes the favicon such a powerful element in website design? In this article, we’ll shed some light on its importance, and teach you everything you need to know about how to create one.

What is a favicon image?

A favicon is a small, 16x16 pixel icon used on web browsers to represent a website or a web page. Short for “favorite icon,”’ favicons are commonly displayed on tabs at the top of a web browser,—but they’re also found on your browser’s bookmark bar, history and in search results, alongside the page url.

In some instances, such as on Google Chrome, favicons will even make an appearance on your browser’s homepage. In other words, when you create a favicon, it serves as your website’s icon, or a visual identifier for users to spot your website around the web.

A favicon may also be referred to as a shortcut icon, tab icon, URL icon or bookmark icon.

Favicon on a web browser

Favicon on the bookmark bar

Favicon on your browser’s history

Favicon in search results

Why favicons matter

Despite their miniscule size, favicons are of great importance to the overall effect of your website's imagery, improving its user experience, branding and professionalism.

User experience: Favicons act as memorable visual cues to your website, enhancing user experience. Since they help users easily locate your website’s tab on their browser and across different applications, such as the bookmark bar, a favicon makes it easier for users to revisit your site over and over again. Favicons can also have a positive impact on the user experience when it comes to mobile. Web design on mobile is all about making an impact, and many times, nothing does that more powerfully, or easily, than a great favicon.

Branding: For a truly cohesive brand, even the tiniest of details matter. Despite their small size, favicons contribute to the branding and visibility of your website by extending your brand’s language outside of your site and stamping it onto the web browser. Favicons also add to the legitimacy and professionalism of your website, making it look complete.

Credibility: While favicons have no impact on how secure your site is, anecdotally, users seem to trust sites with a favicon. That’s because they signal to users that they’re clearly on your site,—regardless of whether they found you through a branded or non-branded search.

Return users: Favicons are a powerful brand identifier, making it easy for your site to stand out, either in search result pages or a user's browser history. Because of this, a recognizable favicon helps users return to your site more frequently. Additionally, when users bookmark your site, a favicon will make it easier to find amongst their collection of other saved ones.

Favicons and SEO

Favicons don’t have a direct impact on a site's SEO. However, since they make it easier for browsers to identify, and improve overall user experience—a favicon’s qualities can organically improve how well your site ranks in search results.

How to make a favicon

First and foremost, a favicon should usually be a simplified adaptation of your brand’s logo. Because it’s an extension of your branding efforts, and it should strengthen the brand identity you’ve already built, rather than distract users from it. To do this, you might consider hiring a professional designer. But you can also make one yourself using a design program of your choice, or several online tools. One such recommended tool is the Wix Logo Maker, which allows you to create a professional and personalized favicon to best reflect your style and needs.

We’ll go over some favicon design tips in the section below, but for now here are important guidelines to keep in mind:

Sizes

The optimal size for creating a favicon is 16x16 pixels, which is the size in which they are most commonly displayed. However, they can appear in larger dimensions too (such as 32x32 pixels). If you need help getting the right size for your favicon , try using Wix's Image Resizer tool.

Here are some standard favicon sizes, and guidelines for when you need to use each:

16x16: Browser favicon

32x32: Taskbar shortcut favicon

96x96: Desktop shortcut favicon

180x180: Apple touch favicon

Files

The original favicon format was the ICO. Today, the preferred file format or vector art for a favicon is PNG or JPEG. SVG is an increasingly popular choice, since more and more browsers are starting to support it. Browsers are also able to display favicons created as a GIF, small size makes GIF favicons harder to see.

ICO: Developed by Microsoft, this was the original file format for favicons. It is supported by all browsers and can include several sized images within one file. This allows you to size and scale your image, without relying on the browser. In many instances, and where a favicon is saved as an ICO and one other file type, the browser will still choose to display the ICO version.

PNG: This is a popular file format for favicons since it’s one website creators are very familiar with. It’s an easy format to create, and generally delivers high quality images and favicons. PNG files also have the added bonus of being lightweight, meaning they load quickly.

SVG: These files are known for being lightweight. The biggest benefit of this type of file format for favicons is its ability to deliver high quality images that don’t slow down page speed or site performance. In the past, SVG use for favicons has been limited due to a lack of browser compatibility, but this is changing.

Transparency: In case your design has a transparent background, be sure to save your file as a PNG with its transparency setting turned on.

Tips for designing a favicon

Designing something so tiny may seem like a walk in the park. However, the fact that website icons are so small means that you have to be extra accurate.

Here are a few tips on creating a favicon that best suits your brand and website:

Simplicity

The small size of favicons requires your design to be precise. Refrain from going into too much detail by avoiding elements like smallines, textures or shading. Instead, aim for a bold, clear and simple icon that’s instantly recognizable.

Jewelry designer and Wix user Ilaria Bonardi’s favicon is a great example of a simple favicon design, made up of three simple dots. We also love the quirky fun of Ducknology’s simple favicon — the duck is adapted from their logo, and represents everything that makes this site and brand so unique.

Brand identity

A favicon should encapsulate the spirit of your website and brand, retaining the same visual language and color scheme as the rest of your website.

For graphic designer Bhroovi’s Wix website, the rainbow colored favicon is a continuation of the same colorful visual language as their website. eBay’s favicon merges the brand’s colors with a little shopping bag icon, perfectly capturing the site’s spirit with an abridged version of their logo design.

Little to no text

If you want to include text in your favicon, limit yourself to between one and three characters. Initials or abbreviations are often good solutions for shortening texts, like your brand name.

The Wix website for the non-profit organization Arte, uses the A initial from their logo as a favicon, with an added neon green background to draw attention. Alternatively, the favicon adorning Brooklyn-based Red Fern’s Wix website has no text at all. Instead, it only extracts the leaf icon from their logo, to create impact while strengthening their brand.

Logo use

While some logos can look their best even in favicon size, most are hardly legible when shrunken down. If you want to use your logo as a favicon, you’ll probably need to make a few adjustments. Omitting the tag line, or using only one initial, are some of the ways to make logos work in favicon sizes.

Notice how Google’s favicon is slightly different from its logo, while embodying the same design values. The favicon shows only the familiar G initial, while seamlessly incorporating all four of the brand colors into that single letter. A different approach was taken by illustrator and Wix user Charlotte Mei, who uses the initials from her hand-drawn logo as her favicon.

Color

Keep in mind that your site’s favicon will be displayed on different colored backgrounds, depending on the context and browser used. Therefore, make sure to test your favicon on gray, white and black backgrounds before finalizing the design.

How to add a favicon in HTML

If you have created your site with a website builder, adding your favicon in HTML is not necessary. This step only applies to sites built by a developer. Below is how your favicon image would need to be inserted into the header of the code in order for it to show on your website.

<link rel="icon" type="image/png" href="Favicon.png"/>

Creating your site with Wix? Next, we’ll show you how to easily customize and add your favicon to a site.

How to add a favicon to your Wix site

Wix sites automatically include a standard default favicon, but you can customize it by upgrading to a Premium Plan and connecting your site to a domain.

You can easily change your favicon on your Wix site:

• In your site’s dashboard, go to Settings.

• Click ‘Manage’ next to ‘Favicon’.

• Click ‘Upload Image’, and select an existing image or click on ‘Upload Media’ to upload an image from your computer.

• Click ‘Add to Page’. You’ll now see a preview of what your favicon would look like on your browser tab.

• Click ‘Save’, and ta-da! Your website now has a favicon. It will appear on your website’s tab once you hit publish.

Testing your favicon

Once you’ve inserted your favicon, it’s a good idea to check how it looks in all the places where it will be displayed. When you do this we recommend switching to incognito mode, to avoid caching issues.

Now check for your favicon in all the places a user to your site would view it — the browser, the bookmark tab, the browser history, and if possible, in search results too. Not ranking for any organic keywords yet? If your site is indexed, you should be able to find it in search by searching for your company or brand name. Once you spot your favicon, you know it’s implemented properly.

This is also a good time to think about how your favicon looks. Does its final visual design manage to capture the essence of your brand? If so, your favicon is ready to share with the world.

By Rebecca Tomasis

Organic Growth Expert & Marketing Blogger

By Eden Spivak

Design Expert & Writer