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 RealFaviconGenerator.net. 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
Before
After Favicon Generator
After

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 Comments


  1. Amazing find Jeff. I’ve been searching for something like this for quite a while :)

    Report


  2. 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 –>
    <?php
    }
    add_action( 'wp_head', 'sitename_favicon' );

    (Hoping the PRE tags work here…)

    Report


    1. I would still stick it in the theme usually, as I’d almost always want the favicon to change at the same time as the theme.

      Report


    2. Well, I don’t know how to create a functionality plugin. Perhaps Philippe could add this technique to his generator. We won’t be changing themes for a long time but still, wouldn’t want to forget about it if we did.

      Report


      1. It looks like it just spits back a URL to the image, so you could simply grab that, place it in the uploads folder and link to it directly. So it should indeed be possible to make a plugin handle that without putting the file(s) in the root.

        Report


      2. I must admit I don’t know much about WordPress. Creating a plugin is not in my plans. However, what I’m going to do to add an API to RFG. With such API, a plugin developer will be able to ask you (the WordPress admin) the master picture you want to use, then redirect you to RFG to customize the favicon, and finally get the result (pics+HTML) to integrate it to the blog with whatever method.

        Report


  3. 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!

    Report


    1. 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?

      Report


  4. 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…

    Report


  5. 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”>

    Report

Comments are closed.