NO FAVICON, homescreen "WEB APP"

Ask the community
,
1

I used this tutorial to create a ‘web app’
https://www.wix.com/corvid/forum/tips-tutorials-examples/how-to-turn-your-site-into-a-mobile-web-app

But my favicon doesn’t appear on the users homescreen, instead a blue box with an E in it. (I’m guessing from the first letter of my website WWW.EATSQUIZ.COM))

I have a premium account with a favicon so unsure what more I need to do to get my favicon to appear on the users mobile home screen.

Also, is there a way of knowing whether the user has opened the page using the shortcut button (and thus in full screen) or normally through their web browser? I would like to information to appear on how to create the shortcut, but I only want this to appear for users who are not already in full screen mode.

2

As mentioned on that link…
https://www.wix.com/corvid/forum/tips-tutorials-examples/how-to-turn-your-site-into-a-mobile-web-app

That you can use it for apple and android, however if it does not work for android then you need to take off the apple part.

Have you done this for your site?

Should look like this, which I do for sites so that it covers both bases:

<meta name="apple-mobile-web-app-title" content="App Name" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-title" content="App Name" />
<meta name="mobile-web-app-capable" content="yes">

Also, make sure that you have your favicon setup in Wix correctly and that it is of the right size and resolution.

Finally, make sure that you have also set your home screen icon as shown here.

3

Thanks for the detailed reply @givemeawhisky I will check all these parts again.

Also are you able to help with the last paragraph of my question?

Thanks😁

4

Still no FAVICON when I create a home screen shortcut.
The FAVICON does appear when I open the website on desktop, so I know the FAVICON is linked correctly.

Here is my header code meta tags

<meta name="apple-mobile-web-app-title" content="EATSQUIZ" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-title" content="EATSQUIZ" />
<meta name="mobile-web-app-capable" content="yes">

<link rel="apple-touch-icon" sizes="180x180" href="wix:image://v1/161da4_e7d53df03579476fa380a148fbbcc26c~mv2.png/Eats%20Small%20Logo.png" />
<link rel="icon" type="image/png" href="wix:image://v1/161da4_e7d53df03579476fa380a148fbbcc26c~mv2.png/Eats%20Small%20Logo.png" sizes="192x192"/>
5

Correction, the above code does work for apple, but not android

6

@GOS and others.
I’m still not seeing the favicon on android, it is blurry on apple but I’m guessing I just need to play around with the resolution of my image for that.

Any furhter help would be appreciated, thanks

7

SOLVED, I changed the links to the pictures to the https://static.wixstatic.com/media/ … links and its works now