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 is a Favicon?
Before we get into specific details though what do we mean exactly by a favicon? It's the small icon displayed in the tab at the top of your browser, just to the left of the website title.
Adding a favicon can really help your website stand out, particularly if you have many tabs open at once.
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:
<link rel="shortcut icon" type="image/png" href="[path to image]" />
Common file formats you can use for favicon's 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 then 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 the to the <head> tag on every page of your website.
For example:
<link rel="icon" href="example.com/favicon-32x32.png" sizes="32x32" /> <link rel="icon" href="example.com/favicon-192x192.png" sizes="192x192" /> <link rel="apple-touch-icon" href="example.com/favicon-180x180.png" /> <meta name="msapplication-TileImage" content="example.com/favicon-270x270.png" />
Notice how WordPress auto-creates each image from the single favicon source file you uploaded to the media library. Not only that, it also adds in 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 actually 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 via 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 we're whether you're using a block theme or not.
Consistency is important here as you'd still be expected to be able to update the favicon via the General Settings page when switching from a block theme to a classic theme as well.
No comments:
Post a Comment