How to add apple-touch-icon.png to index.template.php?

Dwev · April 30, 2020, 03:22:18 AM

I've added a apple-touch-icon.png to the root of our SMF Apple-forum, but the apple-touch-icon.png is showing up on the Mac, but not on iPhones en iPads.

After searching this community I've realised that I should add the following code to index.template.php of the theme that is in use.

Code Select


<link rel="apple-touch-icon" href="apple-touch-icon.png">

Can anyone tell me where and how this should be added in index.template.php?

The few different options I tried all broke the forum immediately...

Gwenwyfar · April 30, 2020, 09:18:30 AM

Each browser/device has its own quirks about icons, this could help:

https://www.favicon-generator.org/

Should have all the icons included in there, and some customization options.

(I realize it does more than what you're asking for, but might as well have it working everywhere, if you haven't already done so, or you can copy their code just for apple icons from there)

vbgamer45 · April 30, 2020, 09:36:56 AM

It should be before the </head> tag. If you have single quotes they have to be escaped.

Dwev · April 30, 2020, 05:23:37 PM

@ Gwenwyfar: not a bad idea, will do.

Quote from: vbgamer45 on April 30, 2020, 09:36:56 AM
If you have single quotes they have to be escaped.

I don't think that I have single quotes in the code above, am I right?

And if I do, how does one 'escape' them?

Gwenwyfar · April 30, 2020, 05:24:58 PM

And I just realized I had the wrong link. That one may work but this is what I meant to post:

https://realfavicongenerator.net/

Quote
I don't think that I have single quotes in the code above, am I right?

And if I do, how does one 'escape' them?

Correct, ' is a single quote. To escape it you do \'
This is so because SMF uses single quotes in the php code, so it needs to be escaped for it.

Dwev · May 01, 2020, 06:26:01 AM

It worked, thanks for all the help!

In the end I added the exact code below in index.template.php of the Theme, just before the </head>

Code Select


<link rel="apple-touch-icon" href="apple-touch-icon.png">

I didn't have to adapt anything, the code above just worked.

Extra info: I entered the exact same code earlier in the same file, but right under <head>
This broke the forum, apparently entering just before </head> doesn't create the same problem (whatever that was).

Gwenwyfar · May 01, 2020, 07:25:48 AM

Cheers

Dwev · May 02, 2020, 01:50:38 AM

A bit more, because it might help other people in the future: with the solution above everything worked fine in Apple's devices, but someone on our forum pointed out that it wasn't working as it should on other platforms.

This person pointed me to https://realfavicongenerator.net and the tests there did confirm that it wasn't working properly on quite a few.
So I uploaded a 260x260 of our logo, had all the stuff auto-generated and the code just before </head> is now as follows:

Code Select


<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
	<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
	<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
	<link rel="manifest" href="/site.webmanifest">
	<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
	<meta name="msapplication-TileColor" content="#da532c">
	<meta name="theme-color" content="#ffffff">

And the forum still works great! 😁

News:

How to add apple-touch-icon.png to index.template.php?