Favicons and Site Icons

Designing and uploading a favicon is not complicated but there are certain best practices that should be followed to ensure it looks professional and stands out from the crowd. In this article we'll discuss how to design an effective favicon and how to upload it to various platforms like WordPress, Squarespace and Shopify.
Table of Contents

What Is a Favicon?

Site icons, also known as “Favicons,” are the small icons in your browsing tab windows that identify a site. They are commonly found above the URL bar of your preferred browsing window (pictured below). The main purpose of a favicon is to help users identify a website without having to look at the full URL.

Benefits of Using a favicon

Favicons may be small, but they pack a powerful punch when it comes to website design and user experience. These little icons serve as visual markers that help users identify and remember websites more easily. Imagine browsing the internet with dozens of tabs open – favicons help you quickly find the right tab amidst the sea of web pages. They also appear in your bookmarks bar, making it easier to spot your favorite sites at a glance.

But favicons aren’t just handy for users – they’re also crucial for website owners. By incorporating a favicon into their site, businesses can reinforce their brand identity and establish a sense of professionalism. A well-designed favicon can make a website instantly recognizable, even when it’s just a tiny icon in a crowded browser tab. It’s like putting a stamp on your online presence, signaling to visitors that they’ve arrived at the right place.

Moreover, favicons contribute to a seamless and cohesive user experience. When a website’s favicon matches its branding and overall design aesthetic, it creates a sense of harmony and continuity. This visual consistency helps build trust with users and encourages them to explore further. Plus, a memorable favicon can leave a lasting impression, making visitors more likely to return to your site in the future. So while they may seem small and insignificant, don’t underestimate the impact that favicons can have on both website design and user experience.

Integrating Brand Identity

Matching favicon colors with brand colors is a savvy strategy for maintaining consistency and recognition across your website and beyond. When users see your favicon, they should immediately associate it with your brand, much like spotting your company’s logo in a crowd. One approach is to use the primary colors of your brand palette in your favicon. These are the colors that represent your brand identity and are typically used in your logo, website design, and marketing materials. Another strategy is to choose a dominant color from your brand palette and use it as the primary color for your favicon. This can help streamline the design process and ensure that your favicon remains consistent with your brand’s overall look and feel. Additionally, consider incorporating complementary colors or accents from your brand palette to add depth and visual interest to your favicon. It’s also important to consider the background color of your website when selecting favicon colors. You want your favicon to stand out and be easily recognizable against different backgrounds, so choose colors that contrast well with your site’s background color. This ensures that your favicon remains visible and eye-catching, whether it’s displayed in a browser tab, bookmarks bar, or mobile device. Ultimately, the goal is to create a favicon that not only reflects your brand identity but also captures the attention of your audience. By carefully selecting and matching colors, you can create a cohesive and memorable visual representation of your brand that enhances recognition and reinforces your brand’s presence across the web. So don’t be afraid to experiment with different color combinations until you find the perfect match for your favicon and brand identity.

How to make a favicon

Making your own custom favicon is simpler than you might think. In a nutshell, it’s mainly the design of an icon and uploading it to the appropriate place on your site. Depending on the platform you’re using, there will be specific instructions for how to do this (I’ll cover a couple below). Some platforms, Squarespace and Wix, may even provide an automated favicon maker for customizing your icon with ease.

Design Considerations

When initially conceptualizing your favicon, it’s helpful to draw inspiration from elements of your brand identity. Start by examining your logo, if you have one, and identify any distinctive symbols or visual motifs that represent your brand.

Consider incorporating these elements into your favicon design to maintain consistency and reinforce brand recognition. Additionally, think about your brand’s color palette and how you can use it to create a cohesive visual identity. Choosing colors that align with your brand’s personality and values can help establish a strong connection with your audience. Don’t forget to keep your favicon design simple and easily recognizable, even at a small size.

Goal of a Favicon

If you’re anything like myself, you probably have a dozen tabs open at any given time. In this cluttered digital space, the goal of a favicon becomes even more crucial: it’s your website’s chance to stand out amidst the chaos of browser tabs. A favicon serves as a beacon, guiding users back to your site with a quick glance. It’s a small yet significant symbol that embodies your brand identity and ensures your website is easily recognizable.

When someone encounters your favicon, whether it’s nestled among other tabs or in search results, the aim is for them to immediately associate it with your brand. That’s why it’s vital to design a favicon that captures the essence of your brand, whether through your logo, color palette, or a distinctive symbol. Your favicon should leave a lasting impression, reinforcing your brand identity and making your website memorable to visitors.

