How to Add a Favicon and App Icons to WordPress

The icons displayed on browser tabs are known as favicons. They contribute to the identity and brand of a WordPress blog. App icons can help bridge the gap between web and mobile apps. You can add shortcuts to webpages on your homescreen in popular mobile browsers like Chrome and Safari. These shortcuts appear to be apps, but they are actually bookmarks. These shortcuts are represented by the app icons from your blog in mobile browsers.

Generating favicons and app icons

Many websites can generate favicons and app icons based on your logo. You can also make your own using Photoshop, though favicons require a Photoshop plugin. RealFaviconGenerator is my favourite favicon generator, but any favicon generator will suffice. The generator will generate a number of files, including favicon.ico, apple-touch-icon.png, manifest.json, and so on. You are not required to keep all of them. In fact, I recommend keeping only three of them for WordPress blogs. A generator generates favicons and app icons.

Choosing and displaying favicons

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

favicon-16×16.png isn’t needed.

The size of favicon.ico can vary, but it is typically 16px by 16px. As a result, favicon.ico and favicon-16×16.png are interchangeable. The only difference between the two is that favicon.ico is supported in older browsers, such as Internet Explorer 10 and earlier. Because favicon.ico is supported by all modern browsers, favicon-16×16.png is unnecessary.

favicon-32×32.png is recommended.

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

favicon.ico doesn’t need a link tag.

To load favicon.ico, many people use link tags. The link tags appear as follows: href=”/favicon.ico” type=”image/x-icon” link rel=”shortcut icon” href=”/favicon.ico” There are two common values for the rel attribute: “icon” and “shortcut icon.” In Internet Explorer, the “icon” does not work, and the “shortcut icon” is not valid HTML5. Neither option is preferable. If the link tag is missing, all popular browsers will look in your blog’s root directory for your favicon.ico. As a result, if you’re putting your favicon.ico in your root directory, it’s best to avoid using a link tag. A link tag is required in a number of situations. To support Internet Explorer, the “shortcut icon” is preferred in these cases. The following are the circumstances:

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-32×32.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=”32×32″ href=”/favicon-32×32.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-60×60.png”>

<link rel=”apple-touch-icon” sizes=”76×76″ href=”apple-touch-icon-76×76.png”>

<link rel=”apple-touch-icon” sizes=”120×120″ href=”apple-touch-icon-120×120.png”>

<link rel=”apple-touch-icon” sizes=”152×152″ href=”apple-touch-icon-152×152.png”>

Safari will automatically add visual effects such as rounded corners and shadows to your icon in IOS 6 and earlier. This is no longer the case in newer versions of Safari. Change “apple-touch-icon” to “apple-touch-icon-precomposed” to prevent older versions of Safari from adding visual effects. Because newer Safari versions will treat both tags the same way, I recommend using the -precomposed version to keep your app icon consistent across IOS versions. These are not the only sizes that Safari must support. Apple’s various devices come in a variety of sizes. If the device’s icon size is unavailable, Safari will resize the nearest icon to the required size. You can keep only the largest icon if all of your icons are the same (only resized). I recommend using this for Safari in conjunction with the “precomposed” tip:

<link rel=”apple-touch-icon-precomposed” sizes=”152×152″ href=”/apple-touch-icon-152×152.png”>

Note that if your icon has transparency, Safari will automatically fill it with black.

App icons in Chrome

To define app icons, newer versions of Chrome can use a manifest.xml file. This file can be generated by some favicon generators. There is, however, no need to use a manifest.xml file. If you have a lot of metadata, the manifest.xml file is used to reduce the size of your pages, but Chrome can also use a single link tag. Apple-touch-icon link tags can be read by Chrome, but they are deprecated. Google suggests using rel=”icon,” which is consistent with HTML5 specifications:

<link rel=”icon” sizes=”192×192″ href=”/icon-192×192.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-70×70.png”/>

<square150x150logo src=”ms-icon-150×150.png”/>

<wide310x150logo src=”ms-icon-310×150.png”/>

<square310x310logo src=”ms-icon-310×310.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=”192×192″ href=”/icon-192×192.png”>’;

echo ‘<link rel=”apple-touch-icon-precomposed” sizes=”152×152″ href=”/apple-touch-icon-152×152.png”>’;

});

You’ll also need to copy to your root directory an icon-192×192.png, an apple-touch-icon-152×152.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!