What Is a Favicon? Definition, Examples & Design Tips
Elizabeth Kraus has more than a decade of first-hand experience building and growing a boutique digital marketing agency and double that in small and mid-size business marketing management. She provides expert answers to marketing questions related to branding, content marketing, web development, email, social media, and SEO.
This article is part of a larger series on Small Business Websites.
Favicons, meaning “favorite icons,” are small graphics displayed beside URLs in browser tabs, search results, history archives, and bookmark lists. Favicons are often sized-down logos, and while tiny, they increase brand awareness and improve user experience. Keep reading to learn more about what favicons are, where they are used, examples, size recommendations, and how to make one for your brand for free.
The Purpose of Favicons & Example Uses
A favicon’s purpose is to help you identify a website quickly, especially when you have multiple tabs open or need to spot a specific brand’s URL in a list. Short for “favorite icon,” the meaning of favicon is synonymous with terms like site or website icon, URL icon, and bookmark icon. Think of favicons like app icons—visually identifiable square graphics to help you find the content you want more quickly.
Favicons are displayed as tiny icons on browser tabs.
In addition to browser placement, favicons are used in many other places. For example, you’ll see them to the left of the website in your bookmarks bar as well as lists of bookmarked websites you saved to revisit later. When you go to a Google search page, it’s not uncommon to see them displayed below the search bar for sites you have recently visited.
Website icons display in your bookmark bar and lists.
You can find examples of favicons in the following alternative locations:
Favicon Example Use 1: Auto-complete Search Suggestions
Sometimes when you search for something in a search bar or start to type in a website’s URL, you’ll get auto-fill recommendations that include website favicons. This helps you choose the brand or company you want because you’re likely to recognize a familiar logo or color scheme more quickly than the name of the company.
You can also see favicons in your search suggestions.
Favicon Example Use 2: Search Result Lists
There are instances where you will also see favicons within search results. For example, if you go to Google News, they are displayed within the search results so that readers can quickly and easily identify which news source the results are from.
Google News also displays website icons from news agencies.
Favicon Example Use 3: Browser History List
Browser history is another place you’ll see favicons, making it easy to find a site you recently visited among what might be a long list of sites visited. You should be able to quickly identify a site or article you want to revisit just by seeing this small brand image.
Examples of favicons as they are displayed in your online search history.
Favicon Example Use 4: Mobile Search Results
Though the favicon examples above are all taken from a desktop, they are also heavily present on mobile devices. See if you can spot the favicons present from the mobile device search below (hint: they’re beside the website’s URL).
See each website’s favicon beside the URL in mobile search results.
Favicon Design Best Practices
When creating your small business website, design a custom favicon. There’s no hard and fast rule when it comes to creating a favicon for your business, but it will ideally help increase brand awareness. Not all businesses use logos, and not all logos are ideal for shrinking for use as a favicon for a browser tab.
Here are some favicon examples and tips for how to make one of your own:
- Business’ logo: Arguably the most common type of favicon is a downscaled version of your company logo.
- Part of your logo: If your logo is too big, or just doesn’t look great in a smaller size, try using an easily identifiable part of your logo as your favicon.
- Something similar to your logo: Create a simple square with your business’ initials in your brand’s main color and font, or a circle with an icon that represents your business or industry, such as a pair of scissors for a salon or barber shop, or a fork and knife for a restaurant.
Favicon examples: Mighty uses their company logo as their favicon.
Press uses a distinguishable part of their logo as their favicon.
Velasca uses the first letter of their name as their favicon (“V”), but with the same font.
Creating a great favicon for your website—even after being inspired by the favicon examples above—can be challenging. If you want to leave it up to a professional, try Fiverr, where you can find professional graphic designers who will do the job for as little as $5.
Best Favicon Size
What is a favicon’s size? There is no one answer. Favicon sizes range anywhere from 16×16 pixels (px) to 512×512 pixels. Many small business website builders have their own specific recommendations, so it’s worth following recommendations from the content management system you’re using to build your site. In general, it should be square and optimized for use online so that it doesn’t slow down page load times when someone visits your site.
Provider | Recommended Favicon Size |
|---|---|
Google | Multiple of 48x48px (e.g., 48x48px, 96x96px, etc.) |
Squarespace | 100x100px to 300x300px |
GoDaddy | 180x180px or less |
IONOS | Multiple of 16x16px (e.g., 16x16px, 32x32px, 48x48px, etc.) |
Shopify | 16x16px or 32x32px |
Weebly/Square | 64x64px or less |
Wix | Multiple of 48x48px (e.g., 48x48px, 96x96px, etc.) |
WordPress | 512x512px |
Pixel-based images won’t scale up well and become blurry if enlarged, but most are just fine to size downward if they start at a higher resolution. It’s always best to start out with the maximum resolution supported by your CMS, as favicons are scaled down automatically to fit the dimensions needed. In other words, if you submit a 512×512-pixel favicon size image, it will be automatically scaled down to fit the 16×16-pixel favicon image area.
Best Favicon Format: ICO vs PNG vs SVG
Microsoft introduced favicons as a concept back in 1999 when it debuted the ICO (.ico) extension. Other browsers quickly adopted the file format and the use of favicons. Recently, though, the most popular browsers started accepting PNG and SVG image files for favicons. So, what is the best favicon format: ICO, PNG, or SVG?
- Benefit of ICO: All browsers support ICO, and it offers backward compatibility, so if someone still uses Internet Explorer 5 (IE 5), for example, they will still see your favicon.
- Benefit of PNG: It is small in size and compatible with all browsers (with the exception of some older versions of IE). PNG gives a high-quality image without pixelated edges.
- Benefit of SVG: SVG is a scalable format, meaning you can upscale or downscale one image without quality loss—unlike PNG. SVG is supported by most browsers.
In addition to understanding what a favicon is and how to use it, to make sure your favicon format will display properly, consider the web browser market share. According to W3Counter: More than 67% use Chrome, 16.2% use Safari, 5.5% use Internet Explorer and Edge, 3.2% use Firefox, while less than 2% use Opera.
If the majority of users are on Chrome and Safari, a PNG file type and 512×512-pixel favicon image size is fine. Since PNG is high quality, supported by all browsers and apps, and only presents quality loss when upscaling, it’s the safest choice for your favicon.
Favicon Design Tips
Favicon design is something akin to the story of Goldilocks and the Three Bears in that you are looking for the just-right combination of color and identifiable graphic. Here are some favicon design tips for creating the best image for your website:
- Keep it simple—your favicon will stand out more if you avoid a busy, intricate design.
- Shrink your logo or use an identifiable part of your logo, an acronym, or even a single letter if your entire logo can’t fit or is so detailed that it doesn’t look good sized down.
- Use your brand’s colors, including contrasting colors to make your favicon pop visually.
- Don’t go overboard—the best favicons are clear and easy to identify.
- Use a transparent background to make your favicon appear isolated on any browser tab.
How to Get a Website Favicon
If you don’t have a business logo or it doesn’t scale well for a favicon’s size, you have more options. For example, you can design your favicon using graphic design software by purchasing web-sized icons or by hiring a pro to create a memorable, branded favicon for your business.
Here are some of the best ways to get a favicon for your small business website:
- Fiverr: Find professional freelance graphic designers to create a custom favicon (or logo) for as low as $5 on Fiverr.
- Envato: Purchase icons and other graphics to create a favicon for your business. It is available as a subscription through Envato Elements for those wanting a long-term, low-cost resource for website and marketing graphics, or as one-time purchase through Envato Marketplace.
- Canva: Use Canva’s free online graphic design software, including free and premium images you can edit and resize for favicons and logos.
- Squarespace Logo Maker: Even if you don’t build a website with Squarespace, you can use the free logo generator to create a custom favicon to represent your brand.
Want more options? Check out these 13 sites where you can source free professional images that are high quality and editable for favicons, logos, and more.
How Favicons Help UX & Brand Awareness
So, what is a favicon for? In addition to learning what a favicon is, it’s important to know what it does (and doesn’t) do. For example, adding one to your website won’t directly affect search engine optimization (SEO). However, it can still be indirectly beneficial to your SEO through user experience (UX) and brand awareness.
When people see your branding repeatedly, they are more likely to remember and associate it with your business and their experience with your company. In turn, they will keep your brand top of mind and more likely revisit your site or purchase from your business again.
Search engines favor websites that provide a quality user experience, and so those sites rank higher. For this, search engines largely rely on metrics to gauge user experience; for example, are they new or repeat site visitors? How much time are they spending on your site? Are they viewing multiple pages? Are they taking actions such as making a purchase, submitting a web form, or downloading something?
Favicons help users easily identify specific websites on browser tabs, in history files, and in bookmarks. So, that little bit of UX might influence your ranking. Plus, when your favicon causes people to visit your website instead of your competitors, you’ll gain repeat visitors and increase traffic that will help you rank higher on Google and other search engines.
What Happens if You Don’t Have a Favicon
If you don’t have a favicon, a generic grey globe placeholder or blank icon will be displayed by your URL (the fourth tab in the image below). If you use a content management system (CMS) and don’t upload a favicon, you might see the content management system’s logo instead (e.g., WordPress, like the third tab in the image). Unfortunately, this doesn’t provide the optimal user experience or boost your business’ brand awareness compared to having a favicon.
What is a favicon—and what happens if you don’t use one.
Frequently Asked Questions (FAQs)
How can I create a favicon for free?
If you don’t have graphic design software, you can create a favicon for free using the online graphic design app Canva. Some website builders have logo creators, so you can design your logo and favicon at the same time and it shouldn’t cost you anything extra. For this, we highly recommend Squarespace’s free logo maker.
I know what a favicon is, but is it necessary?
Although a favicon isn’t absolutely necessary, it’s one of the essential website basics included in our checklist. It’s a small, easy, and often free way to help with branding and to improve UX. A favicon makes it easier for users to recognize and find a site in a list of bookmarks, history archives, and on browser tabs. Get a professionally made, memorable, high-quality, custom favicon image for as little as $5 from a freelance pro on Fiverr.
Where do I put a favicon?
A favicon shows up in the top left corner of a browser tab, but to get it there, you have to use your CMS to upload your image in the right spot. Typically, you won’t need to edit any code, and most website builders as well as WordPress page builders let you add your favicon in the site settings menu with a simple upload.
Bottom Line
A favicon is a small image present on web browsers, browsing histories, bookmark bars, and in search results on both desktop and mobile devices. Most businesses use a smaller version of a logo as a favicon to increase brand awareness and visibility. We highly recommend adding a favicon to your website as a free way to improve user experience and thus, SEO.
Get help in creating your logo or favicon on Fiverr—a platform where you can find a professional graphic designer to help you for as low as $5.
You Might Also Like…
- Did you know it can take five to seven impressions to create brand awareness? Learn more in our list of branding statistics.
- Using WordPress? Here are 30 WordPress tips and tricks to help you get the most out of your website.
- All-in-one site builders like Squarespace, Wix, and GoDaddy all have graphic design tools you can use for free to create a favicon. Learn more about the best website builders for small businesses in this guide.
