Change The Site Icon On The Astra Theme

In my post, I show you how to change the site icon for your website on the Astra WordPress theme.

The site icon is the small image you see in browser tabs. You can have a new icon for your blog in just a few moments by following my step by step guide.

Let’s begin.

Step One – Create An Site Icon For Your Website

If you have an image ready for your blog, continue to step two.

There are many free websites you can use to create a logo or icon. I recommend Canva.com (*paid link). You can design a beautiful logo for your site in minutes for free.

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

Canva

Step Two – Resize Your Image

Your site icon should be a square image of 512 by 512 pixels. You can use resizeimage.net to resize if your site icon is too large.

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

Upload an image

Once uploaded, you see your image. Scroll down to ‘#4 Resize Your Image’.

Upload image

My uploaded image is 1200 by 628 pixels. Too big to be used for the site icon. 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 site icon to your computer.

Now it is time to change your site icon.

Step Three – Upload Your Site Icon To Astra

To upload your icon, 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 ‘Site Identity’.

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 image you saved to your computer.

Select files

Once uploaded to your WordPress site, complete the ‘Alt Text’ and ‘Title’ fields before you click on ‘Select’.

Alt text

Now you have changed your site icon.

Site icon

Your new site icon is also now showing in the browser tab.

Browser tab

Step Four – Publish Your Changes To Make Your Site Icon Live

To make the new site icon appear on your website, click on ‘Publish’.

Publish

Go to the homepage of your website to view your new site icon on your website.

Homepage

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

How To Add Or Change The Site Icon On Astra 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.

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 change your site icon on the Astra WordPress theme.

To get an icon for your website yet. I recommend going to Canva.com (*paid link) and opening a free account. Their free account allows you to design a beautiful icon 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 of the page.

Upload your image by clicking on the ‘Select Site Icon’ link. Once uploaded, publish your changes to make them live on your website.

If you have any questions about site icons, please leave them in the comments below. Do you have a site icon for your blog? What website did you use to design your icon?

Similar Posts

Leave a Reply

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

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