Add a favicon · Wordpress · Wordpress setup

Add an image to the browser tab (favicon)

Have you seen the small icons that the browser show when visiting websites?

what

Those images are called favicons and they are very easy to create.

You can start with PowerPoint or word if you don’t have any other tool:

powerpoint

Save the image as picture:

save

Now, the best site I know that creates high quality favicons is: Favicon generator and Gallery and its free.

Navigate to the site and follow this steps:

  1. Upload the file
  2. Choose size: I recommend 32×32
  3. Click on Generate Favicon
  4. and finally click on the link to download it

generate

Add Favicon to your site

Now, it is a bit tricky because every theme has its own place for the favicon. For example, on the genesis themes, it is located on the child theme in the image folder. You need to find out where it is stored in your own theme.

To add it to your site, use NetDrive or any tool you use to access your Synology’s web files and upload the favicon there. I am currently using a Genesis child, so I will navigate to:

Web>ruthpozuelo (name of website)>wp-content>themes>balance (name of the theme)>images

and replace the genesis file with the one you downloaded.

Now you will have to clean you cache, or wait until it is refreshed before you can see your new icon. Here is how you clean your cache in Chrome:

chrome://settings/clearBrowserData

clear

If you still don’t see it wait a little, it will show up.

 

5 thoughts on “Add an image to the browser tab (favicon)

      1. With the risk of repetition – your guide works excellent, With your guide it was easy to modify and test different layouts before moving on from my sample site.
        As we say in the business, Semper placidis when you have sites like this and, ofcourse, Curbal.com.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.