The Ultimate Guide to Favicons

What is a favicon?

In website design, favicons are typically shrunken logos of a business or organization used to help with branding. Favicons appear in the corner of a website tab and usually include the logo design of the website you're visiting. Favicons are tiny in size and have specific requirements, which is why it's essential to know how to make a favicon for any website you own or manage.

Where are favicons used?

Favicons can be found throughout many web browsers. Favicons can be located on the right or left-hand side of browser tabs, history results, toolbar apps, and search bars. Where favicons appear typically depends on the browser you’re using. For example, Favicons in Google Chrome will emerge on the right side of the tab, your bookmarks bar, browser history, and search bar as you type.

Are favicons important?

Yes, favicons are extremely important, even if they're tiny. A favicon is often one of the first logos a visitor will see when accessing a website, specifically while the site is still in the process of loading. If your favicon is colorful or uses a unique image to convey a message, your visitors are much more likely to remember your website and the brand it represents. Without a favicon, your website may be forgettable.

Some of the most notable advantages of using favicons include:

Brand identity

Defining and setting up your brand's identity is essential, especially if you're entering a highly competitive or overly saturated market. Having a brand identity right out of the gate with a polished favicon can help set your website apart from similar websites in the same industry. If brand recognition is a must for your business, don't miss out on the opportunity to implement a favicon of your own.

Bookmark identification

If a user bookmarks your website, what are the odds that they'll easily locate it again without a favicon? Using a favicon can make your website more recognizable for those wishing to revisit your site again in the future.

Improved UX

Building a successful website and online presence today requires more than delivering quality content and/or products. Providing your visitors with a seamless user experience can also go a long way when it comes to building and developing a new business brand online. A favicon appears professional to most, and may help with solidifying that your brand is credible and reputable for new visitors.

Search engine optimization (SEO)

In some cases, a well-designed favicon can help to boost a website's SEO. If your favicon is eye-catching and visually appealing, it may receive more clicks and attention than other competing links or websites. While it's not always definitive that you'll improve your website's SEO with a well-designed favicon, it's possible with enough visitor engagement.

Reputation and credibility

Making a first impression is important, especially when introducing your business or brand to prospective customers for the first time. Using a favicon is a way to convey a message of professionalism and authenticity, which can help build a positive rapport between you and your visitors. Using professional logos, color schemes, and favicons can also convey a message of authenticity and credibility, allowing you to boost your reputation.

Favicon formatting

A favicon guide can help with formatting your favicon while learning about the appropriate image file types for this graphic. While all users were once required to use Windows ICO files for a favicon to load, there are now various browsers that permit using standard image files, including PNG, SVG, and GIF files.

The following file types are the most common used to format favicons today:

Windows ICO

Windows ICO (Windows Icon) files are the most common file types used to save favicons. When you search for free favicons as opposed to designing or developing your own, you will be presented with libraries of Windows ICO files. You can also find converters online that allow you to upload your own traditional image file in order to convert the file into a standard Windows ICO file for the use of favicons. The Windows ICO file type is useful for a 32-pixel icon.

PNG

PNG files are extremely popular image file types that can also be used as favicons without additional formatting or programming. A PNG file is highly recommended for those seeking high-quality results using traditional graphics and images. If you're interested in creating a transparent logo but don't want to use a Windows ICO file, using a PNG is often the best bet.

SVG

SVG formatted images are powerful image files that can also be used to create and showcase favicons. While SVG files don't load as quickly as traditional JPG and GIF files, they're more universally compatible across a wide range of web browsers, from Microsoft Edge and Mozilla Firefox to Opera.

GIF

Using a GIF file is possible when creating a new favicon for your website. If you're thinking of using a transparent or an animated GIF for your favicon, you may be able to do so, depending on how you choose to upload and present your favicon.

APNG

Another format that can be used when creating a favicon includes APNG. APNG is similar to PNG files, but they allow various motions and movements like a GIF. APNG files are also compatible with browsers such as Opera and Mozilla Firefox.

JPG

You probably heard of JPG files, even if you're new to web design and development. A JPG is one of the most common formats used to save photos and graphics for any reason today. However, JPGs are rarely used to create favicons since JPGS often lose their quality when edited and resized. Repeatedly editing a JPG doesn't always result in the professional outcome you might envision for your logo or favicon.

Favicon size guidelines

Before you upload a favicon you designed or attempt to use a traditional image for your favicon, it's important to know the best format for favicon sizing and saving. Favicons are typically smaller or more condensed versions of logos. And when we say small, we mean really small. While a classical logo may range from 50 pixels to more than 300-500 pixels, a favicon's size begins at 16x16 pixels.

Here are the most common favicon guidelines used for sizing.

