How to change website Icon and Why it is Important?- Comprehensive Guide.

Requiring you to change website icon or even getting your site icon for the first time has all to do with branding. Yes, the site icon of your blog or website speaks broadly about your endeavours. The site icons are the simplest way to represent a site, convey the message of it and the value, site would stand for.

In simple words to define an icon we can say that it is a graphic representation of something, a person or thing that is symbolic or is a noted figure. In this article we will learn how to change website icon step by step, what format you should use for your icon, what is the standard size of an icon and why it is important?

What is a Site Icon?

It’s a unique icon for your website. It is shown in browser tab, toolbar apps, history results, search bars, in widgets like Blogs you follow, and as a home screen app or bookmark when you save to your phone or browser. It is also known as favicon in WordPress.

Here you can see the examples of Website icons:

change website icon


change website icon

Why is It Important?

It is important to make branding of your website. Using favicon can help your visitors to remember your website easily. Its main goal is to help the visitors locate your page easier when they have multiple tabs open.

Some key points of favicon are:

  • Favicon is not only important for branding but also for usability
  • It helps to stand out from other websites
  • It provide brand awareness
  • Favicons helps to search easily in bookmarked pages
  • Also, they are easily identifiable in browser tabs

How to Create a Good website icon(favicon)?

To create a good icon for your website, simply follow the points given below:

  • Use space wisely: Try to create a resolution icon. 16px is standard and acceptable by almost all browsers
  • Simplicity: Since your site icon is the visual face of your brand, so you should keep your design as simple as possible. Because more details will make your site’s icon look cluttered and messy
  • Brand Identity: Make sure the icon you are using for your website is representing your business. It gives the visitors a quick overview of what your brand is about.
  • Abbreviating: Choose a perfect visual that indicates your brand. You can also use the first letter of your business or full name if possible like Facebook, Wikipedia, NBC, BBC etc.
  • Color coordination: Colors choice plays a vital role in making of a good visual. You have to choose the perfect colors that can attract visitors. Contrasting colors makes this task easy. Also, keep in mind that favicons are very small in size, so you need to clearly represent your company to the users.

What formats do I use for a Favicon?

You can use the following formats for your website’s icon:

  • PNG(recommended)
  • SVG
  • Windows ICO(recommended)
  • APNG
  • JPG
  • GIF

What sizes are needed for a Favicon?

16px: For general use in all browsers, could be displayed in the address bar, tabs or bookmarks views. It is a standard size of favicon.

How to change website icon?

To change your website icon or add favicon to wordpress website, simply follow the steps:

Go to Appearance > Customize

Next, go to the menu located on the left sidebar; find and click on Site Identity

The Site Icon section is where you can select your image and add the favicon you want to be displayed:

Note: If your theme does not allow you to upload your favicon on the theme customize settings then you can use a real favicon generator and upload to a Insert Header & Footer plugin.

change website icon

Simply click on Select your favicon picture.

Now, you have to select the icon that you want to use for your website.

change website icon

Click Generate your Favicons and HTML code


Real favicon generator will generate a html code that you can copy.

add favicon

Now, Go to the Insert Headers and Footers plugin under Settings and paste your HTML favicon code in the <head> section and Click Save.

How to change wix websites icon:

Simply, go to Manage Website >Favicon to your site icon.

Now, click on Upload Favicon option and select or upload your icon. System will automatically save your favicon.

Change icon of your Shopify:

In order to add favicon to shopify, you have to go to your Online Store.add favicon

Then click on Customize


Click on Theme Settings > Favicon

change icon

Now, click on select image and upload your favicon.

Best website icon maker:

You can check out these websites for creating a good favicon.

favicon- generator






Leave a Comment