Best Way to Add a Favicon and App Icons to WordPress

Favicons are the icons displayed on browser tabs. They help form the identity and brand of a WordPress blog. App icons are a way to help bridge web apps and mobile apps. On popular mobile browsers such as Chrome and Safari, you can add shortcuts to webpages on your homescreen. These shortcuts look like apps, but they’re essentially bookmarks. Mobile browsers use your blog’s app icons as the icons for these shortcuts.

Generating favicons and app icons

There are many websites that can generate favicons and app icons from your logo. You can also create your own using Photoshop, though you’ll need a Photoshop plugin for favicons. My favorite favicon generator is RealFaviconGenerator, though any favicon generator will do the job. The generator will produce a bunch of files such as favicon.ico, apple-touch-icon.png, manifest.json, etc. You don’t have to keep all of them. In fact, for WordPress blogs, I recommend keeping only 3 of them.
Favicons and App Icons
Favicons and app icons created by a generator

Choosing and displaying favicons

Common favicon file names are favicon.ico, favicon-16x16.png, and favicon-32x32.png. These files are generated by most popular favicon generators. Browsers fetch these files to display as favicons.

favicon-16x16.png isn’t needed

favicon.ico can be any size, though they’re usually 16px by 16px. Therefore, favicon.ico and favicon-16x16.png are the same thing. Their only difference is that favicon.ico is supported in older browsers, such as Internet Explorer 10 and earlier. Since favicon.ico is supported in all the newer browsers as well, there’s no need for favicon-16x16.png.

favicon-32x32.png is recommended

favicon-32x32.png is displayed for high resolution screens, such as Retina screens. If you don’t have a favicon-32x32.png, your favicon will probably look blurry on high resolution screens. Therefore, I recommend that all blogs have a favicon-32x32.png.

favicon.ico doesn’t need a link tag

Many people use link tags to load favicon.ico. The link tags look something like this: <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> The rel attribute has 2 common values: “icon” and “shortcut icon“. “icon” doesn’t work in Internet Explorer and “shortcut icon” isn’t valid HTML5. Neither options are desirable. However, if the link tag isn’t present, all popular browsers will look in the root directory of your blog to find your favicon.ico. Therefore, if you’re placing your favicon.ico in your root directory, the best option is not having a link tag. There are several situations where you must use a link tag. In these cases, “shortcut icon” is preferred to support Internet Explorer. The situations are:
  1. You’re not placing your favicon.ico in the root directory.
  2. You’ve updated your favicon and want to bust the cache of your visitors. (In this case, you must change your favicon’s URL. E.g. href="/favicon.ico?ver=2″)
  3. You’re not using a .ico favicon.

Adding favicons to a WordPress blog

To add favicons to your WordPress blog, copy favicon.ico and favicon-32x32.png to the root directory. I.e. make sure http://yourdomain.com/favicon.ico is accessible. Next, copy this code into your functions.php:

add_action('wp_head', function() {
	echo '<link rel="icon" sizes="32x32" href="/favicon-32x32.png">';
});

Choosing and displaying app icons

App icons are a recent addition to browsers, so the code to add them is still changing. Different browsers use different ways to add app icons.

App icons in Safari

To add app icons in Safari, Apple recommends doing this:

<link rel="apple-touch-icon" href="apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">
In IOS 6 and earlier, Safari will automatically add visual effects such as rounded corners and shadows to your icon. Newer versions of Safari do not do this. To prevent older versions of Safari from adding visual effects, change “apple-touch-icon” to “apple-touch-icon-precomposed“. Since newer versions of Safari will treat both tags the same way, I recommend using the -precomposed version to keep your app icon consistent across IOS versions. These aren’t all the sizes that Safari needs to support. There are many other sizes for Apple’s different devices. If the device’s icon size isn’t available, Safari will automatically resize the closest icon to the required size. If all of your icons are the same (only resized), you can keep just the largest icon. Combined with the “precomposed” tip, I recommend using this for Safari:

<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/apple-touch-icon-152x152.png">
Note that if your icon has transparency, Safari will automatically fill it with black.

App icons in Chrome

Newer versions of Chrome can use a manifest.xml file to define app icons. Some favicon generators can generate this file for you. However, there’s no need to use a manifest.xml. The manifest.xml file is used to reduce the size of your pages if you have lots of metadata, but Chrome can also use a single link tag. Chrome can read apple-touch-icon link tags, but it’s deprecated. Google recommends using rel="icon", which is consistent with the HTML5 specs:

<link rel="icon" sizes="192x192" href="/icon-192x192.png">

App icons in Internet Explorer and Edge

Windows 8.0 and 8.1 use a browserconfig.xml file. Some app icon generators can generate browserconfig.xml files. If you want to create it manually, Microsoft recommends making it like this:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
	<msapplication>
		<tile>
			<square70x70logo src="ms-icon-70x70.png"/>
			<square150x150logo src="ms-icon-150x150.png"/>
			<wide310x150logo src="ms-icon-310x150.png"/>
			<square310x310logo src="ms-icon-310x310.png"/>
			<TileColor>#009900</TileColor>
		</tile>
	</msapplication>
</browserconfig>
You can add a meta tag that links to your browserconfig.xml. However, if you keep it in the root directory, Internet Explorer can automatically find it without the meta tag.

<meta name="msapplication-config" content="/browserconfig.xml">

Adding app icons in WordPress

We combine the code for the 3 browsers and add them all to WordPress together. Other browsers can probably use Safari or Chrome’s code. To add app icons to your blog, add the following to your functions.php:

add_action('wp_head', function() {
	echo '<link rel="icon" sizes="192x192" href="/icon-192x192.png">';
	echo '<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/apple-touch-icon-152x152.png">';
});
You’ll also need to copy to your root directory an icon-192x192.png, an apple-touch-icon-152x152.png, a browserconfig.xml, and all the files referenced in your browserconfig.xml. Once you’re done, try adding your blog to your mobile device’s home screen to make sure it works!

1 thought on “Best Way to Add a Favicon and App Icons to WordPress”

Leave a Reply

Your email address will not be published. Required fields are marked *