A favicon is a small but mighty branding element that shows up in browser tabs, history archives, and bookmark lists. Favicons (aka site icons) are usually a company’s logo and though they’re tiny, they’re a worthwhile site element that can actually increase brand awareness and help improve user experience. It’s also free and easy to create a favicon, so stick around to see example uses and learn how to add one to your business website.
Where You’ll See Favicons
The tiny favicon, or site icon, is meant to help you identify a website quickly when you have multiple tabs open. Think of favicons, or website icons, like the icons on your phone’s home screen—visually identifiable squares to help you choose what you want quickly. However, favicons show up in places other than just the tops of browser tabs.
In addition to in browser tabs, here are the other locations where favicons are displayed:
Bookmarks Manager
When you open your bookmarks manager, you’ll notice that favicons are displayed to the left of the web address.
Auto-complete Search Suggestions
Sometimes when you search for something in a search bar, you’ll get recommendations that include a website’s favicon. This helps you choose the brand or company you want because you’re likely to recognize a logo or color scheme more quickly than the name of the company.
Within Search Results
There are instances where you will also see favicons within search results. For example, if you go to Google News, favicons are displayed within the search result so that readers can quickly and easily identify which news source the results are from.
Browser History
Browser history is another place you’ll see favicons, which is helpful because that’s often a long list of sites you’ve visited. You should be able to quickly identify a site or article you want to revisit.
Favicons & SEO
Adding a favicon to your website won’t directly affect search engine optimization (SEO), but they’re still beneficial to your SEO as they’re helpful for user experience and brand awareness. When you see logos over and over, you’re likely to remember them and the companies they’re attached to. Not only are you likely to remember them, you’re more likely to shop there or use their service too.
So, how does brand awareness and user experience work with favicons?
Search engines are all about favoring websites that provide a great user experience (UX), and so those sites rank higher. 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.
You also have to consider how a favicon affects a user of your site. If they start to associate your site, which they like, with your favicon, there’s a greater chance that they’ll visit your site again. Repeat visitors and increased traffic definitely can help you rank higher on Google and other search engines.
Here’s what it looks like when you don’t have a favicon and you have to settle for a generic grey globe placeholder (hint: it’s the fourth tab in this image):
How many of those brands do you know just from their favicons?
Designing Your Custom Favicon
When you create your business website, it’s important to keep in mind that you’ll have to design a custom favicon. Not all businesses use logos—some just use a name, like a consultant, lawyer, or writer, for example. Also, not all logos are ideal for shrinking and using as a favicon for a browser tab. Sometimes you have to get creative when designing your custom favicon. Canva is a free graphics platform that makes it easy to create a favicon.
Sizing Your Favicon
A favicon looks so tiny—so what is a favicon’s image size? Favicons range in size, and are typically between 16×16 pixels and 192×192 pixels. However, many website builders, such as Wix and Squarespace, have their own recommendations, so it’s worth checking with the content management system (CMS) you’re using to build your site.
Recommended Favicon Size by Provider
Provider | Recommended Size |
|---|---|
Google | 192x192 px |
WordPress | 512x512 px |
Squarespace | 100x100 px to 300x300 px |
Wix | 16x16 px |
Weebly or Square | 64x64 px or less |
Shopify | 32x32 px or 16x16 px |
Remember, most images that are pixel-based won’t scale up well and become blurry if enlarged, but most are just fine if they start at a higher resolution.
Favicon File Type Formats: ICO vs PNG
Microsoft introduced favicons as a concept back in 1999 when it debuted the ICO extension. Other browsers quickly adopted the file format and the use of favicons. Recently, though, the most popular browsers started accepting PNG image files for favicons. So, should you use ICO or PNG for your favicon?
- Benefit of ICO: All browsers support ICO, and it offers backward compatibility (if someone still uses IE 5, for example, they will still see your favicon).
- Benefit of PNG: Small in size, compatible with all browsers (with the exception of some older versions of IE), and high-quality image.
Consider the web browser market share according to W3Counter: More than 65% of users prefer Chrome, 17.5% use Safari, 5.6% use Internet Explorer and Edge, 4.4% use Firefox, and less than 2% use Opera. If the majority of users are on Chrome and Safari, you can stick with a PNG file type and 512×512 pixels.
Pro tip: If you add both PNG and ICO images to your site, browsers that support PNG files typically see the ICO and use it instead. To play it safe, and to make your life easier when designing your favicon, go for a PNG.
Here are some tips for designing a custom favicon for your site:
- Try not to go overboard with lots of different colors to ensure your icon is clear and easy to identify.
- Use a transparent background to make your favicon appear isolated on any browser tab.
- Keep it simple. Your favicon will stand out more if you avoid a busy, intricate design.
- Shrink your logo, if possible, otherwise try using an acronym or a single letter to represent your brand.
- Use colors that fit your brand, and ideally these colors are contrasting, which will make your favicon pop on a page.
If you need help designing your favicon, hire a graphic designer from Fiverr to do it for you for as little as just $5.
Once you have a design, adding a favicon to a website is easier than it would seem, given all the size and file type differences. It’s one of the website basics you should learn so you can manage your own site easily. The process for how to add a favicon is a little different with each content management system (CMS) or website builder, but you shouldn’t have to edit any code to add a favicon to a website.
Select which CMS your site is built with to learn more about the specific steps:
How to Add a Favicon to a WordPress Website
1. Open the Customize Menu
Go to your WordPress Dashboard and click on Appearance > Customize. This opens a menu where you can set your theme and page settings, including your favicon.
2. Go to Site Identity
This section is where you set your site title, your logo, and your favicon. WordPress suggests your favicon start at 512×512 pixels, and then each browser uses the appropriate size. Click on the button that reads Select File to add your favicon, or Change Image to swap out a favicon.
3. Upload Your Favicon & Crop
If your image is too large, WordPress prompts you to crop, but if your image is fine, just skip cropping. WordPress shows you a preview of what your icon will look like as a browser tab icon and as an app icon. Once you’re happy with your favicon, all you have to do is press Publish at the top.
How to Add a Favicon to a Squarespace Website
1. Go to the Design Menu
From your Squarespace dashboard, click on Design. This brings up site settings. Click on Browser icon.
2. Add Your Favicon
Upload your image by dragging and dropping it or click and browse your desktop to find your favicon. Squarespace suggests you start with an image between 100×100 pixels and 300×300 pixels. Click Save. You can check to see what your favicon looks like by opening your site in a separate tab, but it may not show up immediately. If it doesn’t show up, try clearing your cache and then try again.
How to Add a Favicon to a Wix Website
1. Open the Settings Menu
Starting at your Wix Dashboard, click on Settings toward the bottom of the left menu. This opens your site settings where you can upload your favicon. Click on Manage to the right of the Favicon option.
2. Upload Your Favicon
Add or update your image by clicking on the appropriate button. Then add your favicon by dragging and dropping into the window. Wix shows you a preview of what your favicon looks like on a browser tab. The standard is 16×16, but for added quality you can also use 48×48 pixels, 96×96, 144×144, or 192×192.
How to Add a Favicon to a Weebly or Square Website
1. Go to General Settings
It’s important to check which editor you’re using to learn how to add a favicon to your Weebly or Square site. If you built a small business website (not an online store) and you’re using the Weebly site editor, you’ll want to go to your Dashboard > Edit > Settings > General.
If you have an online store through Weebly with Ecommerce by Square, you’re likely using the Square editor, so your process is slightly different. Click on Website > General Settings. You’ll see the Favicon option in the middle of the page.
2. Add Your Favicon
Upload your favicon, as you would any other image. Both Weebly and Square editors simply accept the image—there’s no save button for you to press. The Square editor suggests you use an image that’s no bigger than 64×64 pixels. You need to publish or republish your site for the favicon to take effect.
How to Add a Favicon to a Shopify Website
1. Open Your Themes Page
Start at the Shopify Dashboard, and then click into your Online Store > Themes. In the section labeled “Current theme,” click the button that reads Customize.
2. Go to Theme Settings
Once the next screen loads, you’ll see a left menu that includes a variety of site settings, including Favicon toward the middle of the menu. Click on that option, which opens a new window in the left menu for you to upload your image.
3. Upload Your Favicon
Click to upload your image. Shopify notes that any image you use is scaled down to 32×32 pixels. After you’ve added your image, click on the button at the bottom that reads Select. When you publish your site, your favicon should show up in browser tabs. Shopify suggests your image be in PNG format and either 32×32 pixels or 16×16 pixels.
How to Add a Favicon to a GoDaddy Website
1. Open the Site Editor
Start by opening the GoDaddy site editor. At the top right side of the menu, click on Settings. This opens the site settings menu, where you find the Favicon option toward the middle of the menu.
2. Upload Your Favicon
Click on the button that reads Upload to add your favicon. GoDaddy suggests images no larger than 180×180 pixels. Press the button that reads Done, and that’s it. You should see your image in the square after you upload it, but GoDaddy doesn’t include a preview of what your favicon looks like as a browser tab image. You can check it out after you publish your site.
Frequently Asked Questions (FAQs)
How can I create a favicon for free?
If you don’t have graphic design software, you have options for creating a favicon for free with free graphic design apps, such as Canva. Some website builders include logo creators, so you can design your logo and favicon at the same time and it shouldn’t cost you anything extra. You can find many more web design tools to help you create a favicon.
Is a favicon necessary?
Although a favicon isn’t necessary to have a website, it’s a small, easy 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. Keep favicons in mind when you’re designing your website. Learn more in this guide about how to design a website.
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 site builders let you add your favicon in the site settings menu in two to three steps. For more information on these all-in-one web hosts and CMS, read this guide on the best website builders.
Bottom Line
Turning your logo into a high-quality favicon is easy and free with drag-and-drop design platforms like Canva. However, if you’re not sure where to start, or really don’t have the time, don’t skip the favicon and instead get one professionally designed for you from a graphic design pro for as little as $5 on Fiverr.
You Might Also Like…
- Show off the best favicon by starting with the best business logo design.
- Put your most professional foot forward with business email.
- Get the best value and fastest site speed by choosing the best web hosting.
Presh Arthur
Great info and i really appreciate this, therefore thanks for sharing, hope you have a good day