Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


GitHub npm (scoped)

Adds support for shipping a Safari site icon with your site. Safari site icons are monochrome, SVG icons which safari uses in place of favicons where provided.

This section of Apple’s developer documentation gives a good overview of the subject, though it’s worth noting these icons are now used in many other cases than just pinned sites nowadays.


# Yarn
yarn add @rhysforyou/gatsby-plugin-safari-site-icon

# npm
npm install --save @rhysforyou/gatsby-plugin-safari-site-icon


Add the plugin and its options to your gatsby-config.js like so:

module.exports = {
  plugins: [
      resolve: "@rhysforyou/gatsby-plugin-safari-site-icon",
      options: {
        icon: "./src/images/pinned-tab-icon.svg",
        color: "#FF374B"


Name Required Description
icon The path to your icon, relative to the site root
color The color your icon should be tinted with
© 2023 Gatsby, Inc.