Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

x/website: high-res favicon for system integration #57899

Open
Deleplace opened this issue Jan 18, 2023 · 3 comments
Open

x/website: high-res favicon for system integration #57899

Deleplace opened this issue Jan 18, 2023 · 3 comments
Labels
help wanted NeedsInvestigation Someone must examine and confirm this is a valid issue and not a duplicate of an existing one. UX Issues that involve UXD/UXR input website
Milestone

Comments

@Deleplace
Copy link

Deleplace commented Jan 18, 2023

What did you do?

The use case is "Open the online playground as if it was a standalone app".

In Google Chrome (desktop), there is a very nice feature "Create Shortcut". Its creates an shortcut for the OS window manager, that opens the website in its own window, as if it were an app.

  • Open Google Chrome
  • Navigate to https://go.dev/play/
  • Top Right (kebab button) > More Tools > Create Shortcut...
  • Check the box "Open as window"
  • Click Create

It is very well integrated with OSX. Not so much with Ubuntu. YMMV.

image

image

What did you expect to see?

A new Gopher icon shows up in my dock (I'm on OSX)

What did you see instead?

A new Gopher icon shows up in my dock, but it is blurry.

image

In my screenshot,

  • the 4 icons on the left are actual desktop apps
  • the 3 icons on the right are shortcuts to the webapps Google Meet, Youtube and Youtube Music, which have high-res favicon
  • I think the Gopher icon is https://go.dev/favicon.ico , which is not high-res.

I suggest we fix this with either a high-res raster favicon, or a vector favicon.

@gopherbot gopherbot added this to the Unreleased milestone Jan 18, 2023
@seankhliao seankhliao changed the title x/Playground: high-res favicon for system integration x/website: high-res favicon for system integration Jan 18, 2023
@seankhliao seankhliao added the NeedsInvestigation Someone must examine and confirm this is a valid issue and not a duplicate of an existing one. label Jan 18, 2023
@seankhliao
Copy link
Member

cc @golang/tools-team

@dle8 dle8 modified the milestones: Unreleased, website/later Jan 19, 2023
@dle8 dle8 added help wanted UX Issues that involve UXD/UXR input labels Jan 19, 2023
@Deleplace
Copy link
Author

Deleplace commented Jan 23, 2023

Here is my suggestion, I can turn it into a PR after discussion.

I looked at a few guides 1, 2, 3, 4, 5

I propose to add 3 image files and 3 lines of HTML, to fit for most popular OS and browsers.

  • Keep the existing favicon.ico at root path. It contains 2 layers: one 16x16 and one 32x32

image

  • Create and add a larger image /images/gopher.png with dimensions 144x144 (it must be a multiple of 48x48)
  • Create and add a larger image /images/gopher-plain.png with a white background (no transparency)
  • Add an image /images/gopher.svg (an equivalent of this one is already approved for use)
  • Add these lines in the HTML <head>:
    <link rel="icon" href="/images/gopher.png" sizes="any">
    <link rel="apple-touch-icon" href="/images/gopher-plain.png"/>
    <link rel="icon" href="/images/gopher.svg" type="image/svg+xml">

To test what the change would look like, I created color variations for each resources and uploaded 5 static sites to an 5 HTTPS servers.

  • A) the original favicon file, but with the 2 low-res layers colored in pink and brown

image

  • B) a high-res transparent PNG gopher.png colored in green

image

  • C) a vector file gopher.svg colored in purple

image

The goal is to verify that all modern system correctly take into account either the SVG (best) or the high-res PNG (second best).

The static websites are name a, ab, ac, bc, abc, reflecting which resources they contain out of A, B, C.

Results

Chrome (OSX)

Tabs

OSX_Chrome

Chromes "sees" all of the favicon resource types. It correctly prefers SVG when available, then PNG, then ICO.

Dock

a, ab, ac, bc, abc

OSX_macbook_dock

The Dock shortcut correctly displays the SVG. It does not properly handles the high-res PNG, though.

Firefox (OSX)

Tabs

OSX_Firefox

Firefox "sees" all of the favicon resource types. It correctly prefers SVG when available, then PNG, then ICO.

Safari (OSX)

Tabs

OSX_Safari

Safari does not support SVG favicons. It does support the high-res PNG.

iPhone 7 (iOS 15.7)

Home screen

iphone_7_home_screen

ICO and SVG not supported as home screen shortcut icons.

The transparent PNG background turned black, so instead we'll need a distinct file <link rel="apple-touch-icon" href="/images/gopher-plain.png"/> with a plain white background.

iPad Pro (iOS 15.7)

Safari tabs

ipad_pro_safari

SVG not supported.

Home screen

ipad_pro_home_screen

ICO and SVG not supported as home screen shortcut icons.

The transparent PNG background turned black, so instead we'll need a distinct file <link rel="apple-touch-icon" href="/images/gopher-plain.png"/> with a plain white background.

Android 12 (Samsung Galaxy S10)

Home screen

samsung_galaxy_S10_home_screen

ICO not supported.

PNG takes precedence over SVG, for some reason.

Android 13 (Pixel 5)

Home screen

pixel_5_home_screen

ICO not supported.

PNG takes precedence over SVG, for some reason.

@findleyr
Copy link
Contributor

findleyr commented Jan 26, 2023

CC @jamalc -- looks good to me. Thank you for doing such diligent investigation!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted NeedsInvestigation Someone must examine and confirm this is a valid issue and not a duplicate of an existing one. UX Issues that involve UXD/UXR input website
Projects
None yet
Development

No branches or pull requests

5 participants