When learning how to make 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 is a favicon and what makes it 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 history
The first version of the favicon was introduced by Microsoft in Internet Explorer 5, released in 1999. It was a 16x16 pixel icon in the ICO format, which could be added to the root directory of a website and automatically displayed in the browser.
The idea of using a small icon to represent a website dates back even further than 199 however. In the early days of the web, before graphical browsers were commonly used, text-based browsers like Lynx would display a small symbol next to the website name to indicate whether the site was secure or not.
The concept of the favicon was later adopted by other browsers, including Firefox and Chrome. At the same time the format evolved to support larger sizes and multiple image formats. Today, the favicon is an integral part of all of our web experience's. As custom-designed icons they are used to enhance the brand identity of companies big and small.
Favicon standardization
Over time favicons have been standardized in terms of their format, size and location on a website. This standardization has developed from a need for favicons to be implemented consistently across different browsers and devices.
This process of standardization began in 2005 when the World Wide Web Consortium (W3C) published a recommendation for favicons, which said that the file should be named "favicon.ico" and placed in the root directory of the website. Their recommendation also outlinked size and format requirements for the icon.
The W3C then updated their own recommendations again in 2011, when they added additional image formats and sizes for favicons. They also included support guidelines for multiple icons across various devices.
Favicon standardization has had several benefits. The primary one being that it means they are displayed properly across a variety of browsers and devices. Before standardization, they may have shown clearly on one browser, but not on another, affecting the user experience.
It's also simplified the favicon creation process for web designers and developers, as they no longer have to design or format them specifically for different browsers and devices. One design and format should work. This also improves and standardizes the web experience for all web users.
Favicon on a web browser
Favicon on the bookmark bar
Favicon on your browser’s history
Favicon in search results
Why favicons are important
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 in a few ways:
Favicons can help Google and other search engines identify your website. When Google crawls your website, it looks for the favicon file. If it finds it, it uses the favicon to identify your website in its search results.
Favicons can help users remember your website. When users see your favicon in their browser tabs, bookmarks or search results, it can help them remember your website. This can lead to more clicks on your website in search results.
Favicons can help improve the user experience. A well-designed favicon can make your website look more professional and polished, leading to a better user experience.
Favicon challenges
While a powerful brand identifier, designing favicons is not without its challenges. We've put together some of the main ones below,
- Limited design space: Turning your brand's logo into a favicon friendly size can be a challenge, especially if you expect it to be able to convey the true messaging of your brand.
- Security: Favicons can be used in a number of potential cyber security attacks including malicious code injection, malware, spoofing attacks and phishing threats.
- Website load time and speed: As with all web images, favicons must be optimized for website performance, or they can negatively impact a site's load speed.
- Accessibility: As a small image, favicons can be hard for accessibility purposes. They can be too small to include explanatory text or other cues.
- Compatibility issues: Even with the standardization of files and formats for favicons, there can still be issues with how they display across different browsers and devices, which can impact how they are seen on the web.
How to create a favicon for your website
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. You could also use the free Wix icons or Vector Art vector illustration tool found in your Editor.
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
Learn more: what is a pixel
Subscribe to the Wix blog for a weekly dose of fresh web design tips and trends.
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 small lines, 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 made 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. If you're looking to learn more about Wix image optimization, check out our guide.
Favicon FAQ
What is a favicon used for?
A favicon, short for "favorite icon," is a small icon that represents a website. It's displayed in the browser tab, bookmark list and address bar when a website is open. Favicons are used to help users identify websites quickly and easily, and they can also help to improve brand recognition.