How to change your website favicon - photo of a screen displaying website browser tabs with popular digital platform favicons

How to change your website favicon

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.

Favicon examples

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.

Favicon examples partial 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.

How to change your website favicon

The steps for updating your website’s favicon depend on the CMS (content management system) you use. We’ve included links to the instructions for some of the most popular website CMSs below.

Wordpress

Click here for instructions and a video on how to update your favicon on a Wordpress website.

Shopify

Click here to view the step-by-step instructions for updating your favicon on a Shopify website.

Squarespace

Click here to view a video and instructions for updating your favicon on a Squarespace website.

Wix

Click here to view instructions for updating your favicon on a Wix website. Note that this feature is only available to Wix users on a Premium plan.

Action

Your challenge is to review the favicon on your website and ask yourself:

  • Does the icon appropriately represent my brand?
  • Is my favicon the standard icon provided by your website content management system?
  • Does it need to be updated?

If it does need updating, follow the steps above to create your new favicon!

FREEBIES: Grab your free resource + bonuses!

Pop your details below to download your free resource and our extra bonuses, which include cheatsheets, our Smart Tourism Marketing System email course and monthly grant funding opportunities! 

0 0 votes
Article Rating

How to get the best answer from our team

Be as precise as possible so that our team can provide you with the best answer. Use the below for screenshots/screenrecording and paste the link in your question. You will receive an email when we have responded to your question.

Subscribe
Notify of
guest
0 Questions
Inline Feedbacks
View all comments

Latest posts

Image of graph on computer

Getting your mojo ready to transition to the new Google Analytics

Get ready to transition from Universal Analytics to GA4… you still have time but the transition can be tricky so follow these recommended steps

Read More →
Add or Update Your Business Listing On 3rd Party Websites

How To Add or Update Your Business Listing On 3rd Party Websites – Google Business Profile, Tripadvisor and ATDW

Your goal is to drive online traffic that leads your customer to your website and whether you are a tourism or trades business, these tips …

Read More →

Grab our Freebies

Click here to access a number of free checklists and resources available to Tourism Operators.

Brisbane
Head office

Suite 1,
57 Woodfield Rd
Pullenvale QLD 4069 
Australia

Sydney

Suite 101,
18-20 Victoria St
Erskineville NSW 2043
Australia

Melbourne

5 Molesworth St
Hawthorn East VIC 3123
Australia

Adelaide

120 Kenilworth Rd
Parkside SA 5063
Australia

Agnes Water

139 Bicentennial Dr
Agnes Water QLD 4677
Australia

Europe

36C Rte de St Cergue
1260 Nyon
Switzerland

aboriginal-flag

Our team would like to acknowledge the traditional custodians of Country throughout Australia and their connections to land, sea and community. We pay our respect to their elders past, present and emerging and extend that respect to all Aboriginal and Torres Strait Islander peoples today. We acknowledge that the sharing of knowledge has occurred across the lands and waterways of Australia for many thousands of years. As we continue to share stories and support small tourism businesses we try to listen to the knowledge and practice that has always existed here and consider how we can contribute to the preservation of culture and Country wherever we live and work.

© proudly brought to you by Digital Coaching International   ABN: 45 153 766 771 All prices are in Australian Dollars

Terms & Conditions  | Privacy Policy

0
Would love your thoughts, please comment.x
()
x