You have ten tabs open in your browser, and your site is the only one with that standard gray dot next to it. Small detail, big impact: the favicon (the site icon in the browser tab) is the first thing many visitors notice about your site, and its absence looks unprofessional. The good news: this is one of the quickest improvements you can make to your site. WordPress has a built-in feature for this; it takes two minutes, and the only things people usually run into are the file format and an icon that “gets stuck” after the change. We’ll solve both of those here.
Where Your Favicon Shows Up Everywhere
The icon does more than just the browser tab. The same image appears in your visitors’ favorites and bookmarks lists, in their browser history, as a shortcut icon when someone adds your site to their phone’s home screen, and increasingly next to your site in search results. A single upload serves all those locations, and that’s exactly why WordPress refers to it as a site icon rather than just a favicon: it’s your site’s logo wherever it appears outside of your site itself.
The correct file: square and at least 512 by 512 pixels
Before you click, make sure you have the right file ready. WordPress requires a square image of at least 512 by 512 pixels, in PNG or JPG format. WordPress automatically generates all the smaller versions that browsers and phones need from that single image; so you no longer need to create a separate .ico file like you used to. Three practical tips for the design. Don’t use your full logo with text: at 16 by 16 pixels in a tab, text is unreadable, so choose just the logo or the first letter of your name. Ensure sufficient contrast, as the icon must be visible on both light and dark browser themes. And a PNG with a transparent background looks best in most contexts.
If you only have a logo in a different format, first crop it to a square using a free image editor. Stretched or cropped icons are the most common cosmetic flaws we encounter in this area.
Setting the Site Icon
- Log in to your WordPress dashboard.
- Go to Settings, then General. At the top, you'll see the "Site Icon" section. If you're using an older theme and don't see it there, go to Appearance, open the Customizer, and select Site Identity; you'll find the same feature there.
- Click "Choose Site Icon" and upload your square image, or select one from your Media Library.
- Crop the image when WordPress prompts you to do so, and confirm.
- Save the changes and open your site in a new tab to see the results.
If you're using a page builder or a theme with its own settings, there may be another favicon field there as well. Be sure to enter the icon in only one place—preferably the default WordPress location mentioned above; having two conflicting settings can lead to confusion about which one takes precedence.
Old icon won't go away? That's the cache.
You’ve set a new icon, but the browser tab is still showing the old one. Don’t panic—and above all, don’t upload it again. Favicons are stored extremely persistently in the cache (the temporary memory of your browser and your site)—more persistently than almost any other part of a website. Here’s how to fix it: first, open your site in an incognito window. If you see the new icon there, everything is fine, and you just need to clear your browser’s cache or simply wait a day; visitors will see the new version on their own. If you still see the old icon even in incognito mode, clear your site’s cache yourself using your caching plugin.
At Surver: LiteSpeed Cache is the default caching plugin on our hosting platform. You can clear the cache in the dashboard by going to the LiteSpeed Cache menu and selecting "Manage." If the old icon still appears anywhere after that, our support team is available seven days a week to help you resolve the issue.
For advanced users: manually and by network
If you’re not using the built-in feature—for example, if you’re using a custom theme—you’ll need to upload the favicon files yourself and link to them using link tags in the site’s head section, preferably through a child theme so that the links survive updates. In a multisite network, each site sets its own site icon through its own settings; there is no network-wide icon. And after a migration or domain change, be sure to check whether the icon is still loading: the reference contains a full web address that must be updated during such a change, which happens automatically if you perform the migration properly according to our A Complete Guide to WordPress Backups and Migration.
A small part, part of a larger whole
The site icon is typically one of those finishing touches you take care of during the final phase of building your site, along with the site title and your permalinks. If you're still setting up your site, our A Beginner's Guide to Creating a Website with WordPress walk you through all those final steps in the correct order. And once your site is up and running, you'll find in our A Complete Guide to WordPress Management how to keep it organized.
