Ever wanted to know how to add the small icon, known as a favicon, to your WordPress website? Well, you're in luck, as today we'll be showing you how to do this step by step!
What Are Favicons and Why You Should Use Them?
Favicons are those small images that appear in a browser tab next to the title of any webpage.
Not all websites write their names in the title for every single page that they have. The full title along with the website name might not always be visible, even if they do append it at the end. This can make it hard to recognize which websites are loaded in which tabs. Favicons make this task very easy if either the website is very popular or you are a frequent visitor.
You can see in the above image that the first tab has loaded a Wikipedia page, while the third tab has loaded CodeCanyon.
Favicons show up in a lot of places like the browser tabs we just discussed, as well as on Google search results in mobile. They are also shown in users' bookmarks and browser history.
This means that having your own custom and recognizable bookmark instead of something generic can help your visitors quickly identify your website and maybe increase the click-through rate in search results, among other benefits.
How Does It Work?
To get a favicon to display in the browser tab, you need to add an icon file to the <head> section of your website (which needs adding on every page) via the <link /> tag as follows:
1 |
<link rel="shortcut icon" type="image/png" href="[path to image]" /> |
Common file formats you can use for favicons are GIF, PNG, JPEG, and ICO.
The current HTML5 specification actually recommends adding support for multiple favicon files, rather than just the one, at different image sizes. This is now considered standard practice.
How to Add a Favicon in WordPress
Fortunately, WordPress handles all the image sizes for you and automatically adds them to the correct location in the <head> section.
All we have to do is to upload a large-format favicon of at least 512 by 512 pixels, and WordPress will do the rest. To upload your favicon, open the site customizer via the WordPress toolbar Customize link, or Appearance > Customize from the admin menu.
With the customizer window open, navigate to Site Identity > Site Icon. This will show the current favicon if one has been defined.
From here, you can either remove the favicon entirely or change it via the media library, where you can select an existing image or upload a new one from your computer.
You'll notice that there is no reference to "favicon" in the Customizer. This feature is known as the "site icon" in WordPress. This is worth knowing, otherwise it might be confusing exactly where you should manage your favicon image.
As mentioned above, once you've specified the favicon image, WordPress automatically generates all the required files and adds them to the <head> tag on every page of your website.
For example:
1 |
<link rel="icon" href="example.com/favicon-32x32.png" sizes="32x32" /> |
2 |
<link rel="icon" href="example.com/favicon-192x192.png" sizes="192x192" /> |
3 |
<link rel="apple-touch-icon" href="example.com/favicon-180x180.png" /> |
4 |
<meta name="msapplication-TileImage" content="example.com/favicon-270x270.png" /> |
Notice how WordPress automatically creates each image from the single favicon source file you uploaded to the media library. Not only that, but it also adds the appropriate attributes for rel, content, and sizes.
Updating the Favicon
Anytime you need to change the favicon, simply navigate to the Site Identity > Site Icon in the customizer again, and click the Change Image button.
Where's the Customizer Gone?
If you're using a block theme, then you may notice that it appears that you no longer have access to the theme customizer.
For example, with the Twenty Twenty-Two theme active, the Customize link in the WordPress toolbar and the Appearance > Customize admin menu items are both missing (see the two coloured rectangles in the following screenshot):
The customizer is still available, though—it's hidden rather than disabled, and you can access it directly via this admin URL: /wp-admin/customize.php (just append this to your site URL).
You can also access it by going to Appearance > Themes and clicking on the Customize button.
This makes it pretty inaccessible to most users (unless you specifically know about it). However, there's currently a proposal to add the Site Icon feature to the General Settings page in the WordPress admin to make it available outside the customizer.
This makes total sense and would give a new centralized way to manage your website favicon. With full site editing and block theme support included in WordPress 5.9, the future of the theme customizer is uncertain, but at least we'll be able to access the Site Icon settings whether using a block theme or not.
Consistency is important here as you'd still expect to be able to update the favicon via the General Settings page when switching from a block theme to a classic theme as well.
Final Thoughts
I hope this quick post helped you realize the importance of favicons and how you can change the favicon on your own WordPress website.
One last thing I would like to mention is that favicons will usually be scaled down for display on different devices and in different contexts. Therefore, you should consider using designs that are simple and memorable.
