How To Set Or Change Your Favicon (Site Icon) In WPHubSite WordPress

Build your website integrated with HubSpot on WPHubSite. It's the best all-in-one WordPress-based HubSpot website builder and it's free.

The favicon has been a long-time part of web browsers. You know, those little icons that are in each browser tab. Go ahead, take a glance, I can wait.

That’s now changing because Google has been using the favicon to put a little image next to search results in mobile results. They have a really good purpose now because you can get better visibility and better differentiate your search result from others.

This is what Google is doing with the favicon now to make mobile search results more rich and visual. There haven’t been any changes yet to desktop search results but that doesn’t mean there never will be.

Google mobile search results favicon image.

It’s easy to set up your own favicon for your WPHubSite WordPress website with these instructions. You will need a favicon image for this. It used to be that you needed a special format but that’s no longer the case.

You will need a good quality, transparent needed, image to use as your favicon. Ours is a 512px transparent PNG.

The ideal format and size for your WordPress website favicon is a minimum of 512px square and in the PNG format.

Once you have that on hand then these instructions will help you set your own favicon in your WPHubSite WordPress website. As soon as Google crawls your website and finds the new favicon, it’ll show up shortly after in search results.

Here’s how to set up your favicon in WordPress with the WPHubSite Theme. These instructions will also work for changing your favicon in the WPHubSite WordPress theme.

Make sure you’re logged into your website admin dashboard before going on.

Open the WPHubSite WordPress Customizer.

Step 1: Click on or hover over Appearance.

Step 2: Click on the Customize link. If you clicked on the Appearance option then you’re in the Themes section which also has a Customize button.

Note: The customizer will put you in the live view of your website. You may not see any change when you update your favicon, though.

Step 3: Click on the Header option.

Open the Header section in the Customizer.

Step 4: Click on the Site Identity option.

Open Site Identity.

Step 5: Scroll down to the Site Icon section and click on the Select site icon box.

Note: If you’re changing your favicon then you will see your current favicon here and also a Change Image button (see step 8).

Select a site icon aka favicon.
Upload a new site icon or select one already uploaded.

Step 6: Drag your favicon image to the image section (where all the images are shown) which will upload your new image. Either that or you can select the image from your media library if you’ve already uploaded it.

Step 7: Click on the Select button.

Step 8: Click on the Publish button to save your changes.

Note: If you’re changing your favicon then you’ll select the Change Image button here.

Publish the Customizer changes.

Step 9: Click the close icon to close the WordPress Customizer.

Close the customizer.

You’re done!

You’ll be back in the admin dashboard of your WordPress website but your favicon image should show up in your browser tab. If it doesn’t then you may need to clear the cache of your website and/or your browser.

Last Updated On November 16, 2020


Tag(s): , ,

Grow your business with the power of WordPress & HubSpot.

Get WPHubSite for the most powerful web platform integrated with the power of HubSpot for your inbound marketing strategy.