Share this post:

 

Add a Favicon to your Wordpress blogSetting a Favicon for your site is important for a number of reasons but the most important is probably that a favicon ensures that there is an eye-catching visual queue in browsers to help identify your site. This is especially helpful to visitors when they have a lot of websites open in different tabs in their browser.

Without a favicon, your site will be displayed with a generic icon that does not give a user any indication what site the tab is for.

 

 

In the image below you can see we have added a blue swimming favicon to our website which gets displayed on the tab and makes it much more meaningful.

 

Setting up a favicon for a website is really worthwhile but can be a bit tricky if you are just starting out but the good news is that recent versions of Wordpress make setting up a favicon a quick and easy task which can be completed in minutes by following a few simple steps.

Step 1 - Choose the Image you are going to use as your Favicon.

If you install a favicon manually you would need to create your own .ico format files and upload them which can be quite time-consuming.

In Wordpress, we just need to provide an image that we want to use and the rest will be done for us.

Consider the following when selecting your image:

  • It needs to be about 500 pixels high x 500 pixels wide.
  • It needs to look good when it is scaled down to a much smaller size.
  • It should fit in with the theme of your site.

You can either create an image yourself or find one online that you are allowed to use.

For our poolcare.online favicon we found this very simple royalty-free stock image that scaled down nicely.

 

swimming 303771 960 720

Once you have the image you are going to use you are ready to install it.

 

Step 2 - Install your "Site Icon" in Wordpress

  

Go to http://www.yourdomain.com/wp-admin (replacing  “yourdomain.com” with your own domain) and you will see a Wordpress login screen.

WP Login

 

Login using your admin username and password and you will be taken to your Wordpress dashboard.

WP Dashboard

 

Once you are logged in select Appearance -> Customise from the side menu.

 

WP Appearence Customise

 

On the next menu click on Site Identity

 

WP Customize site identity

Click on "select image" under site icon section.

 

WP Select Site Icon

 

You will be taken to a screen where you can select or upload files.

Click on the upload tab and click on select files

 

WP Upload Select Files

 

 

 Select the image you have decided to use and click open.

 

WP Select Site Icon Image

 

 

 After a few seconds, your image will show up in the media library.

 

WP Media Library Site Icon

 

 

Click on select and you will be taken to a page where you can crop and preview the image.

 

WP Site Icon Crop Image

 

You can crop your image if you like by moving the selection around and selecting "crop image"

We are happy with our image so we are going to select "skip cropping"

You will then be taken to a screen which shows your newly installed site icon.

 

WP Site Icon installed

 

Click on publish to save your changes.

 

WP Site Identity publish

If you look in the browser tab for your Wordpress site now you will see that a much smaller version of your image is now displayed.

 

Tab with Favicon

Job Done. 

Please jump in with any comments below.

 

 

Copyright © Startearning.com