search

ThePacielloGroup / cupper

An inclusive pattern library builder.
MIT License
348 stars 358 forks source link

Icon not showing when adding to home screen on iOS #6

Closed MarkWithall closed 7 years ago

MarkWithall commented 7 years ago

Not sure if it's just me but the icon just shows as black when I go to the infusion page and select 'Add to Home Screen'.

infusion-home-screen

It works when adding a bookmark.

infusion-bookmark

I'm using an iPhone 6s Plus with iOS 10.3.3. The use of apple-touch-icon in the code suggests it is intended to work.

MarkWithall commented 7 years ago

Some further investigate suggests that the icon needs to been in the root folder for it work (see Apple developer documentation).

To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png

I've not had a chance to test this yet though.

MarkWithall commented 7 years ago

I didn't read far enough. The line after says that one can use icons in another folder.

As an reference example, https://html5boilerplate.com/mobile/ works as expected.

Heydon commented 7 years ago

@MarkWithall Thank you for the issue Mark. I'll investigate.

Heydon commented 7 years ago

@MarkWithall Is this with Safari?

MarkWithall commented 7 years ago

Yes. With Safari on iOS. Also, I've now updated to iOS 11.0.1 and the issue is still there.

Heydon commented 7 years ago

@MarkWithall Hi again, the issue appeared to be with Safari not accepting PNGs with transparency. I have replaced the images and the problem appears to be fixed. Infusion add to homescreen with correct icon Can you confirm?

MarkWithall commented 7 years ago

Yes. Looks good to me. Thanks.

Heydon commented 7 years ago

@MarkWithall No problem. Hope you are getting on okay with Infusion besides this.

wschlossberg commented 5 years ago

Hi, I have added to iPhone home screen some frequently updated sites; as examples NOAA Northeast US Weather Satellite, Sports info from various. They work fine but only display as icons on iPhone home screen as white blob—ugly. I am not going to get NOAA, for example, to update their websites to include .png files. Any way to select or use a better icon image for these? I can provide an image/file and I don't expect it to update real time. I just want something that looks nicer. Latest iOS, etc. Thank you.