How to Set Your Site Icon (Favicon) in WordPress

One of the most commonly useful but too-painful-to-do tasks of every web design project of my past was making a site icon, or favicon. You know, that little things that identifies your site via a quick visual icon that shows in your browser tab. They’re one of those little things that just makes a site seem much more polished and complete.

In the last year (I forget quite which version), WordPress rolled this feature into the Customizer. That means that for people who’ve been in WordPress a while, they may not realize how easy doing a favicon in WordPress is. And for people who are new, once you make sense of the Customizer and its powers, it should be a pretty manageable task. I’m really excited about it, so I made a video:

And for the text-oriented…

How to Make a Favicon for Your Site in WordPress

  1. Collect the image that you’ll use as your site icon (if it’s not already on your WordPress site).
  2. Open the customizer in WordPress. This does most reliably by clicking “Appearance > Customize” in the left-side menu of your WordPress admin area.
  3. Open the “Site Identity” panel by clicking it from the initial listing panel.
  4. See the “Site Icon” section? You’ll use that. If it’s not been used before on your site you’ll click the “Select Image” button.
  5. There you will select an image already in your image library, or have the ability to upload a new one. (If you’ve ever used WordPress’s media library, this screen should be familiar.)
  6. You will have the ability to crop the image. If it was square, you’ll probably skip this by clicking “Crop Image” without resizing the selection box. (If you do need to crop, drag away.)
  7. With that, you’ll be set. Your browser tab may immediately update with the image. If it doesn’t, but you see something like this, you’re set. (Browser caching can be hard to debug, but refresh may fix it for you.) 🙂 

Add a Comment

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