Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Gatsby-plugin-manifest icon producing pngs and svg - but svg is not preferred icon of choice

See original GitHub issue

Description

In gatsby-config.js I am using gatsby-plugin-manifest and my goal is to have my favicon.svg file copied into the public folder on build, and be the preferred favicon for browsers that support .svg files (Chrome).

The svg is being copied using ‘auto’ mode of the manifest, however, the manifest is also making .png version of the icon (as it’s suppose to I believe) to be used as a backup. My issue is that Chrome is selecting to use the .png file instead of the .svg.

This svg allows for dark/light mode variations of the favicon, so I would prefer to use it.

The public index.html has two links for the icon, w/ the PNG listed after the SVG, I’m not sure if that is causing the issue.

Steps to reproduce

My github (w/ some code commented out in the gatsby-config.js file. I tried using the manual ‘icons’ array but the gatsby develop command stalled at the point of “buliding manifest icons”

https://github.com/RyanPinPB/pdm-gatsby

Expected result

When on a browser that supports using SVG for favicons, favicon.svg should be selected.

When browser is in dark mode, dark mode should trigger the SVG media query, causing the svg to invert colors (white/black)

Actual result

favicon-32x32.png is being selected by chrome

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

gatsby info --clipboard

ERROR

UNHANDLED REJECTION (e || []).filter is not a function

TypeError: (e || []).filter is not a func tion

envinfo.js:1 [lib]/[gatsby-cli]/[envinfo]/dist/envin fo.js:1:73314
task_queues.js:93 processTicksAndReject ions internal/process/task_queues.js:93:5
async Promise.all

Issue Analytics

State:
Created 3 years ago
Comments:7 (5 by maintainers)

Top GitHub Comments

1reaction

moonmeistercommented, Jul 28, 2020

So far my testing is showing that making the SVG come second fixes the issue in Chrome. But, http://dahlström.net/svg/favicon/favicon.html has the PNG coming second and works correctly, so there is something else at play here. It’s maybe the “Alternate” attr in rel. I’ll see if that’s it, I can’t find any documentation to suggest that order should affect the icon choice, it’s possible this is a Bug in chrome but we’ll need to narrow down the issue if it is.

1reaction

RyanPinPBcommented, Jul 28, 2020

@moonmeister This is the favicon svg issue we talked about