But the importance of standing out in the web browser extends beyond mere visibility – it’s also about enhancing user experience. A well-crafted favicon adds a touch of professionalism to your website and facilitates navigation for users. By providing a familiar marker in the digital landscape, your favicon cultivates loyalty and builds trust with your audience.

favicon best practices

To ensure your site icon looks professional and stands out, follow these best practices:

Because your favicon will have a very small space to take up, I don’t recommend using text or complicated images. Instead, use simple shapes or logos that are meaningful to your brand. For example, if you run a blog about cooking, you could create an icon with a spoon as the centerpiece of the design. Some of the world’s largest companies use a single icon (but are sure to incorporate their brand colors). Go to google.com and check out the site icon in your browser tab.

It’s just a simple “G” on a white circle background. Here’s a screenshot with a few other examples, three from Google and one from Apple on the far right. Notice that there’s nothing inherently complicated about them but they follow best favicon design practices.

where to design a favicon

There’s a multitude of programs available to assist you in designing and saving your new favicon. All you really need is an image editing software like Canva, Photoshop, or Illustrator. However, in my opinion, the best option is a vector-based program such as Adobe Illustrator. Working with vector graphics ensures that achieving ‘pixel perfect’ results is always within reach, regardless of the size you scale your favicon to.

Once you’ve settled on a solid concept for your favicon, the next step is to translate it into a digital format. This process, known as digitization, involves using graphic design software to bring your favicon to life. Popular tools for this purpose include Adobe Photoshop, Illustrator, Canva, and Figma. These software options offer a wide array of features and functionalities to simplify the favicon design process.

When crafting your favicon, it’s essential to bear in mind that it will be displayed at a small scale to ensure clarity and visibility. Favicons are typically sized at either 16×16 pixels or 32×32 pixels. Although these dimensions may seem minuscule, they are vital for preserving the crispness and recognizability of your favicon, even when viewed in a browser tab or bookmarks bar.

Using graphic design software, you can fashion your favicon by either starting with a blank canvas or importing elements from your brand identity, such as your logo or color palette. Keep your design simple and straightforward, as intricate details may not be discernible at such a diminutive size. Experiment with various layouts, colors, and shapes until you arrive at a design that effectively encapsulates your brand and is visually appealing.

Upon finalizing your favicon design, remember to save it in the appropriate file format, such as PNG or ICO. PNG is a favored choice for favicons due to its transparency support and widespread compatibility with modern web browsers. Although ICO format was traditionally used for favicons, its significance has diminished with the widespread acceptance of PNGs by most content management systems (CMS) and web platforms.

favicon colors

The colors, typically between 1-3 colors maximum, should match or compliment your site’s color scheme. This gives the user continuity between your business identity and the browser icon. This also helps with visitor recognition on your site over time. It is important to not over-complicate your site’s icon as well. Because the site icon is very small compared to the window/tab open, there is no need to overcomplicate matters. In fact, more than 3 colors can muddle and become confusing for the site’s icon. 

Saving In The Correct Favicon Format

Ideally, saving your new site favicon in .ico format is recommended. However, if your image editing software doesn’t support exporting to .ico, fret not! There are numerous ‘favicon converters’ available online that allow you to upload and export your designs hassle-free. In my opinion, opting for a format like PNG (if .ico isn’t readily available) is a solid choice as it has gained popularity and widespread support across browsers, page builders, and more.

Using online generators for format conversion offers a convenient and straightforward solution to transform your favicon design into the required file format. These user-friendly tools simplify the process, ensuring compatibility with various web browsers and platforms. Whether you’re starting from scratch or converting an existing image, online generators streamline the process effortlessly.

To utilize an online generator, simply search for “favicon generator” in your preferred search engine, and you’ll find an array of options to explore. Upon selecting a generator, you’ll typically be prompted to upload your favicon design file, which can be in formats like PNG, JPEG, or SVG.

Once uploaded, the online generator automatically converts your design into the required favicon formats, such as ICO and PNG. Some generators even offer customization options, allowing you to adjust settings like size, transparency, and background color to tailor the favicon to your preferences.

After the conversion process is complete, you can download the generated favicon files and proceed to install them on your website. It’s as straightforward as that. With just a few clicks, you’ll have a professionally formatted favicon ready to elevate your website’s branding and enhance user experience. Here’s a helpful favicon generator tool (no affiliation with) to kickstart your favicon creation journey.

