Additional Favicon/Icon Support

[ghost]

Hi,

Would it be possible to add something like the following to layouts/partials/head.html ?

  <!-- Favicon and apple touch icons-->
	<link rel="apple-touch-icon" sizes="180x180" href="{{ .Site.BaseURL }}/img/apple-touch-icon.png">
	<link rel="icon" type="image/png" href="{{ .Site.BaseURL }}/img/favicon-32x32.png" sizes="32x32">
	<link rel="icon" type="image/png" href="{{ .Site.BaseURL }}/img/favicon-16x16.png" sizes="16x16">
	<link rel="manifest" href="{{ .Site.BaseURL }}/img/manifest.json">
	<link rel="mask-icon" href="{{ .Site.BaseURL }}/img/safari-pinned-tab.svg" color="#6aae7a">
	<link rel="shortcut icon" href="{{ .Site.BaseURL }}/img/favicon.ico">
	<meta name="msapplication-TileColor" content="#6aae7a">
	<meta name="msapplication-TileImage" content="{{ .Site.BaseURL }}/img/mstile-144x144.png">
	<meta name="msapplication-config" content="{{ .Site.BaseURL }}/img/browserconfig.xml">
	<meta name="theme-color" content="#ffffff">

	<!-- old icons
  <link rel="shortcut icon" href="{{ .Site.BaseURL }}img/favicon.ico" type="image/x-icon" />
  <link rel="apple-touch-icon" href="{{ .Site.BaseURL }}img/apple-touch-icon.png" /> -->

  <!-- owl carousel css -->

[ghost]

I didn't write this and do a pull because I'm not sure if this is the best way to do it. My experience with CSS is limited.

However, this is the change I've made to our own site, so that you can favourite it on iOS/Android/Windows and get the favicon you want.

[GeorgeWL]

I think you're close there, but I'd DRY it further, by putting it in its' own partial that's called in the base template, in the same way that the scripts is called through the scripts.html.

I'd also say to replace all the colours with custom params that are set in the config.toml.

Think I'll pull request this later actually.

[adrianmo]

Sorry for my ignorance, but are all those different favicons really needed?

@terrafoundry can you provide information about how/when those icons are used?

@GeorgeWL Thanks, I'll review the PR when you send it.

[GeorgeWL]

They're not all necessary, the only ones really needed :

• Standard Android, but only if you want a version with drop shadow in case someone sends the bookmark to their Home Screen. Otherwise it falls back to the iOS standard, and if it can't find that, to the favicon
• iOS Standard & Retina icons (retina is the iOS super-hd) but only if you want a version to exist in case someone sends the bookmark to their iOS Home Screen. If it can't find that it goes to the favicon
• Windows Live Tile Icon if the website is likely to get pinned to start bar by someone, which only allows transparent background icons with a tile colour set in the manifest.xml. If it can't find that it goes to the favicon, which looks weird if the favicon has a background colour.
• Safari Pinned Tab in some cases (the way Safari does favicons is different, it makes a monochrome silhoutte of whatever the icon is, so in some cases you'll want a different icon file for that so it doesn't look funky.)

becomes

The rest are only there for backwards compatability and nice but not necessary. @adrianmo

I can say for a fact that chunk of code is taken from http://realfavicongenerator.net/ which has an API btw, so another possible method is to link to it and have them set that up then use a script to pull from there API. Too much faff for my liking, but it's a possible way.

[GeorgeWL]

Here's my site before I put favicons on for e.g.

[adrianmo]

@GeorgeWL Wow! Thanks a lot for the clarification. I can see now the importance of those icons...

IMO they should be configured in the config.toml file, probably inside the [params] section as optional params.

@GeorgeWL as you have the know-how, would you be willing to lead this effort?

Thanks,
-Adrian

[adrianmo]

@GeorgeWL BTW, do you want to become a collaborator of the project?

[GeorgeWL]

@adrianmo, I'm actually a little busy atm. But I'd like to help :)

[GeorgeWL]

I'm about to be adding these to my latest site, I'll pull request my favicons partial layout and the params added to the config when done it.

[GeorgeWL]

@terrafoundry see my pull request

[GeorgeWL]

#77

[ghost]

Sorry for lack of response on this, been working away recently.

To address an earlier point, I included all favicons, regardless of market share, because some applications pick and choose which one to use.

For example, copying a link into Rocketchat from a URL, it tries to use the Windows Phone favicon for some reason, so I just used them all to cover all bases.

[adrianmo]

This issue is being addressed in PR #77