Icon

[slugmuffin]

Add icon for better mobile support. iOS can make a link on home screen, but it's just white for buttonmen right now.

[blackshadowshade]

Does any happen to know the mechanics behind this? Is it just adding an image file of a certain type in a specific location?

[slugmuffin]

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

[irilyth]

https://blog.zen.co.uk/setting-a-home-screen-icon-for-your-website-on-ios-and-android-devices/ suggests that this will work for Android too.

(I'm also amused that the developer.apple.com link above was completely unusable in Chrome/Android. THANKS APPLE.)

[blackshadowshade]

So, it looks like we need a square 144 x 144 px PNG image for this. @AdmiralJota, are you interested in build one of these for us? I'm guessing that the image you used for the favicon would be fine, just bigger.

[AdmiralJota]

I believe I have the original Photoshop file I used to build the favicon with. It shouldn't be hard to scale it up.

[AdmiralJota]

[blackshadowshade]

Okay, testers, especially @slugmuffin, this is now ready for testing.

Navigate your way to http://ephemeral.dev.buttonweavers.com and try to bookmark various pages from the site, and see if the icon comes up right for you. Let us know on pull request #2286 what platform and software you're testing from, and whether things work for you.

[slugmuffin]

Looks good to me:

[irilyth]

Looks good when created in Chrome on my Nexus 5 running Android 6.0.1, although I note that the icon it created for this dev site is blue like the prod site. Should dev sites use red icons? Or hmm, maybe dev sites use blue icons in general. Would the staging site create a red icon?

[irilyth]

Actually, I'm confused: http://steven-universe.dev.buttonweavers.com/ has a red icon; and http://staging.buttonweavers.com/ui/ these days seems to have a blue one like production, but I could have sworn it was yellow before. If any of that isn't as it should be, that's probably a separate issue, but I wanted to follow up here because my previous comment was confused.

[blackshadowshade]

So, the actual bookmarky icon will always be the same at the moment, since I only have the one image. Since we know how the icon works, we can probably work out a way to have this different on dev sites, but not at the moment.

As for the actual icon up in the browser bar, dev sites should have red icons, the live site should have a blue icon, and I'm not certain about the staging site.

[blackshadowshade]

According to #2180, the staging favicon should be yellow, since staging_favicon.ico is yellow.

[cgolubi1]

So the question of whether the staging site's icon is misconfigured is worth looking into, but is also kind of a side issue. Where are we on the original topic here?

My two cents is that the primary target audience for the feature under test is prod site users, so if the single icon under test works in the way that will be correct for the prod site, we should merge it, and open a new issue for a phone icon for non-prod sites if there's a target audience who wants that feature. What think?

[blackshadowshade]

Sounds good to me.

[irilyth]

My two cents is that the primary target audience for the feature under test is prod site users, so if the single icon under test works in the way that will be correct for the prod site, we should merge it, and open a new issue for a phone icon for non-prod sites if there's a target audience who wants that feature. What think?

That sounds fine to me too.