When you bookmark pages on the web, it’s challenging to remember the name of the page. As you dive back into your bookmarks to find it, you see a small icon next to the page. You recognize the icon and realize it’s the website you viewed prior.
This icon, known as a favicon, is small, but it has a significant impact on brand recognition.
On this page, we’ll answer the question “What is a favicon?”, as well as why you should create one, and provide four tips for creating a memorable (and compliant) website favicon.
If you want to keep up-to-date on favicons and marketing, join our weekly newsletter.
What is a favicon?
The favicon is a small icon for your website that appears next to your website’s page name or title tag.
These icons appear in numerous places, including:
- Browser tab
- Bookmarks
- Toolbar
- Recently visited
- Search bars
- Mobile searches
This little icon is an essential component of your website’s interface. It allows you to have a simple, recognizable picture associated with your website, so users get familiar with your brand.
A website favicon is even more helpful if someone bookmarks your site and wants to return to it later.
Many companies use a simple image, like their logo, as their favicon. One of the best favicon examples is Target. Target uses its well-known bullseye icon for its favicon.
You also have the option to use an icon with one to three characters of text. Wikipedia is an excellent favicon example of using text instead of an image.
There are many great favicon examples you can look at to get inspiration for your favicon. The important part is that you create a website favicon that’s clear, memorable, and easy to see.
Sizing and formatting for favicons
The next question following, “What is a favicon?” is, “What’s the right size for my favicon?” Since these icons are small, it’s essential to know the right dimensions so yours doesn’t appear smooshed.
Favicon sizes will vary depending upon the browser or if you use a website host.
Your file size should be a multiple of 48px square. So, you can have an icon file size like 48x48px or 144x144px. Regardless of the size you use, your image will get rescaled to a 16x16px ratio.
If you host your website on a website builder, your favicon sizes will differ. For example, WordPress requires 512×512 pixels for their favicon, while Squarespace requires 300×300 pixels for their favicons.
It’s also important to remember that favicons appear on browser tabs or bookmark lists.
They can also appear in a frequently visited section on your browser or as a shortcut icon on a user’s desktop. Your icon must be easily scalable for these instances because your favicon appears larger.
By knowing the sizing for these different instances, you’ll create a better favicon for your business.
Why should I create a website favicon?
Favicons offer numerous benefits for your business, including:
- Favicons build brand recognition: When you use a favicon that reflects your business, people see it and get more familiar with your company. They’ll get exposed to your brand and remember it later.
- Favicons add legitimacy to your site: Your site will appear complete with a favicon. It helps you look professional in the online sphere.
- Favicons help with search engine optimization (SEO): Favicons help you create a user-friendly website, which is an essential component in SEO. You’ll also increase brand recognition, which encourages people to return to your site and convert.
- Favicons help your audience locate your page if they bookmark it: Favicons make it easy for your audience to find your website when they bookmark it. People don’t always remember brand names, but they recognize your business by its favicon.
- Favicons help people locate your business with multiple tabs open: People often have numerous browser tabs open at one time. Instead of clicking each tab to find your company’s page, they can recognize it by the favicon.
These are just a few of the reasons to use a website favicon. By adding a favicon to your website, you’ll reap these benefits and grow your business online.
How to create a favicon
If you’re ready to make an icon for your website, check out these four helpful tips for how to create a favicon.
1. Use space wisely
When you create a favicon for your business, you must use space wisely. You don’t want to create an icon that uses so little space that users can’t see it, but you also need enough white space.
Many companies will use their logo as their website favicon.
While it’s a great idea for branding, your logo may not scale down or look good as a favicon. It may not adequately use the space you have or fit within the pre-set favicon dimensions.
If you have to create a new icon, you’ll want to optimize your space. You’ll need to plan your favicon to use up the pixel space you’re given, without making it look overcrowded or empty.
2. Keep it simple
When you design your favicon, keep it simple. A favicon makes your business recognizable but doesn’t overwhelm the user with an intricate design. The sole purpose of this icon is to reinforce your brand to your audience and help them find you easier.
If you create a favicon with an intricate design, it makes your icon look cluttered. Your audience will have a harder time remembering your brand or locating your page.
The best route involves keeping it simple.
Create something clean, brand-related, and recognizable.
3. Reflect your brand
We’ve emphasized this a few times, but to reiterate, make sure your favicon reflects your brand. Your audience uses this icon to find your business in their tabs or bookmarks. You want to use an image that fits with the rest of your brand.
Walbert Animal Hospital is a shining example of a favicon that reflects its business.
As you can see, Walbert Animal Hospital uses paw prints as their favicon. It’s a great association with their business and reflects their brand. It’s simple and helps people recognize them.
You want to use the right symbols in your favicon. In this example, people associate paw prints with animals. When a user sees these paw prints, they assume the business works with animals in some way.
If you choose to use color in your icon, you’ll want to stick to your brand’s colors. A yellow favicon wouldn’t fit with a purple and gray business color scheme. It’s essential to keep your icon the same colors as your brand to support brand recognition.
4. Consult a designer
If you aren’t sure what to do with your favicon, you can always consult a web designer. A web designer is an excellent option because they provide you with a unique favicon. You’ll get a favicon scaled correctly for the web.
Many businesses rely on generators to create favicons. While these generators are easy to use, they require you to search through databases of icons to find the right one for your organization. You then have to resize and scale it appropriately.
With a web designer, you don’t need to pull a stock image from a database. You get a customizable favicon that’s unique to your business, correctly scaled, and reflective of your company.
Start creating your website favicon today
A favicon is a critical component in building brand recognition. Creating and uploading your website favicon helps users recognize your business and find it quickly on their browsers.
If you don’t know how to create a quality favicon for your business, our team at Tested Technologies can help. We have a team of dynamic award-winning web designers that will help you create a stellar favicon.
Want to learn more about how to design a high-quality favicon?
Contact us online or call us today at 0802-583-7481 to speak with a strategist.
The post What Is a Favicon? [+4 Tips for Creating an Impactful Favicon] appeared first on Tested Technologies Blog.
