Setting a Favicon for Your WordPress Site

Setting a Favicon for your WordPress website

Setting a favicon makes your website recognizable Setting a favicon for your website ensures your brand shows up even in the smallest details.  A favicon is a website icon that represents your website. It shows up next to your website title in a browser tab, or on a home screen on a phone or table when a user adds your website to his home screen for quick access.

For instance, everyone recognizes Facebook’s favicon:

Facebook Favicon

If you haven’t set a favicon for your WordPress website, you will see the default WordPress favicon when you visit your website. We love WordPress, too, but it’s better for your site to advertise itself rather than the program used to build it.

WordPress default favicon

Read on to learn how to create a recognizable favicon for your website and tell WordPress to use it.

Choose an image to represent your website

The first thing to do when creating your website icon is to choose the image to use. We recommend using your logo. If your entire logo isn’t easily recognizable when displayed at a small size, then choose one identifiable part of it that stands out as your favicon.

Create your website icon

If you need to adjust your image or select only part of it, try using Photoshop or Photoscape X on your computer, or PicResize online. Choose an image that can be displayed in a square shape. When creating your icon, you will want to make an icon that will work for both mobile devices as a home screen icon and for browser tabs.

We recommend:

  • Making your image 512 x 512 pixels square
  • Including a background color – not a transparent background
  • Including some space around the image.

Using this size and a background color will ensure your image displays well on all devices.

Tell your WordPress website to use your website’s icon

Once you have created your image, in your WordPress admin area, go to Appearance -> Customize. Then click on “Site Identity.”

creating a favicon for your WordPress site

Click on “Select Icon,” and upload your image to your media library, and select it. 

You’ll see a preview of your icon. If it looks right, click on Publish.

publish your favicon

You’re all set!

Other methods for creating a favicon

The major advantage of this built-in WordPress method is that it’s easy to use. The disadvantage is that your image may not look as sharp on a high resolution / retina display, and you can’t include separate versions of your image to use based on the device chosen.

If you’d rather include one version of your icon for the site’s favicon (used in the browser tab) and one for the Apple touch icon (used for mobile devices’ home screens) to ensure your images are as sharp as possible, watch for our other tutorials on:

If you’d rather have us add your favicon so your site’s brand is recognizable in every detail, get in touch.

Like it? Share it!

FacebooktwitterredditlinkedinmailFacebooktwitterredditlinkedinmail

Alisa Cognard

Alisa was one of the first team members to join Red Earth Design, Inc. in early 2004. From data entry, she progressed to MySQL database manipulation and PHP coding. Alisa is responsible for all kinds of odds and ends: installing new websites, adding features to them, programming databases, PHP coding, website troubleshooting, website security, and organizational tasks for Red Earth Design.

Leave a Reply

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