Use an emoji as your site’s svg favicon 🖼

A message from Queen @raae

The plugin uses a trick I learned via @chriscoyier on CSS-Tricks who got it from @LeaVerou; the emoji is placed inside an svg tag and the svg is used as the favicon.

Learn how to get the most out of Gatsby and stay updated on the plugin by subscribing to emails from yours truly.

How to install

npm install @raae/gatsby-plugin-svg-emoji-favicon


yarn add @raae/gatsby-plugin-svg-emoji-favicon

How to use

In the gatsby-config.js for your site add @raae/gatsby-plugin-svg-emoji-favicon to the plugins array making sure to add an emoji.

// gatsby-config.js

module.exports = {
  plugins: [
      resolve: "@raae/gatsby-plugin-svg-emoji-favicon",
      options: {
        emoji: "🥳",

How to contribute

I love to hear from folks, do not be shy 🎉

With Code

Take a look at CONTRIBUTING.md.

With Questions, Feedback and Suggestions

If you have any questions, feedback or suggestions head on over to discussions.

With Bugs Reports

If you find a bug please open an issue and/or create a pull request to fix it.