The Wolf of the Web

What Is A Website Favicon And How You Can Make One

What Is A Website Favicon And How You Can Make One

When we are designing a website, we want to get all the small details perfect and one detail that is often overlooked is having a website favicon. You may have already noticed website favicons in the past but are unsure what they are called. When you visit a website, if you take a look at your web browser you may have noticed an icon that represents the website you are on. 

This may seem like a very tiny detail that will have you wondering if is there any point in having a favicon for your website. But we are here to tell you, you should definitely have a favicon for your website for a number of different reasons!

What Is A Website Favicon?

It is a 16×16 image icon that goes next to the title of the page you are on to let you know you are on the website, not only will be on your web browser but you can find favicons in your bookmarks, browser history and in search results for when you google something. 

There are also other terms for website favicons that you may have heard in the past such as URL icon, bookmark icon and tab icon.

Why Should You Have A Website Favicon?

Despite their tiny size, website favicons hold great importance for your website for a number of different reasons, we’ve put together a list of some of the top reasons why you should have a website favicon.

Branding

As a business owner, you want your branding to be spot-on and little details can make big impressions. You do not want to miss the chance to showcase your company logo and a favicon allows businesses to show off their logo through web browsers and search engines. Favicons contribute to your branding plus websites that use favicons also add to the legitimacy of your website and business.

Credibility

While there are no data to show that favicons make a website more secure, users genuinely feel more comfortable on a website that has a favicon uploaded and a website favicon can add a level of professionalism and polish to your website, making it look more trustworthy and established.

UX (User Experience)

Favicons help give visual aid to the user and act as a bookmark on your browser. A favicon can also help users with visual impairments or cognitive disabilities identify your website more easily. A favicon can help users quickly find and identify your website when they have multiple tabs or bookmarks open which helps increase the user experience on your site.

How To Make A Website Favicon

With these steps, you should be able to create and add a favicon to your website.

Create An Image

The first step is to create an image that will serve as your website favicon. The image should be square and no larger than 512×512 pixels. It’s best to use a simple design with clear lines and shapes so that it is recognisable when it is scaled down to a smaller size.

Resize The Image

Once you have created the image, you need to resize it to the appropriate size for a favicon. The recommended size is 32×32 pixels, although you can also use 16×16 or 64×64 pixels. You can use image editing software such as Adobe Photoshop or Canva to resize the image.

Save The Image

The most commonly used image file formats for website favicons are .ico, .png, and .svg. We’d recommend that you save your image file as .png. This file format is supported by most modern browsers and is a good choice if you want a high-quality, transparent favicon.

How To Upload Your Website Favicon

There are a few ways that you can upload your favicon to your website but we are going to use WordPress as we mostly deal with WordPress websites and it is the most commonly used CMS in the world.


Here are the steps to upload your website favicon:

  1. Create a favicon: The first step is to create a favicon in one of the supported file formats (.ico, .png, or .svg) and ensure it is saved to your computer.

  2. Log in to your WordPress dashboard: Log in to your WordPress dashboard using your admin credentials.

  3. Navigate to Appearance > Customize: Once you are logged in, navigate to Appearance > Customize in the left-hand sidebar.

  4. Click on Site Identity: Click on Site Identity, which is located under the Customize menu.

  5. Upload your favicon: Scroll down to the Site Icon section and click on the Select Image button. Choose the favicon file that you created and saved to your computer and upload it.

  6. Preview and publish: Once you have uploaded the favicon, you can preview it by clicking on the Preview button. If you are happy with the preview, click on the Publish button to make the changes live on your website.

  7. Clear your browser cache: After publishing your favicon, you may need to clear your browser cache to see the new favicon.

With these steps, you should be able to upload a website favicon to WordPress and have it appear on your website.

Riley Williams is the creative force behind The Wolf Of The Web! With over 100+ websites built across diverse sectors. I believe in crafting eye-catching websites that not only look amazing but also generate more calls, leads, and sales for your business.