This DIY tutorial shows how to add a favicon to your WordPress website. Favicons are obviously relatively minor, but they do add a nice detail to your website as shown below. The resultant Favicon file is a 16 by 16 pixel image with a .ico file extension name.

creating-a-favicon-for-your-website-8

It is assumed you will be using a WordPress and the Avada theme as outlined in a previous DIY tutorial.

Please see the full series of recommended DIY tutorials on our DIY page.

1. Create a square image that you want to use for your favicon. I used Microsoft PowerPoint in an earlier tutorial on creating a logo. I’ve used this same file to select the icon part of the logo (which is a perfect square), and then saved this as a picture.

creating-a-favicon-for-your-website-1a

2. Go to www.favicon.cc. This site provides a very simple service to create a favicon file from an image file. Click on “Import Image”, then “Choose File”, and then “Upload”. I have used the “Keep dimensions” as my image file created in the previous step is a square already.

creating-a-favicon-for-your-website-2

3. After upload, you will see a zoomed in preview of the image that will create the favicon file. Edit this if need be using the tools provided on the page (I prefer to provide a ready image and use “as is”).

creating-a-favicon-for-your-website-3

4. Scroll down the page and click on “Download Favicon”. This file will now be the 16 by 16 pixel .ico favicon format.

creating-a-favicon-for-your-website-4

5. Now go to the admin page of your WordPress site, navigate to “Appearance”, “General Options”, and scroll down the page to the “Favicon Options” section (shown in the next step).

creating-a-favicon-for-your-website-5

6. From the Favicon Options section, click on upload, then select your favicon. The below preview will be shown.

creating-a-favicon-for-your-website-6

7. Scroll up the page to click on “Save All Changes”.

creating-a-favicon-for-your-website-7

8. Now open your webpage and you will see the favicon added (refresh the page by pressing the F5 if not initially shown).

creating-a-favicon-for-your-website-8