nuxt: apple-touch-icon not showing in iOS and iPadOS bookmarks

Version

v2.11.0

Reproduction link

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:

https://hn-spa.nuxtjs.org (SPA version)
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/pwa@3.0.0-0, but I disabled favicon property in nuxt.config.js to use custom favicons: pwa.meta.favicon: false.

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 16 (5 by maintainers)

Most upvoted comments

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

sanyco92 on Dec 31, 2019

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.

nomve on May 4, 2020

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

Steps to reproduce:

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

gerasimvol on Feb 25, 2020

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

manniL on Jan 10, 2020

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.

kernel-picnic on Dec 25, 2019