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%3CLINGO-SUB%20id%3D%22lingo-sub-2012799%22%20slang%3D%22en-US%22%3ERe%3A%20PWA%20icon%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2012799%22%20slang%3D%22en-US%22%3E%3CP%3EThere%20should%20definitely%20be%20a%20built%20in%20way%20to%20override%20this.%20It%20seems%20like%20a%20stretch%20to%20have%20to%20reach%20out%20to%20the%20owner%20of%20a%20website%20and%20have%20them%20add%20a%20favicon%20for%20what%20amounts%20to%20a%20change%20on%20the%20users%20end.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThis%20is%20especially%20true%20when%20a%20site%20actually%20displays%20an%20icon%20correctly%20in%20the%20browser%20(since%20the%20browser%20is%20presumably%20looking%20at%20the%20link%20rel%3Dicon%20tag).%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2013491%22%20slang%3D%22en-US%22%3ERe%3A%20PWA%20icon%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2013491%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F332202%22%20target%3D%22_blank%22%3E%40geoken2%3C%2FA%3E%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%3EHi%2C%3C%2FP%3E%3CP%3Ea%20comment%20from%20Edge%20developer%20about%20this%20issue%20(which%20I%20personally%20had%20before)%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fdiscussions%2Fhow-to-customize-start-menu-tiles%2Fm-p%2F1918670%2Fhighlight%2Ftrue%23M39153%22%20target%3D%22_blank%22%3ERe%3A%20How%20to%20customize%20Start%20Menu%20tiles%3F%20-%20Microsoft%20Tech%20Community%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Emore%20info%20about%20it%3A%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fweb.dev%2Fmaskable-icon%2F%23are-my-current-icons-ready%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3EAdaptive%20icon%20support%20in%20PWAs%20with%20maskable%20icons%20(web.dev)%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
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

7 Replies

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.

 

@Reza_Ameri-Archived 
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?

Its called favicon, search for more :)

@survivor303 
Yes.. and No. ;)

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

rob

@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.

There should definitely be a built in way to override this. It seems like a stretch to have to reach out to the owner of a website and have them add a favicon for what amounts to a change on the users end.

 

This is especially true when a site actually displays an icon correctly in the browser (since the browser is presumably looking at the link rel=icon tag). 

@geoken2 @RobWuijster 

Hi,

a comment from Edge developer about this issue (which I personally had before)

Re: How to customize Start Menu tiles? - Microsoft Tech Community

 

more info about it:

Adaptive icon support in PWAs with maskable icons (web.dev)