Nuxt.js: apple-touch-icon not showing in iOS and iPadOS bookmarks

[kernel-picnic]

Version

v2.11.0

Reproduction link

https://temp-mail.io

Steps to reproduce

Try to add website to bookmarks (or to "Favourites") on iOS or iPadOS.

What is expected ?

iOS or iPadOS device will load apple-touch-icon.png from url in <link rel="apple-touch-icon"> tag (or from '/apple-touch-icon.png' url if <link rel="apple-touch-icon"> does not presented).

What is actually happening?

Icon is not showing.

Additional comments?

My icon is:

• 180x180 PNG image without transparency;
• Located in /static folder and available via /apple-touch-icon.png link.

Some time ago I switched my website from vanilla Vue to nuxt.js for Server-Side Rendering (SSR). And now my apple-touch-icon not showing in bookmarks (only on home screen as web app).

I spent a lot of time to find errors. I'd trying to:

• Change icon location and name;
• Change icon to another image;
• Add more apple-touch-icon with sizes attribute;
• Add more sizes for other icons, favicons;
• Add precomposed version of apple-touch-icon;
• Use @nuxtjs/pwa with automatically generated icons;
• Check icon via online favicon checkers (they are report me that all is good);
• Manipulate with nuxt.config.js: change options order, add build.extractCSS: true property (I'd trying to find a difference between my website and other websites using nuxt.js, like https://bootstrap-vue.js.org);
• Check all requests via Charles proxy (icon is found, but not showing);
• Check on another devices: iPhone 8 and iPhone SE with iOS 13.3. And on iPad with iOS 12.

But I couldn’t get apple-touch-icon in bookmarks.
A few days ago I found website with the similar trouble:

1. https://hn-spa.nuxtjs.org (SPA version)
2. https://hn.nuxtjs.org

Both websites are similar. But №1 working as SPA. №2 working similar to my website.

And №1 have an icon when I'm trying to save it to the bookmarks (screenshot). №2 haven't icon (screenshot). I can't understand why.

My question: how can I show apple-touch-icon in bookmarks?

---

P.S. I'm always use "Clear History and Data" in settings. And always trying to repeat adding multiple times.

Me website working on Cloudflare, but I tried do the same on dev version, without Cloudflare.

apple-touch-icon added to nuxt.config.js to head.link:

{ rel: 'apple-touch-icon', href: '/apple-touch-icon.png' }

Also I'm using @nuxtjs/[email protected], but I disabled favicon property in nuxt.config.js to use custom favicons: pwa.meta.favicon: false.

[kernel-picnic]

I also tried to ask this question on Stack Overflow (https://stackoverflow.com/questions/59460657/cannot-show-apple-touch-icon-in-bookmarks-with-nuxt-js-app) and Apple support (https://discussions.apple.com/thread/250974245), but there are no answers.

I'm forgot notice that tried to change webserver (nginx) config. No results for me.

[Atinux]

Indeed this is weird, it works when I try to add it as home screen shortcut:

But not on bookmarks

[sanyco92]

Experiencing exactly the same issue. Please, anyone, help to solve it.

[kernel-picnic]

Any things about this issue?

[manniL]

Hey 👋🏼
I can report that there is a workaround: using the „icon“ submodule of the @nuxtjs/pwa module.

Working example website (which is open source): https://www.lichter.io

[kernel-picnic]

@manniL as you can see in my first message, I'm already using @nuxtjs/pwa module. I tried to use/change/remove icon submodule, but apple-touch-icon still not working

[manniL]

@kernel-picnic Weird 🤔 I'm not using anything else to generate the icons and the correct icons are displayed as shown above.

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[gerasimvol]

I'm not using @nuxt/pwa, but experiencing same issue
nuxt v2.11.0

Steps to reproduce:

1. open https://q5b97.sse.codesandbox.io on iOS device
2. Try adding site to Favourites
3. See no icon

[manniL]

Reopened this issue for now. Would really appreciate a minimal codesandbox or GitHub repo for reproduciton

[gerasimvol]

@manniL https://q5b97.sse.codesandbox.io here you go

[llgxvi]

I’ve encountered the same issue today (April 3, 2020)

apple-touch-icon.png
Shows:

• Add to home screen

Does not show:

• Add bookmark
• Add to favourites

The solution appears to be use WWW.example.com, notice the uppercase

[llgxvi]

[llgxvi]

@kernel-picnic Weird 🤔 I'm not using anything else to generate the icons and the correct icons are displayed as shown above.

Your domain has ‘www.’ — it happens to be the solution

[nomve]

Having www is unfortunately not a solution. Although it's so iffy that it makes sense it would be.

tl;dr adding apple-touch-icon-120x120-precomposed.png and/or apple-touch-icon-120x120.png to the domain root fixed it for us. So something like example.com/apple-touch-icon-120x120-precomposed.png.

The longer version: the whole thing is just insane. It works on many pages that do not have these files in the root, so it would indicate that it works without it too. In my/our case it worked on different test environments, but not on prod and I had to spend days figuring it out.

One hint that it's not necessarily the apple-touch-icon specified in the document came from the BBC. If you bookmark bbc.com you will get an icon that does not resemble the apple-touch-icon linked in the document. After a lot of checking, testing, using that favicon checker that gave us an OK for everything, yet it still didn't work, in the end I fired up wireshark to see what the damn thing actually requests.

If you open the share menu, it will try this (on ios 13 at least where there's an icon):

so the linked icon in the document is only the third url it will try, and only if all others fail. If you then try to bookmark it will request apple-touch-icon-120x120-precomposed.png. In my case it succeeded immediately so I don't know when or if it tries one of the linked icons in the document. I checked the server logs and found requests for apple-touch-icon-120x120-precomposed.png and apple-touch-icon-120x120.png, added them and it worked. I guess I could also check if it requests the icon we linked to, but I don't really care anymore.

[sanyco92]

Having www is unfortunately not a solution. Although it's so iffy that it makes sense it would be.

tl;dr adding apple-touch-icon-120x120-precomposed.png and/or apple-touch-icon-120x120.png to the domain root fixed it for us. So something like example.com/apple-touch-icon-120x120-precomposed.png.

The longer version: the whole thing is just insane. It works on many pages that do not have these files in the root, so it would indicate that it works without it too. In my/our case it worked on different test environments, but not on prod and I had to spend days figuring it out.

One hint that it's not necessarily the apple-touch-icon specified in the document came from the BBC. If you bookmark bbc.com you will get an icon that does not resemble the apple-touch-icon linked in the document. After a lot of checking, testing, using that favicon checker that gave us an OK for everything, yet it still didn't work, in the end I fired up wireshark to see what the damn thing actually requests.

If you open the share menu, it will try this (on ios 13 at least where there's an icon):

so the linked icon in the document is only the third url it will try, and only if all others fail. If you then try to bookmark it will request apple-touch-icon-120x120-precomposed.png. In my case it succeeded immediately so I don't know when or if it tries one of the linked icons in the document. I checked the server logs and found requests for apple-touch-icon-120x120-precomposed.png and apple-touch-icon-120x120.png, added them and it worked. I guess I could also check if it requests the icon we linked to, but I don't really care anymore.

Unfortunately, it didn't help me:( added that icons in the root folder, checked requests with Charles, 200 OK, icons found, but still not displayed in bookmarks (but for Home screen web clip it works as expected)

[fortbildung-suppme]

are there any news? Still having this issue in my application.

[Masumi-M]

I solved the problem with this solution.
https://stackoverflow.com/a/64959404/11845221