The favicon system

[joseluis]

Right now the favicons are loaded from /theme/lib/icons.php.

We should probably move there the meta theme color line from header.php.

The current choice on favicon formats is based on bones, and it is very old, so we would probably benefit from rethinking it. Right now this files are expected in /src/img/:

• favicon.ico
• favicon.png
• apple-touch-icon.png (120px square)
• win8-tile-icon.png (144px square)
• favicon_adm.png (for the WordPress admin)

[joseluis]

@jan-dh Do you know the current best practices for favicon formats? Or some the best tools that exist so I can take a look at them?

[jan-dh]

I make all my favicons with http://realfavicongenerator.net/. You just upload one image, you can tweak the background-colors and you see in real-time how it would look on the different devices. It gives an output like this

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

You can also choose a root-path for your app that gets applied to all the different tags. If you keep all your icons in your root of the theme you can just appy the following "root": <?php echo get_template_directory_uri(); ?> and you can simply copy/paste this in your header code.

If you download it you also get:

• a browserconfig.xml – XML file to support home screen tiles on Windows 8
• manifest.json – JSON file to support home screen icons on Android

I'm not sure if this is the best way but it feels like it covers most ground and gets you all the stuff in 2 minutes. I suggest you try making one using that website (note, there are others out there).

They also have a Wordpress plugin but I prefer to keep my wordpress-sites as plugin-free as I can.

[YemSalat]

I think we should just stick with the largest file for apple icons. Apple keep changing these with every new device, two years ago there were no 76x76 and 180x180, there is no way to win with this.
Devices that need smaller icon will just scale the larger one (exactly like that website does for you)

See relevant discussion here: h5bp/html5-boilerplate#1367
HTML5 Boilerplate only keeps the 144x144 apple icon:

So, only if someone clicks "Add to home screen", then a slightly heavier png will have to load (larger only by a couple of kilobytes) ... this is perfectly acceptable as far as I'm concerned, and far better than creating 6 different sized icons... and especially better if you're including the HTML on the page to load all six.

[jan-dh]

I would not include any of the favicon stuff or just the bare minimum in the starter theme. It's just nice to document how people can implement a more elaborate favocion - setup.

[YemSalat]

Agreed, maybe lets just stick with favicon.png and comment a couple examples for other devices with links to more info on the subject.

[joseluis]

@YemSalata it's a very interesting discussion, thanks.

I'm also a fan of having a simple default. Let's remember that WordPress core now supports associating a favicon through the personalizator. We wouldn't even need to include a single favicon for the most simple scenario.

It would make sense then to just provide a way to create an advanced set of favicons. Personally I always use the different favicon for the admin area feature.

Regarding the apple favicons, I like this approach: Pragmatic Touch Icons (and an example). My only doubt is regarding the .htaccess file. Either the developer would have to manually insert a line like this /^\/(apple-)*touch-icon-*(\d*x\d*)*[-precomposed]*.png/ into the WordPress root .htaccess file or we could include an .htaccess file with the theme. But I'm not sure if that would be considered a good practice.

I see there are several options here:

• No default favicons. Use WP for that
• Don't use WP. Specify the favicon in the theme.
• A special favicon for WP admin
• The information for doing what the previous link says (Pragmatic Touch Icons) with a 180px favicon.
• An embedded favicon generator. I'd setup a gulp task using gulp-favicons which is a wrapper for favicons
• A link to realfavicongenerator.net

[joseluis]

BTW let's not forget this wonderful cheatsheet https://github.com/audreyr/favicon-cheat-sheet

[jan-dh]

hmm, I don't really like the .htaccess approach. Favicons are a pretty simple thing, I would prefer a very simple, straightforward approach. This is a starter theme for developers, I think you can except people to know how to make a favicon. The embedded favicon generator etc. seems like a nice solution but again, overly complicated. The link you provided seems a bit out of date as well when you look at the pull requests and the latest updates.

[joseluis]

