Add appropriate icon file for Home screen icons on iOS and Android

[adamengst]

Steps to reproduce Currently, there's a favicon for the Challenge leaderboard that's the simple black-on-white FLRC logo. However, if you save a Home screen icon of the leaderboard for iOS (and Android, possible, I can't test), you get a generated icon that tries to reflect what the screen looks like, rather than a custom icon.

Expected behavior When the user saves a Home screen icon, it should be a custom icon that always looks the same and makes it easy to get back to the leaderboard. Possibilities:

• It could use the current favicon (scaled appropriately; I can provide vector art)
• It could use the same icon as I've recently created for the FLRC Forum for this purpose, which is the FLRC logo in blue on white
• It could use a new icon (perhaps @scottpdawson could help?) that better reflects the unique nature of the leaderboard.

(And while we're at it, we should do the same thing for the Trail Circuit Leaderboard.)

[scottpdawson]

I think that's (perhaps) because all we have is favicon.ico. If you go to https://favicon.io/favicon-converter/ and use an image that'd be appropriate for all sizes, that's probably the cleanest path. The generator will put out 7 files that'll need to be in the root of the sites.

[SteveDesmond-ca]

I can update the system to use the app logo for the favicon and home screen icon -- I can't remember if I have a vector version of the challenge logo, so if I could get both that and the FLRC logo, I can make sure everything is scaled at the best quality

[adamengst]

Here are some vector files. The Challenge logo might be best, since it's less detailed.

[SteveDesmond-ca]

Implemented in b76fef5, confirmed in both the Challenge and Trail Circuit on both Firefox and Chrome for Android -- if it looks good on iOS, we can close this feature as completed.

[adamengst]

Are you getting a black or white background on Android? On macOS, I see just the diamond, so I'm assuming it's a transparent background. But iOS must require a square icon without transparency, and I think white or a light gray might look better.

[SteveDesmond-ca]

Bah, the docs say iOS interprets transparent as black. Android picks a nice light blue, probably interpolating colors from the icon. I'll update the favicon to a white bg.

[SteveDesmond-ca]

Added solid background in 4c706ef -- I went with the app's light blue background color, since it turned out that's what Android was doing.