How to change favicon in WordPress Astra theme

How to change favicon in WordPress Astra theme

Change favicon directly from Astra theme -

The Astra theme gives us the ability to add any custom favicon we want to our WordPress site using its customizer. To access the Astra customizer go to Appearance>Customizer.

Advertisement

1. Now here you will see a lot of different options on the left menu bar. To change the favicon of our site we will first go to “Header builder“. 

2. Here you will see an option called “Site Title & Logo” click on it.

3. After that you will need to scroll down to the bottom of the menu where you will see an option “Site Icon” click on it.

Advertisement

4. Now here you will get an option “Select site icon” click on it. After clicking that now you will need to click on “Select Files” and select the png file that you want to use as a favicon.

5. After you select the image, the image will be uploaded to your WordPress site. Now after the image finishes uploading you will need to click on the “Select” option at the bottom right.

6. Now, if you didn’t use a 500x500px image then after clicking “select” you will need to crop the image to continue. 

That’s why I recommend that you make your favicon 500×500 first and then upload it to your WordPress site.

Advertisement

After the image has been set properly click on the Publish button at the top left to save the changes. After that, clear your website’s cache to see the favicon work if you use any caching plugin. Otherwise just refreshing your site will work. 

To make a beautiful favicon for your WordPress site you can use canva.com and there search for a logo and create a 500x500px logo.

That is how you can use the inbuilt feature of the Astra theme to add a favicon to your WordPress site.

Advertisement

But sometimes you might face some problems in adding a Favicon to your site using its in-built feature. That’s why I am showing you a second method that works like a charm to add a favicon to any WordPress site.

Change favicon using File manager -

Now this second method is also very easy to do and is the recommended method if you face any problem when adding a favicon to your site in Astra. Because using this method we will directly upload our favicon to our site instead of using any WordPress feature.

To begin we will first convert our favicon image to .ico format. To convert our image to .ico format we will be using https://convertio.co/png-ico/. Go to this website and click on the “Add Files” button.

Advertisement

Select the favicon image you want to convert to .ico format. And then click on Convert.

Wait for the image to upload and process. After that, you will get the download button, click it and save the .ico image. After that follow the steps below.

1. First go to your WordPress admin and go to Plugins>Add new. Search for a plugin called “ WP File Manager” install and activate it.

Advertisement

2. Go to File manager from the admin menu and here you will need to upload a new file. Click on the upload button and then on “select files”. After that select the .ico image that we downloaded.

How to change favicon in wordpress Astra theme - using file manager - upload favicon

3. Wait for it to upload, after the upload finishes you will need to right-click on the uploaded image and then click on rename. Rename the image to “favicon.ico” with no capital words. Click anywhere else using the mouse for file rename to save.

How to change favicon in wordpress Astra theme - using file manager - rename favicon

And that’s it, your WordPress site should now display the uploaded image as a favicon of your site on all browsers. Make sure that you clear the cache of your WordPress site to see the changes on your site if you use any cache plugin. 

Advertisement

After clearing the cache visit your website and do a hard refresh so that all the resources of your website get refreshed. You should see the favicon working after doing the hard refresh.

To do a hard refresh click CTRL + F5 on your keyboard.

Frequently asked questions -

Which method should I use to change the favicon in Astra theme, using Astra or using file manager?

It’s easier to add a favicon to your WordPress Astra theme using the inbuilt feature of Astra. But the problem is that sometimes you might face some problems while adding a favicon to your site.

That’s why I recommend using the file manager to add favicons to your Astra WordPress site as this method is very safe and easy to do.

Advertisement

How to delete the favicon of my WordPress Astra theme?

To delete the favicon of your WordPress Astra theme you will need to first go to Appearance and then go to Customize. Here go to “Header Builder”  then “Site title & Logo” scroll down and click on “Site icon” and then click on the remove button.

If you added the favicon manually using the file manager then go to your file manager and delete the “favicon.ico” image by right-clicking it and then clicking delete.

Can I use svg favicon on my WordPress Astra theme?

By default, WordPress doesn’t allow you to upload SVG images to your WordPress site. But you can use a plugin to allow the uploading of SVG images to your WordPress site.

To be able to upload SVG images to your site you will need to first install a plugin called “SVG Support”. Now just click on Activate and after activating the plugin you will be able to upload SVG images to your WordPress site.

Advertisement

Now to use an SVG image as a favicon you can just follow the first method that I showed you.

I changed the favicon of my WordPress site but it's not updating on google search. What to do?

The first thing you should do is clear the cache of your WordPress site so that when google bot crawls your website it gets the latest version of your site instead of the old one.

Now after Google has crawled your website and found a new favicon it will take a few weeks for google to update the favicon of your site on google search. You can manually submit your site URLs to google for faster crawling and indexing from the search console.

Advertisement

Does Astra support svg favicon?

Yes, Astra does support SVG favicon. meaning that you can add an SVG favicon to your WordPress Astra theme. But the only problem is that WordPress doesn’t allow you to upload SVG images as they can pose security risks. 

That’s why you will have to use a plugin like “SVG support” to be able to upload an SVG image and after that, you can use that SVG image as a favicon on your Astra WordPress site.

If you liked this post and it helped you in adding a favicon to WordPress Astra theme then make sure to comment down below and also share it with your friends that might need help to add a favicon to their site. Thanks.

Leave a Comment

Your email address will not be published. Required fields are marked *