PWA icon?

%3CLINGO-SUB%20id%3D%22lingo-sub-1565283%22%20slang%3D%22en-US%22%3EPWA%20icon%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1565283%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3CBR%20%2F%3E%3CBR%20%2F%3EWhat%20does%20Edge%20use%20as%20a%20icon%2C%20when%20creating%20a%20PWA%20from%20a%20website%3F%20We%20created%20some%20PWA's%20of%20our%20websites%20for%20testing%2C%20but%20all%20of%20the%20PWA's%20just%20show%20a%20letter%20on%20a%20gray%20background.%3CBR%20%2F%3EIn%20Android%2C%20I%20can%20move%20a%20test%20website%20to%20the%20Home%20Screen%2C%20and%20it%20will%20show%20the%20correct%20icon.%20So%20I%20know%20the%20manifest%20%26amp%3B%20image%26nbsp%3B%20is%20loading%20correctly%20from%20the%20index.html.%3CBR%20%2F%3E%3CBR%20%2F%3EI%20created%20some%20other%20PWA's%20from%20random%20sites%2C%20and%20they%20seem%20to%20work.%20So%20I'm%20a%20bit%20of%20a%20loss%20here%20what%20Edge%20is%20looking%20for%2C%20and%20where%20the%20image%20needs%20to%20be.%3CBR%20%2F%3E%3CBR%20%2F%3Echeers!%3CBR%20%2F%3E%3CBR%20%2F%3Erob%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1565283%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EIcon%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3Epwa%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1565401%22%20slang%3D%22en-US%22%3ERe%3A%20PWA%20icon%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1565401%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F340075%22%20target%3D%22_blank%22%3E%40RobWuijster%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIt%20will%20use%20default%20website%20icon%2C%20so%20for%20example%20in%20ASP.net%20project%2C%20you%20have%20option%20to%20set%20icon%2C%20it%20will%20use%20that%20icon.%3C%2FP%3E%3CP%3EIf%20you%20see%20the%20top%20of%20this%20page%20you%20will%20see%20Microsoft%20logo%20and%20when%20you%20add%20it%20as%20App%20%2C%20it%20will%20use%20that%20icon.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1570276%22%20slang%3D%22en-US%22%3ERe%3A%20PWA%20icon%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1570276%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F13441%22%20target%3D%22_blank%22%3E%40Reza%20Ameri%3C%2FA%3E%26nbsp%3B%3CBR%20%2F%3EHi%2C%20I'm%20not%20using%20ASP%20fot%20the%20PWA%20or%20sites.%20I%20just%20install%20the%20website%20as%20an%20app%20from%20the%20'Manage%20Apps'%20functionality.%3CBR%20%2F%3E%3CBR%20%2F%3EI%20added%20all%20social%20media%20images%20%26amp%3B%20icons%20functionality%26nbsp%3B%3CSPAN%3Efor%20the%20websites%20according%20to%20the%20rules%20of%20Apple%2C%20Google%2C%20FB%20and%20Twitter.%20On%20all%20these%20platforms%20it%20is%20working%2C%20as%20expected.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EWhat%20I%20want%20to%20know%20is%20how%20to%20add%20an%20icon%20in%20the%20site%20code%2C%20so%20creating%20a%20PWA%20from%20a%20website%20is%20showing%20me%20the%20correct%20icon.%3CBR%20%2F%3E%3CBR%20%2F%3EI%20looked%20at%20code%20from%20several%20websites%20that%20work%2C%20but%20cannot%20see%20anything%20out%20of%20the%20ordinary%20compared%20to%20my%20websites%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1570305%22%20slang%3D%22en-US%22%3ERe%3A%20PWA%20icon%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1570305%22%20slang%3D%22en-US%22%3EIts%20called%20favicon%2C%20search%20for%20more%20%3A)%3C%2Fimg%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1570378%22%20slang%3D%22en-US%22%3ERe%3A%20PWA%20icon%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1570378%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F380410%22%20target%3D%22_blank%22%3E%40survivor303%3C%2FA%3E%26nbsp%3B%3CBR%20%2F%3EYes..%20and%20No.%20%3B)%3C%2Fimg%3E%3CBR%20%2F%3E%3CBR%20%2F%3EAfter%20looking%20at%20the%20webmanifest%20file%20again%2C%20I%20forgot%20to%20add%20the%20'shortcuts'%20section.%20Now%20it%20works%20as%20expected.%3CBR%20%2F%3E%3CBR%20%2F%3Erob%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1573009%22%20slang%3D%22en-US%22%3ERe%3A%20PWA%20icon%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1573009%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F340075%22%20target%3D%22_blank%22%3E%40RobWuijster%3C%2FA%3E%26nbsp%3Bin%20case%20you%20are%20facing%20this%20issue%20with%20other%20websites%2C%20you%20need%20to%20contact%20website%20owner%20and%20ask%20them%20to%20add%20icon%20on%20their%20websites.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Contributor

Hi,

What does Edge use as a icon, when creating a PWA from a website? We created some PWA's of our websites for testing, but all of the PWA's just show a letter on a gray background.
In Android, I can move a test website to the Home Screen, and it will show the correct icon. So I know the manifest & image  is loading correctly from the index.html.

I created some other PWA's from random sites, and they seem to work. So I'm a bit of a loss here what Edge is looking for, and where the image needs to be.

cheers!

rob

5 Replies
Highlighted

Hi @RobWuijster 

 

It will use default website icon, so for example in ASP.net project, you have option to set icon, it will use that icon.

If you see the top of this page you will see Microsoft logo and when you add it as App , it will use that icon.

 

Highlighted

@Reza Ameri 
Hi, I'm not using ASP fot the PWA or sites. I just install the website as an app from the 'Manage Apps' functionality.

I added all social media images & icons functionality for the websites according to the rules of Apple, Google, FB and Twitter. On all these platforms it is working, as expected.

What I want to know is how to add an icon in the site code, so creating a PWA from a website is showing me the correct icon.

I looked at code from several websites that work, but cannot see anything out of the ordinary compared to my websites?

Highlighted
Its called favicon, search for more :)
Highlighted

@survivor303 
Yes.. and No. ;)

After looking at the webmanifest file again, I forgot to add the 'shortcuts' section. Now it works as expected.

rob

Highlighted

@RobWuijster in case you are facing this issue with other websites, you need to contact website owner and ask them to add icon on their websites.