How To Change The Favicon On WordPress – Astra Theme

In my post, I show you how to upload and change the favicon on WordPress using the Astra theme, step by step.

The favicon is the small image you see in browser tabs. You can have a favicon for your blog in minutes with my guide.

Let’s begin.

Change The Favicon On WordPress

Step One – Create A Favicon For Your Website

If you have a favicon for your blog, continue to step two.

I recommend Canva.com (*paid link) to create a favicon for your website. You can design a beautiful free logo for your site in minutes.

To learn how to design an icon on Canva.com. Go to my ‘How To Create A Free Favicon On Canva.com‘ blog post.

Canva

Step Two – Resize Your Favicon

Your favicon should be a square image of 512 by 512 pixels. Use iloveimg.com to resize your image.

Go to iloveimg.com and click Select Images.

You can also drag and drop images here, too.

Select images

Once uploaded, enter the required size on the right.

Resize options

Next, click Resize Images.

Resize images

Finally, click Download Resized Images to save it to your computer.

Download resized images

Step Three – Upload Favicon To WordPress

Hover your mouse over Appearance and select Customize from the menu on your WordPress admin dashboard.

Customise

In the customizer, select Site Identity from the menu.

Site identity

Next, click Select Site Icon.

Select Site Icon

The ideal size for your site icon is 512 by 512 pixels.

If you haven’t resized your image yet, do that before uploading.

You can use iloveimg.com.

Iloveimg.com

On the next screen, select the Upload Files link.

Upload files

Click on the Select Files link and choose the favicon image you saved to your computer.

Select files

Once uploaded, complete the Alt Text and Title fields before clicking on Select.

Alt Text is a description of your image. In my example, I copied the title text.

I recommend you add more detail. Adding Alt Text helps gets your images indexed on Google.

Alt text

Now you have a favicon for your site.

Favicon

Your favicon shows in browser tabs.

Site icon on browser

Step Four – Publish

To make the favicon live on your website, click on Publish.

Publish changes

Go to the homepage of your website to view your favicon.

Site icon on browser

You have successfully changed the site icon on Astra for your WordPress website.

How To Add Or Change The Favicon On WordPress – Astra Theme Video Tutorial

How To Customize The Header On Astra
How To Customize The Header On Astra

Frequently Asked Questions

If you have published your changes and the site icon is not showing on your website.

It is most likely a caching problem. Caching is when your internet browser serves you saved content rather than fresh content.

Search on Google for ‘Clear cache on (your browser name)’ for instructions on clearing the cache.

Do you have a cache plugin installed? If so, I recommend you clear the cache for your website, too.

Go into the customizer option and click on the ‘Header’ tab. Site identity is the first option.

The ideal size for your site icon on Astra is 512 by 512 pixels.

Conclusion

Now you can upload and change a favicon on the Ashe WordPress theme.

If you don’t have a favicon for your site, I recommend using Canva.com (*paid link) and opening a free account. You can design a beautiful favicon for your blog.

If you have an image you want to use for your site icon, ensure it is square and 512 by 512 pixels. If it isn’t, go to resizeimage.net to resize the image before uploading.

To upload your image, go into the theme customizer and select Header. Next, click Site Identity and scroll to the bottom.

Upload your image by clicking on the Select Site Icon link. Once uploaded, publish your changes.

Have you set up a homepage for your website? Visit my How To Set A HomePage On Astra article to learn more.

If you have any questions about favicons, please leave them in the comments. Do you have a favicon for your blog? How did you design yours?