What is a Favicon and Why Does Your Website Need One?

The appearance of your website can play a major role in its success and how users perceive your business. A successful site is a combination of many elements that come together to create a professional appearance. Of those things, your site’s website icon—otherwise, known as a favicon image—is an important element.

This little addition is anything but inconsequential because it can help your website stand out, not only on web browsers but also in people’s bookmarks and even on search engines themselves. This article will explain favicons in more detail, including how to create one for your website.

What is a favicon?

‍

A favicon is a small square image that represents your website in web browsers. Favicons can be composed of a company’s logo, initials, or other identifying imagery.

A favicon can be found any place where your website appears, such as in address bars, browser tabs, history results, and bookmarks. Favicons enhance the user experience on your site by helping visitors readily recognize your brand identity and find your website easily among the crowd of other websites.

3 benefits of a favicon

Besides assisting in brand recognition, favicons can add legitimacy to your site and provide a simple way for potential customers to remember it when they come back to it. Setting up this kind of instant visual marker helps you provide the most curated and streamlined experience for web page visitors.

The following segments go into more detail about the benefits associated with having a favicon.

Brand recognition

Search engine optimization (SEO) is all about brand visibility. As a shortcut icon that takes customers to your site faster and more efficiently, a favicon serves your brand positioning in more ways than one. Users can save it to the bookmarks on their home screen, and it helps drive more traffic to your business’s homepage. Favicons contribute to increased visibility for your site, which means that more potential customers learn who you are and remember your company.

Legitimacy of your site

Most business owners recognize how vital their online image is to the success of their companies. A potential customer may view a business website and make a judgment on the quality of the marketing or design alone.

A customized favicon can make your website appear legitimate to users. Favicons lend credibility to your site and present your company as a place that customers can trust to shop or work with.

Bookmarks

Favicons can provide your company with immediate leverage online. Google Chrome, for instance, will bookmark websites that have a favicon, thereby attaching a search ranking signal that you want when it comes to driving traffic to your webpage.

Favicons also make it easy for users to find your website in their own bookmarks, so they can keep coming back to your site quickly and easily. These advantages heighten your company’s SEO performance and overall user experience.

Browse Project Catalog for more logo design services.

Favicon best practices

Creating a favicon is a simple process that can be approached in several ways. There are sites that offer a free favicon generator you can utilize to your advantage, or through Upwork’s Project Catalog you can work with someone to design a favicon or even your entire site. Regardless of which option you choose, it’s best to be aware of some best practices for creating effective favicons, which are highlighted in the following sections.

What size should your favicon be?

There are a few things to remember about favicon size. The standard size for a favicon is 16 pixels, however, modern browsers require you to create your favicon in a variety of resolutions for them to look their best across all platforms. Most of your decisions about favicon size will come down to the type of the operating system you’re using.

Here are some general guidelines about favicon size as it relates to the different browsers:

• 16 pixels: This is the classic favicon size and works in all browsers. This size is easily displayed in bookmarks, tabs, and address bars.
• 32 pixels: This size is great for the task bar button and in the “Read Later” sidebar on Safari.
• 72 pixels: If you want your favicon to look its best as an iPad home screen icon, this is the size you need.
• 96 pixels: This size is best for Google TV usage.
• 114 pixels: For recent iPhone models, this size is your best home screen icon. The retina display appears as twice the standard size here.
• 128 pixels: This size works best for presenting your company on the Chrome Web Store.
• 195 pixels: Use this size for the best display on Opera Speed Dial.

What image format should your favicon be?

Formatting your favicon is another important consideration. In the past, the Windows ICO format was the requirement for favicons. However, companies today have a quite few more choices at hand. The following list provides information on some of the more common choices of favicon formatting available.

• Windows ICO: As the most universally supported file type, the ICO format includes a 32-pixel icon to help you stand out on the Internet Explorer Windows 7 taskbar. It also comes with multiple bit depths and resolutions. The ICO format remains the only favicon file type that does not make use of the “link” component in its code.
• PNG: You can create a PNG format favicon without needing any special programs or digital tools, and it provides excellent cross-platform compatibility. This format is very user-friendly, although it’s not supported by Internet Explorer 10 or older. PNG offers the smallest available file size and supports alpha transparency.
• APNG: An animated version of a PNG format, APNG works well on Firefox and Opera. However, because of its motion, it can often be viewed as too “busy” or distracting for users when utilized as a favicon.
• SVG: For Opera browsers, an SVG format is best. Many browsers don’t currently support this format, but this is expected to change. This format will likely become dominant as it does away with the need to create different favicons in various sizes.
• GIF: Like SVG, GIF-formatted favicons do best on extremely modern browsers. This stands in contrast to many users viewing them as somewhat outdated. GIF formats do have the advantage of drawing a large amount of attention, though.
• JPG: The JPG format is not as widely used today as in the past due to its inferior resolution quality as compared to PNG styles. Because favicons are so tiny, the JPG (a traditionally larger file format) can lose some of its advantages when used for this purpose.

Other helpful favicon tips

No matter what operating system you use or how you design your favicon to appear, there are a few more rules of thumb for making the best representation of your business as possible:

• Square icons are usually ideal.
• Google recommends the largest resolution of 192-by-192 for favicons. This is a high-resolution favicon.
• The Microsoft ICO file format can contain multiple resolutions, making it one of the best formats to use.
• Inappropriate symbols will not be shown by Google.

Create your company’s favicon

Having a favicon to boost online branding and attract user attention is always a smart move for your business. With so many companies vying for the same business, making sure you have a favicon that naturally directs users to your website is essential.

Upwork can help you discover top independent web design and creative experts who are ready to help with any project. Leverage the pool of global talent available on Upwork and get help creating a favicon for your business that will stand out from the crowd.

‍