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

Jump to bottom

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

Closed
Deleplace opened this issue Jan 18, 2023 · 5 comments
Closed

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

Deleplace opened this issue Jan 18, 2023 · 5 comments
Labels
FrozenDueToAge help wanted NeedsFix The path to resolution is known, but the work has not been done. UX Issues that involve UXD/UXR input website
Milestone
website/backlog

Comments

@Deleplace
Copy link
Contributor

Deleplace commented Jan 18, 2023 •
edited

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
Contributor Author

Deleplace commented Jan 23, 2023 •
edited

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 •
edited

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

@dmitshur dmitshur added NeedsFix The path to resolution is known, but the work has not been done. and removed NeedsInvestigation Someone must examine and confirm this is a valid issue and not a duplicate of an existing one. labels Feb 1, 2023
@gopherbot
Copy link

Change https://go.dev/cl/476975 mentions this issue: _content: high-res favicon

@Deleplace
Copy link
Contributor Author

Thank you all, it looks great now in my Mac's dock!

image

@golang golang locked and limited conversation to collaborators Mar 15, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
FrozenDueToAge help wanted NeedsFix The path to resolution is known, but the work has not been done. UX Issues that involve UXD/UXR input website
Projects
None yet
Milestone
website/backlog
Development

No branches or pull requests
6 participants
@dmitshur @gopherbot @seankhliao @Deleplace @dle8 @findleyr