How To Create A Platform Agnostic Favicon

Remember favicons? Those cute 16×16 pixel images that are used to quickly locate a site when multiple browser tabs are opened. According to Philippe Bernard, favicons are not mobile friendly nor do they look good on mobile platforms by default. That’s why he created The site generates favicons that look good in all major browsers and platforms.

To get started, make sure you have a square image that is at least 260×260 pixels in size for optimal results. In this tutorial, I’ll be using the WordPress Tavern beer mug. After you’ve uploaded your image, you’ll see a screen that gives you the ability to edit how the image will look on iOS and Android. Transparent icons don’t look very good on iOS devices so consider adding a background color. You can also configure the image to not touch the inside borders of the icon.

Favicon For Apple And Android
Customize How The Icon Will Look

Since the beer mug is black, it didn’t look good against any of the Windows 8 tile colors. Thankfully, the generator provides an option to use a saturated version of the logo. This option changed the mug from black to white. The white beer mug is compatible with just about every tile color available.

Windows 8 Favicon Tile

Once you’re satisfied with the images, tell the generator how you’ll apply them to your website. On the following page, you’ll be given a link to download a Favicon package. Within this package are your compressed and uncompressed images along with a browser config XML file that is used by Windows 8. You’ll need to upload the contents of the package to the websites root folder. Last but not least, copy the code provided to you and paste it within your sites head section. If you’re using a Stargazer child theme, you’ll find the head section within header.php. After you’ve uploaded all of the files and made the change to header.php, use their favicon checker provided by their site to see if everything checks out ok.

The Significance Of These Images

I was unaware of the fact that WPTavern doesn’t look nice when added as a bookmark to the home screen of iOS devices. The next two images show what it looked like before and after using the favicon generator.

Before Favicon Generator
After Favicon Generator

As you can see, by having an image specifically for iOS devices, WPTavern looks like a native app. It’s really just a bookmark. Since the site has a responsive design, it might as well be an app! We’ve already had compliments on the improvement.

As for the size of the mug, we’re working on it.

Little Work Equals Big Gains

I thought Realfavicongenerator was just another typical generator looking for traffic but by going through this exercise, I was able to improve the way WPTavern looks across multiple platforms when users save the site to their home screen. The site is free and I encourage you to give it a try. I’d also like to hear from experienced theme designers to see what they think of the code generated by the site. Is there a way to achieve the same results with more efficient code?


18 responses to “How To Create A Platform Agnostic Favicon”

  1. Last but not least, copy the code provided to you and paste it within your sites head section.

    No, please don’t do this. The favicon you just worked so hard on will go bye-bye when you switch Themes. instead, put the code in a site-functionality Plugin,:

    function sitename_favicon() {
    <!– HTML Code goes here –>
    add_action( 'wp_head', 'sitename_favicon' );

    (Hoping the PRE tags work here…)

  2. I’ve always used All in one Favicon, it saves an iOS style icon I uploaded when I bookmark the page. Can’t beat that.

    That being said, the tool itself does look and work as described. It is a good find!

    • I’ve been reading through that ticket and it’s hard to understand why it’s been over three years since something like it has been added to WordPress. I see it as just a Favicon but apparently it was more difficult than that. What were the major hurdles in implementing something?

  3. It’s a neat little website, but I find it a little odd that the site reports errors with your favicon setup, even if you use exactly what it just generated…

  4. Works with

    So in my parent template (or template, but not a child) each link appears like this

    <link rel="apple-touch-icon" sizes="57×57" href="/apple-touch-icon-57×57.png”>


Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: