How to Add a WordPress Favicon to Your Website

Brenda Barron / November 17, 2018

, ,

When it comes to branding a website, many site owners focus on adding logos and making sure their brand colors and fonts are in sync. However, there is an additional element that you can use to complete your branding efforts: the WordPress favicon.

If the term is new to you, read on to learn what a favicon is, how it’s used, and how you can add one to your WordPress.com website.

What is a favicon?

A favicon (also known as a shortcut icon, website icon, or blavatar) is a small icon that is visible at the top of a browser tab, next to a bookmarked site in any browser, or as a home screen app icon when you save a site to your smartphone. When you upload a favicon to your website, it’s displayed within the WordPress.com platform and within widgets (such as Blogs I Follow).

Why are favicons useful?

A favicon helps you build a visual identity, establishes brand recognition, and can also improve your user experience. Since most people open several browser tabs at the same time, a favicon serves as a visual cue and helps viewers recognize which tab to click on when they want to navigate back to a particular site. It’s a good idea to use a scaled-down version of your logo (or just part of your logo) as a favicon to make it easier for visitors to recognize your site.

How to create and add a favicon

Follow these steps to create and add your own favicon:

  • Step 1: Decide whether you want to use your logo, an icon, or a letter as your favicon.
  • Step 2: Use an image editing program like Photoshop or Canva to create a design that is 512 pixels tall by 512 pixels wide. In the example below, Canva was used to create a square shape along with a text element that will serve as the favicon.

Making a favicon with Canva

  • Step 3: Once you finish designing your favicon, select the Download button in Canva or save it as a PNG file in Photoshop.
  • Step 4: Go to your WordPress.com website and navigate to My Site > Settings > General, and click on the Change button under Site Icon.

Adding a favicon to WordPress

  • Step 5: You will see your Media Library where you can select an existing image or upload a new one. Since we’ve just created a favicon, upload it to your Media Library, select it, and then click Continue.

Uploading a WordPress favicon

  • Step 6: You’ll be prompted to resize the favicon on the next screen. Given that we made our favicon with the exact dimensions needed, leave the image as is and click Crop image.

Cropping a favicon

  • Step 7: Once the image is uploaded, click Save settings. Keep in mind that it might take a couple of hours for the changes to propagate across the internet. You should start seeing your favicon appear in bookmarks and on browser tabs.

Small icon, big branding tool

Adding a WordPress favicon to your site makes it easier for visitors to recognize it amongst their browser tabs, as well as when they’re reading their favorite blogs on WordPress.com. Once you’ve rounded out your branding with a favicon, add to your online presence with these essential business website pages.

Create your new blog or website for free

Get Started