Using Icons In Your Favicon

Icons are another great option for favicons. Due to their simplicity, icons allow for a subtle but effective brand identity. You can get icons by using sites like Shutterstock, Envato Elements or a free version using something like the popular site “IconFinder.”

Once you’ve downloaded your icon, upload it to the image-editing software of your choice. If you don’t have Adobe Illustrator, you can use other tools like Canva to resize and recolor the icon.

Favicon Icon Selection
Site Icon Creating Using Adobe Illustrator

dimensions needed

When it comes to favicon dimensions, simplicity is key. Regardless of the scale, your favicon must maintain a square ratio, meaning its width and height should be the same. This square shape ensures that your favicon remains visually balanced and clear, even when displayed at different sizes across various platforms.

Typically, favicons are sized at either 16×16 pixels or 32×32 pixels. While these dimensions may seem small, they are perfectly suited for the favicon’s intended purpose – to serve as a recognizable symbol for your website. Despite their diminutive size, favicons play a crucial role in enhancing brand recognition and improving user experience.

The square ratio of the favicon allows it to seamlessly integrate into different web environments, such as browser tabs, bookmarks bars, and search results. Whether it’s displayed alongside other favicons or in isolation, the square shape ensures that your favicon maintains its clarity and visibility, making it easy for users to identify your website at a glance.

How To Upload a favicon

Installing a favicon on your website is a simple process, but the steps may vary depending on the content management system (CMS) you’re using. Let’s walk through the general installation process for some popular CMS platforms:

WordPress Favicon

In WordPress, adding a favicon is a breeze. First, log in to your WordPress dashboard and navigate to Appearance > Customize. From there, look for the option labeled “Site Identity” or “Site Icon.” Here, you can upload your favicon file (typically in PNG format) and save your changes. WordPress will automatically display your favicon in the browser tab and bookmarks bar.

Squarespace Favicon

Squarespace makes it easy to add a favicon to your site. After logging in to your Squarespace account, go to Design > Logo & Title. Look for the option to upload your favicon image under the “Browser Icon” section. Once uploaded, Squarespace will automatically generate the favicon for you.

Wix Favicon

From your Wix dashboard, go to Settings > SEO (or SEO & Social). Scroll down to the “Favicon” section and click “Choose Image” to upload your favicon file. Wix will then display your favicon across your site.

Shopify Favicon

Log in to your Shopify admin dashboard and navigate to Online Store > Themes. Find your active theme and click “Customize.” From the theme editor, look for the “Theme settings” or “Header” section, where you’ll find an option to upload your favicon image. Once uploaded, save your changes, and Shopify will display your favicon throughout your store.

favicon background colors

When choosing background colors for your favicon, the key is to focus on contrast to make it stand out. Contrast is essential for ensuring that your favicon remains visible and eye-catching, especially when displayed in a browser tab or bookmarks bar alongside other icons. By selecting background colors that contrast well with your favicon’s design, you can ensure that it remains clear and easily recognizable to users.

A simple way to achieve contrast is by choosing background colors that are different from the colors used in your favicon’s design. For example, if your favicon features a dark-colored logo or symbol, consider using a light-colored background to make it pop. Conversely, if your favicon incorporates bright or vibrant colors, opting for a neutral background can help create a striking contrast.

It’s also important to consider the background color of your website when selecting favicon background colors. You want your favicon to stand out against different background colors, so choose a background color that complements your website’s design while still providing sufficient contrast. This ensures that your favicon remains visible and distinct, regardless of the context in which it appears.

Ultimately, the goal is to create a favicon that grabs the attention of users and makes a memorable impression. By focusing on contrast and selecting background colors that enhance visibility, you can ensure that your favicon stands out in the crowded digital landscape, effectively representing your brand and improving user experience. So don’t be afraid to experiment with different color combinations until you find the perfect balance of contrast and visibility for your favicon.

Where to get a favicon

Whether you have an idea in mind already or want to start from scratch, get in touch below to start your favicon. All questions welcome.

Custom Favicon Design

(single custom site icon)
$ 50 (starting at)
  • Formats Include ICO and PNG
  • 2 Revisions Rounds Included
Popular

Get In Touch

Questions and Conversations

Submit Your Project Info

Questions, comments or feedback on anything you’ve seen here. I’ll get back to you as soon as possible.