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.

What is the history of favicon

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.

What is 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.

Why are favicons 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 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: 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.

What are some challenges with favicon?

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 a 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.

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.

How test 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.

top of page

Create Your Website

Copied

WEBSITE ESSENTIALS

What is a favicon and how to create one for your website

Widget Didn’t Load

Check your internet and refresh this page.

If that doesn’t work, contact us.

Was this article helpful?

bottom of page