Touch and other icons

[philli-philip]

This pull request adds the assets and the linking needed to for better Fav icons, in particular:

• Apple Devices, when the Page is saved as a link to the devices Home Screen and Touch Bar
• Android Devices, when the Page is saves as a link to the devices Home Screen, additionally it sets the background-color of the browser if opened from a home screen.
• Windows, when the pages is stored to the Metro tile View
• Fav-icons in higher resolution

[vercel]

@philli-philip is attempting to deploy a commit to the Technologiestiftung Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
giessdenkiez-de	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 15, 2023 9:19am

[dnsos]

Hey @philli-philip, thanks for the contribution! I will review the changes as soon as possible. Stay tuned, I'll get back to this.

[dnsos]

Hey @philli-philip, thanks again for the contribution. I've got a few questions that need clarification. Also, the design of the monochrome icons doesn't really match the feel of the color logo, see my comment below.

While it certainly makes sense to include these optimizations for different browsers/devices, I'm a bit hesitant of merging them without being able to preview them. Do you know of any way to preview them without merging? Or perhaps you could point me to a good resource that explains the usage of such assets?

[dnsos]

I'm not very familiar with the mstiles. How does it work that here it's only one of the images referenced, but you actually added 5 different sizes?

[philli-philip]

Yes, you are right. I'll link them.

[dnsos]

Hmm, the filled logo doesn't really match the feel of the original logo. If only one color is permitted here (and for the white ones), it would make sense to leave the outlines of the original logo and remove the circular, light-green background.

[philli-philip]

I did try that as I would agree that this it is the closest to the brand. But for readability I then decided that a filled version of the logo would be more suitable. Here the comparison:

Apple Touch Bar and Pinned Tab with outlined Logo Apple Touch Bar and Pinned Tab with filled Logo Microsoft Tiles with filled Logo Microsoft Tiles with outlined Logo

[philli-philip]

Maybe for the very small iOS use cases we go with the solid version and for MS-Tiles we go with the outlined version as the icons are displayed in large enough size so the details of the icon are well visible.

[dnsos]

Isn't this duplicating the definition in line 47?

[philli-philip]

Row 40 to 42 add the icon for the Safari Pinned Tabs, but yes row 43 is duplicated. I will remove it.

[philli-philip]

To explain how to test the assets let's start with the list of places I considered icons for:

• Favicon
  The common Favicon used by browsers to display the icon within the tab
• Pinned Tab
  Only in Safari for pinned tabs. Safari dropped the icon for normal tabs. Also used for the Touch Bar on Apple Laptops (but who still uses the Touch Bar?)
• Touch Icon
  is used by Apple devices like iPhone, iPad when the user saves a website to the home screen and the website appears to be an App. Similar how a link on Microsoft can have a Desktop icon. also used
• Android Icon
  used by Android based devices when the link to the website is saved on the home screen (similar to iOS). Based on the browserconfig.xml is allows to configure the browser to give more of an app feeling by setting background color and a dedicated splash icon.
• Windows Metro
  When Microsoft introduced the Metra design they also added the support to save link as metro tiles. the file site.webmanifest defines the tile color and the assets for the 4 different tile sizes.

So what needs to be done to test 100%?

• You need the Safari browser to test the "Pinned tab icon" by pinning the page, then the grey version should be shown. On visiting the page the icon should turn green.
• and another browser of choice to test "Favicon". Just visit the page and the favicon should be shown (already implemented so only regression testing needed)
• An iPhone to test the "Touch icon". Go to the page. Tap export and use the action "Add to Home screen". The Touch Icon should be used to add an "App" to the iPhone that open the website (without URL).
• An Android phone to teest "Android Icon". Visit the page, add to home screen, touch the icon and the page should open (this time the icon will displayed on white background with the icon as splash screen (instead of the browser Icon)
• A windows computer to test the MS-Tile. Browse the Website and "Pin to start". Open the Metro Starting panel and a new tile should appear.
• Mac laptop to test the Touch Bar icon: With the safari browser and the website added to your favorites the TouchBar shows the website as an quickly accessable item.

This works not only with the production version but also with [Preview](Visit Preview) from Vercel in this case.

If needed I can add a couple of screenshots verifying that the icons work.

[julizet]

Thanks for you patience and contribution @philli-philip. I spoke with @dnsos and we agreed once more that the logo should be inline with the overall look and feel.

I tested the following browsers / devices:

• ❌ Safari browser "pinned tab" shows the blue filled logo version
• ❌ Safari browser "favicon" shows the blue filled logo version
• ✅ Safari Browser "bookmark" aka. "favourites" shows the logo in the colours of Gieß den Kiez (green, light green, black)
• ✅ iPhone touch icon shows the logo in the colours of Gieß den Kiez (green, light green, black)

So in turn it would be necessary to solely use either the "outlined logo" like you suggested or try to use the original logo if possible. We don't use any blue color in within the CI. Maybe using the light green might also work?

I wasn't able to test:

• Microsoft tiles
• Android Icon

but I suggest the same to either use solely the outlined logo or stick to the original one.

Let me know what you think.