How to set your site icon (Favicon) for WordPress

How to set your site icon (Favicon) for WordPress

Your website should have a favicon. A favicon or site icon is the small but powerful branding tool that appears in the browser tab next to your site title and it’s a great visual to both strengthen your brand and improve user experience.

Set browser site icon in WordPress

These powerful little images are not limited to the browser tab either, they show up all over the place, including:

  • Next to your site title in search
  • on bookmarked pages
  • iOS home screen buttons
  • as browser shortcut icons
  • and more…
favicon as Chrome bookmark

The good news is that WordPress has updated the customizer so that it is easier than ever to add a favicon.

What is a Favicon?

A site icon (favicon) is used by you browser (Chrome, Edge, Safari, Firefox) to help your site visitors quickly identify and recognize your organization. If your site icons has been correctly added to your site, the browser will automatically display it in the address bar, on bookmarked pages, etc.

Set browser favicon in WordPress

Adding your logo to the browser tab in WordPress

If you are using version 4.3+, WordPress has made it super easy to upload and crop the image you’d like to use for your site icon.  

Favicon Size & Format

Because site favicons are used in a variety of places, your site needs to use several different image sizes. The good news is that as long as the image you upload to the customizer is at least 512 pixels by 512 pixels, WordPress will automatically create the other sizes so you don’t need to worry about them.  

Before WordPress version 4.3, a favicon had to be converted into a 16×16 pixel image file, which then had to be converted from a .jpg or .png format into .ico format. Today, you can upload a .jpg or .png file format to the customizer and WordPress will do the rest!

Upload favicon thru WordPress customizer

Step 1: Navigate to the customizer. Go to Appearance >> Customize >> Site Identity

Where is WordPress Customizer

Where is WordPress Customizer - appearance - customizer - site identity

Step 2: Under Site Icon, click on ‘Add site icon’ to open your site’s media library.

Select an existing image or upload a new one.  Remember, you’ll want to use an image that is at least 512×512 pixels so it will display well in all its various locations. WordPress will give you a chance to crop your image into a perfect square on the next screen.

Set browser favicon - set site icon in WordPress

Step 3: Once you have cropped your image, click ‘Save & Publish’ and your new favicon will be live.  

Pro Tip: Many themes today offer an option to upload a favicon as well. However, if you use the WordPress customizer to add your favicon to your site, it will be there even if you change themes.

Make it as easy as possible for both new and existing members to recognize your organization’s website by including this important branding feature as part of your site setup.