Last week, I learned something new about customizing your blog’s browser icon. WordPress makes is easy…if you know where to look.
Your blog’s browser icon is the tiny logo that appears on the browser tab when someone visits your site.
It’s an important part of your branding: you want people to see your logo wherever possible. That particular slot is a simple way to display it. It also helps give a sense of authority to your site. It makes the site look polished.
The way to get the logo to display properly used to be very different. You used to upload a small graphic known as a favicon to the root directory of your site. When I first came to WordPress from Blogger, this is what I did. It worked fine.
In fact, up until last week, that method worked so well that I still hadn’t been able to find a way to change the logo.
What you saw when you visited my site prior to last week was the tiny icon version of my previous logo: an orange rounded diamond shape that contained the letter P.
I adopted that logo back in 2011 and used it for about eight years, and I still like it.
But then I made a change.
Back in November, I picked a new logo that I hoped introduce the concept of the diversity of subject matter you’ll find here. This, as I’m sure you know, isn’t a “narrow niche” blog. I blog on several topics, which you see represented across the main navigation menu at the top of the page.
Naturally, I created a “favicon” version and uploaded it to my root directory.
I waited. And waited. And that orange P was still there.
I checked my theme to see if there was a peculiar setting that overrode whatever icon might be there. No such luck.
I eventually moved changing that logo to a back burner. But in a WordPress Facebook group, I saw someone ask about changing the logo. The answer was short, simple and to the point.
If you’re on a WordPress self-hosted site and you want to change the logo, here’s how to do it.
- On your main Admin sidebar, hover over Appearance.
- Select Customize. It will then open up the customize options for your existing theme.
- Look for Site Identity. If your theme has its own backend menu, as mine does, you’ll have to scroll a bit. When you see it, click the little > icon to the right.
- The Site Identity window allows you to specify your site’s title and tagline, which I hope you already have set. Right below that is Site Icon. Upload a 512×512 size graphic with the logo you want to use.
- To change it, click the Change Image button and then upload the one you want.
- Then click the blue Publish button that’s up in the right corner of the sidebar.
Literally, it’s as simple as that.
As soon as you click that magical publish button, you’ll see the browser icon change immediately.
From that point on, when you open your site in a new tab, you’ll see that new logo in place of whatever used to be there.
The fact that my old logo was already in that space suggests that at some point, I must have used this precise method to get it there. But after nine years, I forgot that control existed. Either that or WordPress grabbed the logo from somewhere else and placed it there when it introduced that option.
And to be honest, I have no idea how long that has been sitting there waiting for me to hunt for it.
I recently suggested the WordPress community is part of the reason I consider the WordPress platform — particularly the self-hosted version — the best blogging platform. Thanks to this Facebook group where someone asked a simple question and received a simple answer, I was able to solve the same problem in about five minutes. (And that was after months of scratching my head about why I couldn’t figure out what should have been so simple.)
If you’re using self-hosted WordPress and have the same issue, now you know, too!