• 16x16 pixels: When developing a favicon, keep in mind that 16x16 pixels is the most commonly used size. While 16x16 pixels is an extremely tiny file size, it's useful for displaying logos and favicons throughout the web in search bars, tabs, and browser history.
• 32x32 pixels: Favicons that are 32x32 pixels are ideal for those interested in promoting their website or content inside a taskbar. Additionally, this size will load best for those using Mac iOS and browsing via Safari since the size is standard for the "Read Later" section of the browser.
• 72x72 pixels: While traditional 16x16 pixel favicons were once considered universal, the advent of various technologies and new devices have made room for even more sizing options. If you're targeting mobile users or users who browse via iPads, ensuring you have a 72x72 pixel favicon is a must.
• 96x96 pixels: For those who want to appeal to users of Google TV, a 96x96 pixel favicon is highly recommended to prevent stretching and the loss of quality when loading on a larger resolution.
• 114x114 pixels: A 114x114-pixel favicon is optimal for those using the latest version of the Apple iPhone since the app icons are bigger and the retina display is twice as large. To prevent your favicon from being low-quality and blurry, use the appropriate size on the channels you intend to target.
• 128x128 pixels: If you intend to promote your website or online presence via the Google Chrome Web Store, you can do so with a favicon that’s 128 x 128 pixels.
• 195x195 pixels: While rare, this size can be suitable for those using the Opera browser or Opera Speed Dial settings to save preferred or favorite websites.

Understanding the various favicon sizes that are most commonly used today can help you to determine what size is right for your favicon. When you're familiar with the format expectations of your favicon across different web browsers, app stores, and devices, you can minimize the risk of presenting your business or brand in a low-quality manner.

Why does the size of my favicon matter?

Creating favicons using different sizes can help prevent the loss of quality or resolution when the icon loads for users, whether they're browsing your website or attempting to access your app from the official Chrome Web Store. If your favicon is too small or is the incorrect size, you run the risk of:

• Drawing negative attention to your brand. Making a bad first impression may keep users from ever giving your website or brand a chance, especially if a competing business makes a positive impression with professionally-designed graphics and favicons.
• Turning prospective customers away. If your favicon appears outdated, blurry, or grainy, users may not believe that you're professional or to be taken seriously, which can result in a loss of web traffic, sales, and ultimately, overall revenue generation.

How to make a favicon

Making a favicon is easy, especially with today's technology. Before creating a favicon, you must have internet access and graphic design software that can resize your icon to the appropriate size.

To get started, follow the favicon creation guidelines below:

1. Consider the image you intend to use for your favicon. Will you use your brand's standard logo or create a special version of the logo?
2. Ask yourself where your favicon will be displayed. For example, if your e-commerce store doesn't have an app, you don't have to worry about sizing your favicon for mobile applications on phones or tablets.
3. Choose the file type you wish to use for your favicon. The most common file types for favicons today include Windows ICO files, SVG files, PNG files, and GIFs. You may need to check with your web host to determine if there are any restrictions in place when it comes to selecting your preferred file type(s).
4. Find your web host's favicon uploading script to upload the image you wish to convert and use as your website's favicon. You can also opt to use a third party to upload and generate a favicon file that can be saved and uploaded to your web server.
5. Upload your favicon using the appropriate method based on your website's or app's host and favicon preferences.

Favicon best practices

Whether you're new to web development or simply trying to incorporate a professional favicon for reputation purposes, there are a few best practices to keep in mind whenever you're working with favicons, such as:

• Ensure it’s recognizable. When designing your favicon, ensure it's recognizable, even from a distance. Because your favicon will be significantly smaller than most traditional logos, it's best to use a condensed and simplified version of your logo if it's originally complex and colorful.
• Keep it simple. Avoid using complex text or intricate lining when creating a favicon, especially if you require the smallest size favicon.
• Focus on branding. When creating your favicon, consider how it’ll be viewed and interpreted by current followers and users visiting your website for the first time. As such, make sure that the favicon aligns with your current brand style guidelines.
• Use a transparent background. Using a transparent logo to create your favicon file is highly recommended, as favicons with background colors can appear dated or too distracting to some. Transparent favicons are also much more universal and can be uploaded and shared just about anywhere without interfering with the background colors of a website, browser, or device.

Should you use a favicon?

Using a favicon is highly recommended whether you're building a personal website, a website for your local business, or even an online presence for an international brand. Everyone who has a website today should use a favicon since it can help with the following:

• Brand loyalty. If one of your goals is to build brand loyalty, it's a great idea to use a favicon. Favicons help convey a message of authenticity, credibility, and professionalism in any industry and market. Plus, each time visitors access your website, they'll be presented with your favicon, which can help them remember your brand over time.
• Search suggestions. Whenever a user searches for information that causes your website's URL to appear in a web browser, your favicon will also appear alongside your website's title. This can drive even more traffic to the site.
• Search results. If your website appears within the search results of a page after a user has entered their query, your favicon will also load and appear. A visually-enticing logo and favicon can motivate users to learn more about your website.
• Browser history. When using a favicon, it'll appear in your user's browser history, making it significantly easier for those who wish to find your website again. This is also a useful tool for long-term branding purposes.

Using favicons to build your online presence

The use of favicons is nothing new, but they're extremely useful across all industries when building an online presence. Whether you're creating a personal portfolio, launching a local startup, or looking to attract visitors from around the world to your website, using a favicon can go a long way in establishing your brand's identity and spreading the word about what you have to offer.

If you're looking for a simple way to incorporate favicons into your own website, email newsletters, and marketing campaigns, turn to Mailchimp. Mailchimp provides an accessible, all-in-one solution for managing your online presence and the favicons you use to represent your newsletter emails, marketing campaigns, and official websites with ease.