Change The Site Icon On The Astra Theme

In my post, I show you how to upload and change the favicon on Astra, 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 step by step guide.

Let’s begin.

Step One – Create A Favicon For Your Website

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

To create a favicon for your website, I recommend Canva.com (*paid link). 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. You can use resizeimage.net to resize your image.

Go to resizeimage.net and select the ‘Upload An Image’ link.

Upload an image

Once uploaded, scroll down to #4 Resize Your Image.

Upload image

My uploaded image is 1200 by 628 pixels. Too big for a favicon. It also isn’t square. To resize this image to 512 by 512, I must untick the Keep Aspect Ratio box and enter 512 into the two boxes.

Resize your image

Next, scroll to the bottom of the screen and select the Resize Image link.

Resize your image

After a few seconds, a download link appears.

Download image

Click on the Download Image link to save your favicon to your computer.

Step Three – Upload Your Favicon To Astra

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

Customise

In the customizer, select Header from the menu.

Header

Next, select the Site Identity tab.

Site identity

Scroll to the bottom of the page and click on the Select Site Icon link.

Select site icon

Don’t forget the ideal size for your site icon is 512 by 512 pixels. If you haven’t resized your image yet, do that before uploading.

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

Now you have a favicon for your site.

Site icon

Your favicon shows in browser tabs.

Browser tab

Step Four – Publish Your Changes

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

Publish

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

Homepage

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

How To Add Or Change The Astra Theme Favicon Video Tutorial

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 on Site Identity and scroll to the bottom.

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

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?

Similar Posts

Leave a Reply

Your email address will not be published.

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