@rhysforyou/gatsby-plugin-safari-site-icon

gatsby-plugin-safari-site-icon

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.

Installation

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

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

Usage

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"
      }
    }
  ]
};

Options

Name	Required	Description
icon	✅	The path to your icon, relative to the site root
color	❌	The color your icon should be tinted with