How to change your website favicon

First published on June 15, 2022

Last updated on August 18, 2023

Your favicon is an important visual identifier for your website that can help to reinforce your brand identity. In this article we’ll show you how to change your website favicon.

The humble favicon (AKA site icon) has a very important job – making websites easily identifiable in a browser. A favicon is the small icon that appears alongside a website name in the browser tab when multiple tabs are open. And if your customers are the kind of people who often has a lot of browsers open at once, you definitely want them to be able to quickly identify which website is yours out of the bunch.

Most website management systems will generate a stock favicon as a placeholder until the website owner updates it. If you’re not sure how to change your website favicon, don’t worry, because in this article, we’ll show you how to create and update your website’s favicon to match your business’ brand.

What is a favicon?

A favicon is the little 16 by 16 pixel icon that appears in the website browser tab alongside the webpage name. Its major benefit is to make it easier for users to find your page when they have many tabs open. Favicons perform best as simple images due to their small size. Not all brands use their logo as a favicon, although it is a popular solution. Sometimes businesses and organisations will use one element of their logo or other visual branding to serve as a favicon.

Choosing your favicon

Before you update your favicon you first need to decide what image you will use. If your logo is simple, you may consider using your whole logo. If your logo is a little more complex, consider extracting one recognisable element from your logo to use on its own.

Below are some examples of websites where the business has extracted one piece of their logo to use as a favicon.

Navii has used the AV “arrows” from their logo.
Who Gives A Crap Toilet Paper has used the first ‘W’ from their logo.

Here are a few questions to help you decide on your website favicon:

If you shrink your logo very small, is it still easily recognisable?
Do the colours stand out enough from the typically grey/white background on most browser tabs? (High contrast = better clarity.)
Is there one element you can extract from your logo that would work on its own?
Could you use the first letter of your business name written in your brand font?

If you’re not sure what your brand font is, are feeling unfamiliar with branding and what your business’ brand style is overall, we suggest taking a look at our blog post where we discuss what branding is, why it’s important and how to create a style guide for your business.

Favicon file format

Favicon files must be square images. There are a few image file types you can use for your favicon.

The most common file formats for favicons are:

ICO
This is the most widely used file type and the most widely supported. The handy thing about this format is that it allows you to store various sizes in a single file which is useful because some web platforms will display favicons in different sizes (not always 16×16 pixels). You can create ICO files for free using favicon.io.
PNG
This is the easiest option to create yourself and allows you to save a high-quality image with a transparent background.
SVG
This is a good alternative option but it’s a little trickier to create unless you have the right software. SVG files are great because they’re completely scalable and will therefore look the same regardless of how large or small you display them.
JPG
While you can use a JPG/JPEG file, we don’t recommend it, this is because you are unable to save a JPG image with a transparent background in JPG format and the image quality will not be as good as the other options

Favicon File Size

While common web browsers will display your favicon at 16 x 16 pixels, other web tools may display it slightly larger at 32x32px or 48×48. Google recommends that favicons be created with square dimensions in multiples of 48 pixels. For example: 48x48px, 96x96px, 144x144px, etc.

Thankfully, the free favicon generator favicon.io will allow you to convert a PNG file into the most commonly used favicon file formats and sizes accepted by different website management platforms.

Create your own Favicon

If you want to use your logo as a favicon and you already have the file saved in PNG format with a transparent background, your job is easy. Simply upload your file to favicon.io and select the “PNG > ICO” button to upload your file and download the zipped file containing ICO and PNG files for you to upload to your website.

If you want to use your logo as a favicon and have the file saved in JPG format or PNG format with a background, you will first need to remove the background from the image. The background removal feature in Canva is available for Canva Pro users only, so if you’re using a free version of Canva, you can use the website www.remove.bg to remove the background from your logo for free. You can then use favicon.io to generate your favicon file.

If you do need to create new image to use as a favicon, consider using a tool like Canva to create a square design, create your desired image that suits your brand, then export the design in PNG format with a transparent background. This option will work well if you intend on using one or two letters from your brand name written in your brand font. You can then use favicon.io to generate your favicon file.

If you need to extract an element from your logo to create your favicon you may be able to do this using Canva and cropping the image down so that only the part you want is displayed. However, this will not be possible with all logos, so you may need to hire a graphic designer or find someone confident in using graphic design software (such as Adobe Illustrator and Photoshop) to do this task for you. For a simple, one-off task like this, you may like to explore sites like UpWork to find a graphic designer.