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:
- Keep your icon simple and recognizable. Focus on using shapes, logos, or initials that are unique to your brand
- Make sure the design can scale down if needed for smaller devices or browsers. You'll want to make sure it looks just as good at 16x16 as it does at 70x70
- Use vibrant colors that will stand out from any background or browser tab color
- Make sure the icon is legible and easily recognizable, even when scaled down to smaller sizes
- Avoid Using Text
- Less is more
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.
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:
- Go to Settings in your site’s dashboard.
- 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 yourbrand colors and dimensions
- Formats Include ICO and PNG
- 2 Revisions Rounds Included
Favicon & Source Files
single site icon (favicon) created in yourbrand colors and dimensions with source files
- Formats Include ICO and PNG
- 2 Revisions Rounds Included
- Includes Source Files (Illustrator)
