Setting 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.
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.
Login using your admin username and password and you will be taken to your Wordpress dashboard.
Once you are logged in select Appearance -> Customise from the side menu.
On the next menu click on Site Identity
Click on "select image" under site icon section.
You will be taken to a screen where you can select or upload files.
Click on the upload tab and click on select files
Select the image you have decided to use and click open.
After a few seconds, your image will show up in the media library.
Click on select and you will be taken to a page where you can crop and preview the 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.
Click on publish to save your changes.
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.
Job Done.
Please jump in with any comments below.