Further to our article on the importance website favicons, this post the necessary code to include limited Apple Touch, Android, Microsoft, and other icons in your WordPress document head so that they'll be recognized by various devices. This is the first of two articles; this post dealing only with WordPress and doesn't utilize the array of images returned by our Icofav 
icon creation tool.
Since WordPress version 4.3, the platform provides the functionality to create and automatically reference 
the four most used .png icons - 32x32 (favicon), 192x192 (Android/Chrome), 180x180 (IOS), and 270x270 (medium sized Windows tile). To upload a favicon image to WordPress, navigate to Appearance -> Customise -> Site Identity. Upload a file, click select, then Save and Publish. The WordPress feature isn't great; it won't create a favicon.ico file in your root directory, and it only renders limited icons in your WordPress page, but it is reasonably adequate.
While it's only the four images above that are rendered to each page by WordPress to default, uploading an image does create a small suite of commonly used icon images. The code below will add these additional icons to your WordPress website.
It's the 60x60, 150x150, 192x192, 300x300, and 512x512 icon that are created by WP by default but omitted from your rendered WordPress page. Before we look at how these icons can be included into your page output, it's necessary to look at the WordPress Icon API.
WordPress Site_Icon API
WordPress introduced four new functions to the public API with their site icon feature:
has_site_icon()returns whether the current site has an icon set up or not.wp_site_icon()displays all available favicons and app icons.get_site_icon_url()returns the url to the current site's icon, or the default passed to it.site_icon_url()displays an escaped version of the url to the current site's icon.
has_site_icon()
The has_site_icon() function determines whether the current site has an icon set up or not. It returns a Boolean value based on whether it can retrieve a 512px icon with the get_site_icon_url function (if the 512px image was uploaded it returns true). Because the 512px image is required, smaller images are scaled up when uploading, so it's best to keep to the minimum 512 pixels.
If you're a plugin or theme developer, or you run an agency, you might force the icon upload by displaying an administration message encouraging that action.
The code:
Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin.
If using a multisite the $blog_id should be passed to the function.
get_site_icon_url() & site_icon_url()
The functions get_site_icon_url and site_icon_url are similar. The first function will return the icon URL, while the second applies esc_url to the result of the first function and echoes the URL directly.
wp_site_icon()
The wp_site_icon function loops through the array of default icons and echoes them to the head of your website. Of course, wp_site_icon() is part of the WP core so theme developers no longer have to worry about adding this feature themselves (unless they want to improve upon it).
WordPress only generates a limited number of icons based on the needs of the many so you will likely want to create additional icons. This may be accomplished with the site_icon_image_sizes filter. The function below must be in place before you upload your icons or they won't be generated.
... although I find this cleaner:
Both functions are obviously both the same. I've used just three Apple app icon sizes as recommended by Apple, and aren't rendered in the WordPress head (or by their icon generation tool) by default. In reality, you'll want to add multiple sizes.
If you copy this code into your custom functions file and upload an image, the additional images sizes will be created.
Now that the additional images exist, we need to reference them in our WordPress head. The site_icon_meta_tags filter is referenced in the wp_site_icon function (that renders the meta tags to the head).
The only attribute that is requires is $tags, otherwise you won't return the default WP images (although if you were re-writing them all it's something you might consider).
Notice that along with the custom sizes referenced for each element in the array, I've also defined the rel tag. You would manufacture the rel tags based on the size and type of icon you're referencing for a particular device.
Note that we've included the 60x60 icon but we didn't include it in our array of new image sizes. This is because it's one of the icons that WordPress creates by default but does not display.
This function would output the following to your document head.
Considerations
Despite the proliferation of png favicon files, particularly over the last few years with the advent of the mobile and tablet overlords, the ico file still does have a place. One should be created (with icofav.com ) and left in your root directory with a 16x16 .png file of the same image. The ico file we generate on icofav is more of a container for a number of icon images, and it's still used by a large number of applications. It's good practice to have them there - even if they're not referenced in your document head.
The Favicon Series
In a forthcoming favicon post we look at how you can manufacture a complete library of icons with our Icofav tool and reference them all into your WordPress or PHP website.
- The Importance of a Website Favicon — July 23, 2017
- Reference (Additional) Device Favicons in WordPress — July 26, 2017
- Favicons with Outgoing Links in WordPress (or PHP) With Google’s Icon API — July 27, 2017
- One-Click Website Favicons and Automated Maintenance — April 13, 2021
