Having the best logo for your business is essential, but it’s just as important to use your logo effectively to brand yourself online. That includes a favicon. Although it’s small in size, don’t underestimate the effectiveness of a favicon!
This guide will cover all the information you need regarding favicons, from what it is and why you need it to how to add it to your website.
A favicon is a small image that represents your brand in web browsers. It was first introduced in 1999 for Internet Explorer to help users tell bookmarked web pages from others. Since bookmarked pages are called “Favorites” in Internet Explorer, the words “favorite” and “icon” were blended to create a new term.
If you take a look at the tabs you have open on your browser, you’ll see a small icon. They can be found anywhere your website appears, such as in address bars, browser tabs, history results, and bookmarks.
Favicons usually feature a logo or the first letter of the business name. However, even though they are sometimes the same, don’t confuse favicons with logos. For example, notice how Tailor Brands’ favicon is also the same as our logo.
There are a few purposes of a favicon. First, they enhance the user experience on your site allowing users to find your website easily when they have a few different tabs open. I know I’m not alone in my tendency to keep dozens of tabs open. In that case, you can tell which site you need by looking for that particular favicon.
You need a favicon to increase brand recognition. Just think about businesses you interact with daily, like Twitter and Instagram—I’m sure you can easily picture their favicon almost without thinking. That’s the power of a favicon! Also, it can help drive more traffic to your business’s homepage.
Lastly, favicons prove the legitimacy of your site and brand. Customers view a business website and make a quick judgment based on its quality or design. A custom favicon can make your website appear legitimate, create credibility, and enable customers to feel like they can trust your business.
There are 2 main ways to create a favicon for your website based on your logo. Let’s check it out now.
The first option is to create a favicon using your entire logo. In fact, many businesses decide to use their logo to support consistent brand identity. Both the software company Figma and ecommerce agency Make Web Better use their entire logo as their favicon.
You can also create a favicon by using a certain part of your logo. Look at your logo and identify which are the most important elements. Ask yourself what people recognize instantly, what element stands out the most, and which feature embodies your brand.
In most cases, an icon is the most striking feature in a logo, which makes it the obvious choice for a favicon. In fact, that’s what we did at Tailor Brands! Yelp also uses their burst shape icon as their favicon. The star shape is meant to capture the moment Yelp users make a discovery. The meaning behind Yelp’s icon represents their brand mission. This kind of important element makes it the perfect choice for a favicon.
Remember to utilize your logo’s color palette to your advantage, especially if it’s important to your brand identity. Mailchimp, for example, has 2 unmistakable logo features: The mailman hat-wearing monkey and the color yellow. Using those 2 features together as their favicon achieves 3 things: It plays on their strengths, increases brand recognition, and allows them to stand out from the crowd. The same can be said for insurance company Lemonade who use their unique hot pink color palette with their first initial to create a memorable and striking favicon.
Shapes are the building blocks of any logo design. Our brains memorize bold shapes easily, which makes them easier to recall and leave a lasting impression. PhotoScape, an editing software, has a favicon that’s a unique shape; it almost looks like a lowercase reversed letter “p”. Another business that uses shape to their advantage is Peta. The animal rights nonprofit organization created a favicon in the shape of a rabbit cut inside a blue square. Simple, effective, and on brand.
An alternative option is to use a simplified special feature. For example, Ben & Jerry’s favicon looks like a loose graphic combining the letters “B” and “J”. Even though that’s not their logo, they took a special feature (the unique script font and their special shade of blue) to create a one of a kind favicon. Similarly, Duct Tape Marketing took a simplified image of their site to create a favicon.
There isn’t a single standard format, but I recommend having 2. The first is the ICO format, which is the recommended format supported by most web browsers and the only format supported by Internet Explorer. It can support multiple sizes. To convert your file to the .ico format, you may need to use an online tool such as iconifier.net, prodraw.net, or faviconer.com. The second format is PNG, which is standard for images and allows you to store your favicon as a very small file, which is important to ensure fast loading times.
The size of your favicon file depends on where you’ll use it. The standard size is 16 pixels, which you can use in most browsers and the Favorite bar. However, the iPod Touch icon and first generation iOS systems require 57 pixels. Newer systems require 114 pixels and Google TV requires 96 pixels. I recommend you have the standard 16 pixels and a 128 pixel size for places you’ll need a large icon like the Google Chrome Store.
The last step is adding your new favicon to your site. Once you have your image saved, rename the .png or .ico format to “favicon.” Most browsers automatically detect favicon.png and favicon.ico files located in your website directory as your website’s icon, so you won’t need to code.
Next, go to your public_html folder by heading over to your hPanel, then File Manager, and next go to File Manager. Upload the favicon.png or .ico file into your public_html folder. Once you reload your website, your favicon will be there.
A favicon is an essential part of branding your business. Although it’s arguably not the most important aspect of your website, it shouldn’t be overlooked. A favicon will allow potential customers to remember you, stand out from the competition, and increase your credibility. I hope this guide has given you all the information you need on favicons, why you need one, and how it can boost your marketing efforts.
The information provided on this page is for information, educational, and/or editorial purposes only. It is not intended to indicate any affiliation between Tailor Brands and any other brand or logo identified on this page.
Carly Miller is a freelance content writer specializing in all things branding related. When she’s not writing, you’ll find her traveling, playing with her dog, or reading a good book.
