5 New Steps to Add a Favicon Site Icon to WordPress

Tutorial updated on March 10th, 2016

What is a Favicon?

Screenshot of top of browser showing favicons

How to add a site icon to WordPressA Favicon is the small site icon image you see before a website title in the browser address bar. It helps users visually identify websites in browser tabs.

When a page is bookmarked or “favorited” the favicon (favorites icon) will also be displayed in a list of bookmarks beside the page title.

The name “favicon” isn’t widely known, people are searching but not finding the right results. Students have asked us questions such as:

  • How do I add an avatar to my url?
  • How do I add a thumbnail image to the top of the site?
  • How can I add a logo to my browser navigation bar?

Knowing the term favicon is important to a successful search.

Step-by-Step instructions to add a site icon:

Step 1: Prepare your image
Prepare an image that you want to use. The image needs to be at least 512px in width and height. You’ll need to be able to crop in on a square image. Keep the image simple.

Step 2: Open Customize
You can access Customize either from the front-end toolbar or, in the WordPress admin area go to Appearance → Customize.

Step 3: Click Site Identity
The site identity section in WordPress Customizer allows you to edit your site title, description and upload a site icon.

Step 4: Click Select Image
Change the tab from your Media Library to Upload Files. Browse your computer for the image you’ve prepared and upload it to the media library. WordPress will allow you to crop the image. But if you prepared it to the recommended size exactly, then you won’t need to.

Step 5: Save & Publish
Before you move away from Customizer, click Save & Publish

That’s it! These new instructions are a much easier five steps.

Extend the Learning….

Join us to learn WordPress with Gutenberg, January 17 & 18, 2019.

 

Or subscribe here to get our blog posts sent to your inbox.

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.