Cleanup apple touch icons

[arthurvr]

As I said, currently it's a mess: b01ffe0#commitcomment-10088611

There is, in this case, no need to include 9 different apple touch icons. The recommended pattern these days is just one 180x180 icon. All devices will automatically resize it.

@sebmck That way it will be way easier to update the icon to the new icon.

[sebmck]

👍 Thanks!

[arthurvr]

That was quick! Thanks @sebmck!

[arthurvr]

@sebmck I can update to the new icon, if you like that. PR welcome? What image should I use?

[sebmck]

@arthurvr Absolutely. Not sure about what image to use, the logo source is available here though.

[sparty02]

For some background (as I originally implemented the favicons), I totally agree that the favicon situation (across the web as a whole) is a complete mess.

Some notes:

• I originally created the icon by taking the svg logo (that was originally in the old 6to5 repo) and using svg-edit to create a logo appropriate for a favicon for it (the full logo is to much for a favicon, so I just cropped to the '6' and put a yellow layer behind it). I then exported it to png.
• Because of the awful favicon situation, I opted to just take that one png and generate the several favicons needed for full cross platform support, using what appears to be the defacto tool for it. More info here too.
  • Not to knock what this PR does, but I don't see the situation being any better (went from 17 favicon links to 9 favicon links..... still absurd). I think the only good solution is to generate all of the favicon versions and inject the related links into the head html as part of a build step. Unfortunately, the babel static site content is all just manually source controlled through the github/jekyll site right now. This is awesome for simplicity, but doesn't allow for build time stuff like this.

Ce la vie....

[sebmck]

Ideally I'd like to just have one favicon and not have to deal with all this overoptimisation madness 😜

[sparty02]

@sebmck totally agree. If we want to keep it all static, maybe we should just drop everything but the one favicon, and just let any device that doesn't support that just not get one. Either just keep the one or just dump everything in from the generator....

[arthurvr]

This is awesome for simplicity, but doesn't allow for build time stuff like this.

I can only agree with that! It might be useless in here, but I work on quite a bunch of sites where we have a build script that pushes a dist directory in the gh-pages branch. Works like a charm and enables you to automate things like this.

Just as an example how such a setup could look like, in HTML5 Please we let Travis automatically deploy everything to the gh-pages branch. The code that ends up there is minified, the sass is compiled, ... (we don't automate favicons over there but it is an option for sure)

using what appears to be the defacto tool for it

The defacto tool seems to do quite a bunch of stuff wrong. It's basically all messy atm.

In HTML5 Boilerplate we decided to just have these:

• favicon.ico (32x32)
• apple-touch-icon.png (180x180)
• tile-wide.png (558x270)
• tile.png (558x558)

That's pretty minimal and covers nearly every device.

[arthurvr]

using what appears to be the defacto tool for it

Just as an FYI, but that defacto tool is does quite a bunch of things wrong: h5bp/html5-boilerplate#1670