Gatsby Tutorial
Emoji Favicon for Gatsby
Add an emoji favicon to Gatsby via gatsby-ssr.js or the <Helmet> component.
<link rel="icon" href="https://emojifavicons.com/rocket">How to add an emoji favicon to Gatsby
1
Option A: gatsby-ssr.js
Create / edit gatsby-ssr.js at the project root. Use setHeadComponents to inject the favicon into every page.
// gatsby-ssr.js
import React from 'react';
export const onRenderBody = ({ setHeadComponents }) => {
setHeadComponents([
<link key="fav" rel="icon" type="image/svg+xml" href="https://emojifavicons.com/rocket" />,
<link key="apple" rel="apple-touch-icon" href="https://emojifavicons.com/apple-touch-icon/rocket" />,
]);
};2
Option B: gatsby-plugin-react-helmet
In your layout component, use <Helmet> to declare the link.
import { Helmet } from 'react-helmet';
<Helmet>
<link rel="icon" type="image/svg+xml" href="https://emojifavicons.com/rocket" />
<link rel="apple-touch-icon" href="https://emojifavicons.com/apple-touch-icon/rocket" />
</Helmet>Popular emoji favicons for Gatsby
Click any emoji to see the Gatsby-specific install snippet.
Troubleshooting
gatsby-plugin-manifest overriding
Either disable the manifest plugin or set its icon option to the emoji URL.
Cached build still showing old favicon
Run gatsby clean then rebuild.
Helmet not rendering in SSR
Install gatsby-plugin-react-helmet and add it to gatsby-config.js.
Frequently asked questions
Does it work on Gatsby Cloud / Netlify?
Yes. The link lives in SSR-rendered HTML.
Can I use Gatsby Image Plugin for the favicon?
Not recommended — gatsby-plugin-image is for content images, not head links.