add_action( 'wp_footer', function() { if ( ! defined( 'ELEMENTOR_VERSION' ) ) { return; } ?>

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

Having a Favicon has several benefits. It adds credibility and trust to your website, as well as increases recognition. A good favicon can also make it easier for visitors to find you in search results or bookmarks. Furthermore, they are also essential if you want to integrate with social media platforms such as Facebook and Twitter.

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 designing your site icon, there are a few key things to consider: size, color, and contrast. First, you’ll want to make sure your icon is the correct dimensions for all browsers and devices. This size can vary, but usually sits between 16×16 pixels to 70×70 pixels. Second, use colors that represent your brand or website. Lastly, make sure the contrast of your icon is clear and visible against any background (remember that everyone will have different browser tab colors).

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 whole host of programs that will let you design and save your new favicon. Really all you need is an image editing software (Canva, Photoshop, Illustrator, etc.) but the best option, in my opinion, is going to be a vector-based program like Adobe Illustrator. Anytime you can design something in vector it ensures that ‘pixel perfect’ will always be an option (when you scale up or down in size).

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, you want to save your new site favicon in .ico format. If you have a image editing software that doesn’t allow for the export of a .ico file format, don’t worry! There are plenty of ‘favicon converters’ online that will allow you to upload and export your designs. My two cents is to use a format like PNG (if .ico) is not readily available as it’s become increasingly popular and supported by browsers, page builders and more.

Using Icons as your site icon

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

The size dimensions will vary depending on which hosting provider or WordPress theme you are using. I’ll include some common dimensions below but best practices dictate a square dimension. The format will also vary but 99% of the time a .png (scaleable format) will suffice. The dimensions listed below are all in pixels, not inches.

1. Wix Favicon:
16 x 16

2. Squarespace Favicon:
Favicon images work best when sized between 100px × 100px and 300px × 300px, though they display at 16px × 16px.

3. WordPress Favicon:
512 x 512 (will vary on theme)

A standard dimensional display for site icons are 16×16 pixels, the size they will display within your browsing window when using desktop and laptop devices. 

How To Upload a favicon

Once your design and format is ready, uploading your favicon to your website is going to depend on he platform you’re using. Here are a few of the most popular website builders and how to upload your custom icon:

WordPress: Go to Appearance > Customize, then look for Site Identity. Once there you will see an option to upload a favicon.

Squarespace: Go to Design > Logo & Title, then click on the ‘X’ to upload your own favicon.

Shopify: Go to Online Store > Preferences, and scroll down until you see Favicon. From there, you can upload your custom icon.

Wix: You will need to ensure that these two factors are enabled prior to changing:

1. Upgrade your site to a Premium Plan (except the Connect Domain plan). 

2. Connect a domain to your site.

Once these two steps are enabled you will need to:

  1. Go to Settings in your site’s dashboard.
  2. Click Manage next to Favicon.

favicon background colors

One other aspect that I go back and fourth with often is the background color of your favicon. 

A simple background shape, such as a circle or a square, can help your icon stand out in the browser tab but if you don’t want to go that route, then I recommend making sure your design has enough contrast with the background color.

Where to get a favicon

Whether you have an idea in mind already or want to start from scratch, I recommend checking out the offers below for getting your own unique favicon. All questions welcome.

Custom Favicon

single site icon (favicon) created in your
brand colors and dimensions
$ 35
00
Favicon Creation
  • Formats Include ICO and PNG
  • 2 Revisions Rounds Included
Popular

Favicon & Source Files

single site icon (favicon) created in your
brand colors and dimensions with source files
$100
$ 65
00
Favicon w/Source Files
  • Formats Include ICO and PNG
  • 2 Revisions Rounds Included
  • Includes Source Files (Illustrator)

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. 

Start: Favicon Bundle

After completing the form below, Jon will be in touch with questions, comments and information for next steps. 

JMG Offer: Favicon Product

(Wordpress, Squarespace, Wix, etc. please share what platform you are using for your site and any color preferences, etc.)