Cat logomenu

gatsby-plugin-favicon

If you need to add a favicon to a Gatsby site, there’s an existing plugin: gatsby-plugin-favicon. I installed it this morning and was able to see the favicon in develop mode (haven’t tried it with a build or deploy yet). BUT FIRST I had to get past what seemed like a dealbreaker: Running gatsby develop with the plugin installed caused the terminal to hang at info bootstrap finished.

I verified that it was the plugin causing the issue and actually uninstalled it before realizing what the problem was: Illustrator had output my .png at a much higher resolution than I realized. The gatsby-plugin-favicon documentation recommends an image of 1500x1500 pixels (from which it will create all the appropriate icons for various devices), but I was trying to make it process a 5000+px image. I had also forgotten to make it completely square; Illustrator cropped the export to the bounding box, not the artboard.

Scaling the image down to a nice square 1500px resolved the issue.

Give us a share!