I also prefer a simple approach, and so will be the default one. But I feel I must give something more as an alternative.

Although I don't think it's necessary to provide every possible option. Maybe just adding the Pragmatic Touch Icons link as an alternate resource is enough.

But I'd also prefer an in-house solution if possible rather than the alternative just be to create them manually through a website.

I'm not sure what you are seeing outdated. For me gulp-favicons and favicons proyects seems pretty good maintained.

[YemSalat]

OK, let me be honest for a second.

I think the entire apple icons idea is a stupid decision made by Apple, followed by cargo-cult developers who don't realize how horrible the multiple-icon solution is. I think NOBODY should be creating multiple icons for apple devices.

Here are my reasons why I think the multiple icons are super stupid:

1. The only time you see that icon is when you make a bookmark or add website to your homescreen. I have no data on this but I assume this does not happen very often.

2. Apple keeps creating these icons for every new screen resolution that their devices have. This is silly by itself. But do web developers really need to follow this? For example two years ago they introduced 76x76 and 180x180. Did you go back and update your old websites? 57x57 is for iPhone 3G - do you really need to support this? What if they introduce 2 more icon sizes this year - are you gonna add those too?

3. According to Apple - the benefit of having multiple icons is that a device with a smaller resolution will download a smaller size file (I mean size in bytes) This argument is often brought up by people who don't know that PNG handles scaling quite well (especially if you don't have too many colours on your image which is true about the majority of favicons). Have a look:

Here is a 180x180 icon, it 'weighs' 994 bytes:

Here is a scaled down to 57x57 version of the same icon, 536 bytes (458 bytes difference):

And here is you header code, 731 bytes total:
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">

So in order to save 458 bytes for people who make a bookmark - you make everybody download extra 731 bytes of useless code with every page load, even the desktop users have to suffer.

In conclusion - separate icon sizes for every device is stupid. When Apple came up with this - all the developers should have said: "No, Apple, this is stupid, go back to the drawing board and come up with a better solution for your icons, we are not putting all of those in our markup"
Cargo-cult is a powerful thing though and I keep seeing people adding all those icons to their projects.
As a theme for developers which is positioning itself as 'clean' and 'modern' - I think its best to set an example and show the best approach. Lets leave just the favicon.png, one apple icon commented out and a link to more info. I think that would be the best solution.

[joseluis]

You know what? You're right. Even if your size examples are not very realistic. A more realistic one could be:

180x180 icon = 11,5 kb

57x57 icon = 6 kb

But I agree in not wasting precious resources (time & clarity) trying to keep up with that madness.

I suppose both the apple-touch icon and the win8-tile-icon can refer to the same file by default. In that case I'd prefer to name that file something like favicon-big.png which is simpler and neutral.

One thing, though, IE only supports the favicon in png format since version 11, so providing a favicon.ico I suppose is unavoidable for now.

And we probably don't need to worry about a 32x32 favicon version.

Some reading material:

• https://css-tricks.com/video-screencasts/122-the-state-of-favicons/
• https://en.wikipedia.org/wiki/Favicon

[YemSalat]

The sizes will be smaller if you compress them:
(1.9KB and 3.9KB for your images, so down to 2KB difference)

But as I already said - this works best for images which don't have many colours (many icons are 'flat' these days and in general its popular to keep the colour palette to minimum in icons) - the less different colours you have in the palette - the less will be the difference between the file sizes. Your icons have gradients that's why the difference is more significant.

Regarding *.ico, to be honest I did not realize that IE only supports png from version 11 (thanks for the info btw), so it spoils everything again! Its definitely too early to dismiss IE9 and 10, so yep, I guess will have to add the *.ico as well (or maybe even just the favicon.ico cause other browsers understand it as well).

[joseluis]

Good to know! Oh, and gulp already compresses automatically the images it founds under /src/img/ when compiling for production, so that's nice.

I'll update the favicon system shortly. Also making it easier to comment out individual lines, and removing unnecessary IE conditionals, among other things...