5 Creative Uses for Your Website Favicon

Do we even remember a time before favicons?

Those little emoji-sized logos we see in our browser tabs and windows are often overlooked, but essential to a brand’s full experience online.

However, favicons are more than just an essential brand element: They’re also vital for users who like to bookmark. These little icons help identify bookmarks quickly and easily. If your brand grows, your favicon can become even more recognizable than your logo.

Favicons typically come in specific sizes, usually square in shape. The most common favicon sizes are:

16×16
32×32
48×48
64×64
128×128

Did you know favicons are also important to search engine optimization and indexing? That’s because they help make the website more credible, which increases usability — all of which can positively impact search engine optimization (SEO).

Some logos are simple in their design, and enough so that they can be favicons without much tweaking. For example, companies like the global coffee favorite, Starbucks, can easily use their flat, twin-tailed mermaid logo as their favicon, which strengthens their brand recognition.

But if your logo design is more detailed than that — due to a long business name, or because of the multiple colors of fonts that make it hard to pare down to a 16-by-16 square, you probably need a favicon that’s simple but still ties into your brand.

Stacy Jackson, a digital marketing analyst at Clearlink, believes brand consistency is essential to experience, both online and off. “Every interaction customers have with your brand should embody the brand promises and values dependably and understandably,” Jacksons writes.

If you don’t have your favicon set for your website, get it added as soon as possible! And if you do have your favicon, but you’re wondering how else to use this handy little brand element, here are five creative places you can use it.

App Icons

Check your smartphone right now and notice the simple, rounded boxes and easy-to-find icons on your screen. If done well, these icons should be quickly recognizable, from your phone’s photo gallery to Uber to Facebook. These, often, are favicons for these app companies.

By making several sizes of your favicon, as mentioned above, you can reserve one of these for any apps you develop in the future.

Using your website favicon as your app icon only strengthens your brand recognition and brand consistency across platforms. It may not seem like much, but this is essential for user experience (UX) and user confidence.

Social Media Profile Pictures

Like your app icons, social media profile pictures work best when easy to recognize at first glance. Busy photos or logos are difficult to decipher for a scrolling or swiping user. The more clear and recognizable it is, the better chance you have of followers seeing and connecting with your brand.

Along with your easy-on-the-eyes favicon, your social profiles should also have a clear brand or mission statement that’s easily accessible, as well as links to your website, ways followers can contact you, and other information imperative to the social persona experience.

Slickplan Twitter

🎬 Learn what Slickplan can do!

We filmed a short video to show you exactly how to use Slickplan

Website Icons and Chatbots

If you’ve got your favicon in place, it should be visible in your browser tab or window, where it belongs. But with favicons, you can think beyond the window and integrate it into your website for consistency, including using it as loading icons on your website, or with your chatbot’s profile picture (if you have a chatbot).

Animation with your favicon might be a great place to start for loading icons. While a pinwheel, sand timer, or spinning circle is acceptable for loading icons, too, think about how powerful your favicon could be as an animated brand element. From your website to your app, consider adding your animated favicon to signify something’s loading to the end-user (and strengthening your brand in the process).

Similarly, if you’re employing a chatbot on your website in the growing popularity of artificial intelligence, you could use the favicon as your chatbot’s “profile picture,” so that users know they’re connecting with your brand and not a third-party. Avoid stock photos of random headset-wearing people and instead strengthen your brand awareness.

As you brainstorm these elements with your design, consider adding them to your design mockup to share internally and talk about other places where your favicon might improve user experience on your website.

Print Promotions and Email Marketing

Gone are the days of plain ol’ standard font letterheads. And don’t even consider hovering your mouse toward Comic Sans. Instead, bring your favicon into your business cards, letterheads, and email templates to string your brand into your online and offline promotions.

Home Depot

Specifically in print materials, your favicon could be used in or as:

Watermarks
Page icons
Header and footer decoration
Address templates
Envelope templates
Email templates
Email signatures

These elements, when seen throughout your materials, solidifies your brand standard and recognition.

If you have a logo that’s separate from your favicon, make sure this is available on your templates where appropriate. But your favicon — if designed well and easily tied to your logo — can be a great place to reiterate your brand image.

Need more ideas? Deluxe offers 125 marketing places where your logo or favicon could be added to heighten your brand.

Merchandise and SWAG

Like your letterheads, social profiles, app icons, and beyond, merchandise and conference or trade show SWAG (stuff we all get) is a great place to expand your reach and recognition. Whether a lanyard, pen, hat, or sticker, if your favicon captures your logo and brand, it can be easily placed on promotional merchandise that can drive more traffic to you.

When using your favicon or logo on merchandise, though, don’t forget to include a link to your website too, especially if you’re just starting out. While big players like Facebook, Google, and LinkedIn might be recognizable by their favicon today, it’s not that way for every brand. Make sure people who get their hands on your logoed merchandise know who you are later.

How to make a great favicon.

Are you ready to heighten your brand awareness by building an easily recognizable and admirable favicon? Fortunately, there are a handful of great tools to help you make a user friendly favicon without any design skills. Checkout this comprehensive list of favicon tools and generators at Sitechecker.

But if you’re looking for a challenge or want to work with a designer to make your own favicon, start with these tips:

Don’t stray far from your logo. Your favicon should be easy to recognize and simple, but not so simple that your brand gets lost. Consider acronyms, or the first letter of your business name, as a place to start.
Incorporate brand colors. If your colors are blue and red, don’t make a favicon that’s green and yellow. There should be consistency across your brand styles. If you haven’t built a style guide or color palette, be sure to get that on paper too. Smashing Magazine has some tips for making a great brand palette.
Work within the restricted size first. Don’t think too outside the box (no pun intended) and start your design inside the restricted square space to make sure it’s readable and recognizable. If you start your favicon too large and size it down, its detail and ease of recognition might be lost.
Create transparent and solid fill versions. The transparent version of your favicon is used on the browser against your website URL, while the solid fill version of your logo is ideal to be showcased on the shortcut menus, bookmarks, and mobile and TV homescreens.

If you’re looking for other tips, including file types and animation tips, check out this tutorial for favicon tips.

Think visually. Improve UX with Slickplan

Build intuitive user flows, stronger customer journeys and improve information architecture.

14-day free trial

No credit card required

Add your favicon and logo to your style guide.

Before you jet off with your new favicon in hand, ready to paste it on stickers, letterheads, and social channels, be sure you add it to your brand style guide.

Your style guide should be the home to all things with your brand, from grammar and word usage to color palettes and logo use. Style guides should, ideally, also list not only where favicons and logos can and should be used, but where they shouldn’t be used. Any notes about color changing — including black and white or grayscale versions of your logo and favicon — should be included.

Similarly, your brand colors should identify the specific hexagon codes to ensure employees and designers don’t stray from the chosen palette. Brand consistency is the name of the game in style guides, and by including your favicon dos and don’ts, you’re solidifying who you are and how your team represents across all media.