• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
Overlock Design Co.

Overlock Design Co.

Websites Built for Growth

  • Services
    • Custom Websites
    • WordPress Maintenance
  • Portfolio
  • Blog
  • About
  • Contact

How To: Add a Favicon to Your WordPress Website

June 7, 2018 • Tutorials, WordPress

Like Google Analytics, a favicon is something that every website should have configured. There are a lot of plugins that “help” you add a favicon to your WordPress website. But I’m a big fan of not adding plugins where you don’t need to. And WordPress has custom favicon support built in!

Want the quick & easy version? Here’s a video showing you exactly how to add your own favicon to your WordPress website:

Videos not your style? Here’s a step-by-step tutorial.

Step One: Log In to Your Website

I feel like this is pretty self-explanatory. If you’re not sure how to do this, you probably shouldn’t be managing anything on your own website. ?

Step Two: Open Up the Customizer

You can access the WordPress Customizer in one of two ways. First, go to front-end (the public-facing side) of your site and click Customize in the admin bar.

You can find the Customize option in the top admin bar on the front-facing portion of your WordPress website.

Alternatively, you can also access it from the back-end (the WordPress Dashboard) by going to Appearance > Customize.

You can also access the Customizer by going to the Appearance section in the Dashboard and clicking Customize.

Step Three: Add Your Favicon

It really is that simple. Once the Customizer is open, you’ll want to go to Site Identity. By default, Site Identity lets you customize your blog/website’s name and tagline. Depending on your theme there may be more options here, too, like the ability to set a custom logo.

But the option we’re worried about is the section called “Site Icon”. For some reason, WordPress calls your favicon your “Site Icon”. I don’t know why, but it’s the same thing so let’s not worry about semantics.

The standard Site Identity section lets you change the website title, tagline, and Site Icon.

Adding a favicon / “site icon” is as easy as clicking the Select Image button. This brings up the standard upload/select image box. You can either upload a new image or select one from your Media Library.

Quick Tip: Favicons / site icons look best when they have a transparent background – so a transparent PNG or something similar. They should be square, and at least 512 x 512 px to be compatible across all devices.

Depending on the dimensions of your selected favicon, WordPress may require you to crop it to fit properly. (My alternate logo isn’t 100% round, so it doesn’t fit into a perfect square. Fortunately, I don’t lose much by cropping.)

If your favicon isn't a perfect square, WordPress may ask you to crop it into one. This is done in the media upload box.

Once you’re all set, click the button in the bottom that either says Select Image or Crop Image. The media box will close and you’ll get a preview of what your new icon will look like in most browsers, as well as on mobile devices.

Once the icon is saved, you get a neat little preview of it. WordPress will show you how the icon looks in a web browser and on a mobile device.

Not happy with how it looks? You can always click Change Image below the preview to select or upload a different image and try again!

Step Four: Publish Your Changes

This is arguably the most important step. While recent WP updates have made it so the Customizer will save drafts and revisions (the same way post drafts are saved), it’s important to click Publish at the top of the page to save your work.

I use the blue Dashboard theme on my website, so it's hard to miss the bright orange "Publish" button at the top of the Customizer.

Once you’ve published your changes, you should see your new favicon in the browser tab next to your website’s title. Boom! You’re done.

Troubleshooting

As always, sometimes caching plugins can affect changes to your website. If you don’t see the changes right away, you may need to clear your website’s cache and try again.

Some themes have custom favicon options built into them. I would suggest using the WordPress baked-in version, as it’s 1) probably less bloated and 2) cross-device. I strongly wouldn’t recommend using both as that could cause conflicts.

Was this helpful?

I hope it was! If you’re feeling generous, feel free to leave me a tip on my Ko-fi!

Leave a Comment • Customization, Favicon, Functionality, WordPress

Leave a Reply Cancel 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.

Hey, I’m Kyrie.

Kyrie Tompkins-Overlock

I’m a freelance web developer from Central Maine. I help my clients cultivate growth in their business by getting the most out of their websites.

Learn More

Like me on Facebook Follow me on Instagram Follow me on Pinterest Follow me on Twitter

Blog Categories

  • Announcements
  • Building A Website
  • Divi
  • Export
  • Freelancing
  • GenesisWP
  • Gravity Forms
  • Personal
  • Resources
  • Social Media
  • Tutorials
  • Web Design
  • WordPress
Butterflies next to a computer screen.

Interested in working together?

Let's Chat
Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here: Cookie Policy
Overlock Design Co.
Monday - Friday, 9 AM - 3 PM
kyrie@overlockdesign.co
(207) 370-9271
Follow me on Instagram Follow me on Pinterest Follow me on Twitter
  • Resources
  • Terms of Service
  • Privacy Policy
  • Affiliate Links Disclaimer
Copyright © 2025 Overlock Design Co.