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.
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:
You’re not placing your favicon.ico in the root directory.
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″)
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:
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:
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:
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:
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!