wordpress logo with green background

How to add a Favicon to your WordPress Website

How to add a Favicon to your WordPress Website

This post is intended to help you understand what a favicon is, and how to add a favicon to your website or WordPress website using 3 methods.

What is a Favicon?

Favicon is short for “favorite icon”. A Favicon is a square logo or website icon found next to the website title in the browser tab. 

Favicons are square in their dimensions and are usually served as a .ico or .png format. 

Favicon in web browser tab

Why Should You Use a WordPress Favicon?

Adding a favicon to your website allows users to easily find your website in their open browser tabs, and also improves your website SEO. 

What is a good favicon size?

Many sites will tell you that your favicon should be 16×16 pixels. Although this should work for most websites, WordPress recommends using a favicon size of 512×512 pixels. If you are using WordPress as your website CMS, then we recommend using 512×512 px for your favicon size. 

How to create a Favicon

Choose one of the two options below to create a favicon for your website if you do not already have a square image to use.

Using a Favicon Generator (Free option)

A favicon generator is a quick and easy way to create a favicon for your website. 

Step 1: Navigate to Favicon Generator from favicon.io

Generating a Favicon

Step 2: Add the first letter of your website name.

Choosing text for favicon generator

Step 3: Select a background type.

Choosing background for favicon generator

Step 4: Select a font family for the text.

Choosing font family for favicon generator

Step 5: Select the font size for the text. See what happens when you use 140 or higher.

Choosing font size for favicon generator

Step 6: Select a font color and background color for your favicon.

Choosing font colour for favicon generator

Step 7: Download the favicon files.

Download your favicon files

The favicon files should download as a zip file. After you have downloaded the favicon files, remember to unzip the folder before you proceed to uploading the favicon to your website. 

You can now move on to adding your favicon to your website.

Using Canva (Free and paid options)

Note that the free version of Canva will only let you download your favicon file in .png or .jpg formats, and will not have a transparent background. If you would like your favicon to have a transparent background, please use a paid version of Canva. 

Using Canva to create your favicon gives you more freedom to design your favicon, and allows you to create a favicon with custom dimensions. 

Step 1: Navigate to Canva and create a free or paid account. 

Step 2: Login to your account and select “Create a design”.

Create favicon design in canva

Step 3: Select “Custom size”

Select custom favicon size

Step 4: Give your canvas a width and height of 512 px.

Input custom dimensions for favicon

Step 5: Navigate to “Elements” in the left menu and select “See all” under shapes. If you would like a gradient shape, you can scroll down to gradients and select “See all”.

Add shapes to favicon canvas

Step 6: Select a shape you like, and it should add it to your canvas. You can enlarge the shape to fit the canvas if you like.

Add shape to favicon canvas

Step 7: Add text to your canvas by navigating to text and then selecting “Add a heading”. Increase your text size so that the icon fits in the canvas.

Add text to favicon canvas

Step 8: Adjust the text color and style as you wish. 

Resize text and adjust colours favicon canvas

Step 9: Download the image in PNG from the navigation menu. If you have a paid version of Canva, you can check the box for transparent background to download a favicon with a transparent background. 

Download your favicon from canva in png

The favicon should download as a png. We also recommend converting the favicon to .ico format using an online .png to .ico converter.

You can now move on to adding your favicon to your website.

How to add a Favicon to your WordPress Website

Choose one of the four methods below to add a favicon to your website. 

If you are using WordPress, I will highly recommend using option 1 as it does not bulk up your site by adding unnecessary plugins. Not to mention, plugins can also add security risks to your website. 

If you are not using WordPress as your website CMS, then I will recommend going with option three or four below. 

1. Upload your Favicon using WordPress Customize

Using the WordPress customize feature is our recommended method to upload your favicon.

Step 1: Login to your WordPress website and navigate to Appearance -> Customize

Navigate to WP customize under appearance tab

Step 2: In the customize section of WordPress, navigate to Site Identity

Step 3: Under the Site Icon section, select the option for “Select site icon”

Select favicon in WordPress

Step 4: Rename your file to “favicon” and upload it to your media library. Remember to add image meta data to your icon to improve your website SEO.

Step 5: Select your icon, and then hit the “Select” button in the bottom right corner. Skip cropping.

Select your favicon

Step 6: Select the publish button in the top of the customize panel. 

Publish your changes

Your favicon should now be uploaded to your website. Exit out of the customize view and reload your website page to see your new favicon in the browser tab. 

2. Upload your Favicon using a WordPress Plugin

We do not recommend using this method to upload a favicon to your WordPress website. Using plugins can slow down your website, and have the potential to pose a security risk to your website. 

Step 1: Login to your WordPress website and install and activate the plugin Favicon

Install the favicon plugin in WordPress

Step 2: Navigate to the new Favicon item in your Appearance menu.

Navigate to Favicon tab under appearance in WordPress

Step 3: Select the “Generate Favicon” button, and follow the plugin instructions.

Generate favicon with plugin website

Your favicon should now be uploaded to your website. Refresh your website page to see your new favicon in the browser tab. 

3. Upload your Favicon using FTP

If you do not have access to your WordPress admin panel, or prefer using FTP to manage files on your website, then this method is best for you. 

Step 1: Connect to your website using FTP. (We recommend using Filezilla)

Step 2: Navigate to your website root public directory. This is “httpdocs” if you use our web hosting

Step 3: Rename your file to “favicon” and upload your favicon to the root public directory.

Upload your favicon using ftp

Your favicon should now be uploaded to your website. Refresh your website page to see your new favicon in the browser tab. 

4. Upload your Favicon using File Manager

If you do not have access to your WordPress admin panel, or prefer using file manager to manage files on your website, then this method is best for you. 

Step 1: Login to your control panel. (Plesk if you are hosting with us)

Step 2: Select websites and domains in the left navigation bar.

Login to your control panel and navigate to file manager

Step 3: Select “File Manager” under the domain you would like to add a favicon to.

Step 4: Rename your file to “favicon” and upload your favicon to the root public directory of your website. You can simply drag and drop your favicon in the directory if you are using Plesk.

Navigate to your root public folder

Step 5: If you are using WordPress you may need to add the following code to your theme header for a .png file type to work. After adding the code, you can hit “OK” and refresh your website page. 

Add code to the header of your WordPress theme

<link rel=”shortcut icon” type=”image/png” href=”/favicon.png”/>

Your favicon should now be uploaded to your website. Refresh your website page to see your new favicon in the browser tab. 

Conclusion

From our post above, we hope to have helped you understand why a favicon is important for any and every website. Adding a favicon to your website helps your website stand out, improves your website SEO, and helps users find your website tab in a sea of open tabs in their web browser. 

Firstly, you can add a favicon to your website by uploading a .png or .ico file using WordPress Customize. Secondly, you can add a favicon using a WordPress plugin. Thirdly, you can add a favicon to your website using FTP. Fourthly, you can add a favicon using your cPanel or Plesk File Manager. 

If you found this post about favicons useful, please leave a comment below. 

No Comments

Post A Comment