gatsby: [gatsby-plugin-manifest] Default favicon set doesn't render well (Firefox, retina display)

Description

When using the default favicon set produced by gatsby-plugin-manifest, the icon used by Firefox looks low-res (on my retina Macbook).

Firefox

Chrome

Steps to reproduce

This affects any site using gatsby-plugin-manifest’s automatic icon generation, including Gatsby’s own. You could build that project to reproduce this.

Expected result

Favicon looks sharp in both browsers.

Actual result

Favicon looks low-res in Firefox.

Environment

  System:
    OS: macOS 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4850HQ CPU @ 2.30GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.11.1 - /var/folders/hp/53td47vs5bq5pcx9j918qsfc0000gn/T/yarn--1575197307021-0.11396977243068873/node
    Yarn: 1.19.2 - /var/folders/hp/53td47vs5bq5pcx9j918qsfc0000gn/T/yarn--1575197307021-0.11396977243068873/yarn
    npm: 6.13.1 - /usr/local/bin/npm
  Languages:
    Python: 3.7.3 - /Users/owen/.pyenv/shims/python
  Browsers:
    Chrome: 78.0.3904.108
    Firefox: 70.0.1
    Safari: 13.0.3
  npmPackages:
    gatsby: 2.15.36 => 2.15.36
    gatsby-image: 2.2.27 => 2.2.27
    gatsby-plugin-manifest: 2.2.21 => 2.2.21
    gatsby-plugin-offline: 3.0.14 => 3.0.14
    gatsby-plugin-react-helmet: 3.1.11 => 3.1.11
    gatsby-plugin-sharp: 2.2.29 => 2.2.29
    gatsby-plugin-styled-components: 3.1.9 => 3.1.9
    gatsby-plugin-typography: 2.3.12 => 2.3.12
    gatsby-source-filesystem: 2.1.31 => 2.1.31
    gatsby-transformer-remark: 2.6.32 => 2.6.32
    gatsby-transformer-sharp: 2.2.21 => 2.2.21

Proposed fix

Adding the 32x32px version to the default icons config fixes this, and looks good in other browsers I tested too (Chrome, Safari, iOS Safari).

Happy to submit a PR with this change, unless there’s a known reason to avoid including the 32x32 resolution.

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 18 (11 by maintainers)

Commits related to this issue

Use custom favicon size config to work around jagged favicon in Firefox See https://github.com/gatsbyjs/gatsby/issues/19899 (hopefully will lead to a long-term fix) — committed to cycleseven/cy7.io by cycleseven 5 years ago

Most upvoted comments

Published gatsby-plugin-manifest@2.3.6

pieh on Apr 21, 2020

Hey @moonmeister, the zombie apocalypse actually turned out to be a decent time for me to give a PR a shot 😄 (https://github.com/gatsbyjs/gatsby/pull/23077). It’s my first time attempting to contribute code to Gatsby, so imagine it will need some work. But maybe can get the ball rolling on this issue again at least.

@lifeiscontent I also think your issue is different to my original one, I doubt this PR will help with it unfortunately. Maybe it’s worth opening a separate issue for the SVG problem so it doesn’t get lost?

cycleseven on Apr 13, 2020

You’re welcome to submit a PR. I may have time, I may not…Zombie apocalypse and all…

moonmeister on Mar 17, 2020

@cycleseven I agree we should probably scale it back to 32px. I see clear indications from spec that the sizes attribute on link tags is completely unsupported by browsers, so we should probably just keep what we’re doing and change the resolution. Yes, RFG can be a rabbit hole, I also think it’s one that’s not correct at times, I’ve read to much spec to trust everything it does (though I haven’t always done real world testing). I’ll play the code with this and see how it goes.

moonmeister on Dec 22, 2019

@lifeiscontent Is this what you’d expect? Did you have a question? I don’t mean to be rude, just trying to understand.

moonmeister on Dec 22, 2019