gatsby-plugin-manifest
基本はここに書いてあるが、細かな工夫点をいくつか
そのままの状態ではiPhone Safariの「ホーム画面に追加」のアイコンにならない
react-helmetなどを使ってheadタグ内に以下を記載
/* icons/icon-48x48.pngなどは、gatsby-plugin-manifestで自動生成される */
<link rel="apple-touch-icon" href="icons/icon-48x48.png" sizes="48x48" />
<link rel="apple-touch-icon" href="icons/icon-72x72.png" sizes="72x72" />
<link rel="apple-touch-icon" href="icons/icon-96x96.png" sizes="96x96" />
<link rel="apple-touch-icon" href="icons/icon-144x144.png" sizes="144x144" />
<link rel="apple-touch-icon" href="icons/icon-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="icons/icon-256x256.png" sizes="256x256" />
<link rel="apple-touch-icon" href="icons/icon-384x384.png" sizes="384x384" />
<link rel="apple-touch-icon" href="icons/icon-512x512.png" sizes="512x512" />
自動生成の元となる画像が透過や正方形じゃない場合は、iPhoneで背景色ブラック固定になってしまう
方法その1
元となる画像を正方形、透過無しでつくる
gatsby-config.js
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `GatsbyJS`,
short_name: `GatsbyJS`,
start_url: `/`,
background_color: `#f7f0eb`,
theme_color: `#a2466c`,
display: `minimal-ui`,
icon: `src/images/icon.png`, // この画像を正方形、透過無しで作る
}
}
方法その2
gatsbyプロジェクトのルートフォルダにstaticフォルダを作り、背景色のあるアイコンファイルを配置する（ファイル名、サイズは各自設定）。
その後に以下のようにlayoutなどで<head>に入るように設定する。
layout.tsx
import Helmet from "react-helmet"
...
...
<Helmet>
<link rel="apple-touch-icon" href="/icons/touch-icon-iphone.png"/>
<link rel="apple-touch-icon" sizes="152x152" href="/icons/touch-icon-ipad.png"/>
<link rel="apple-touch-icon" sizes="180x180" href="/icons/touch-icon-iphone-retina.png"/>
<link rel="apple-touch-icon" sizes="167x167" href="/icons/touch-icon-ipad-retina.png"/>
</Helmet>
タブやブックマークのfaviconだけは自動生成の物にしたくない
faviconはここで指定されているので、自動生成される48x48が上書き出来れば良い。
Adding Assets Outside of the Module System
https://www.gatsbyjs.org/docs/adding-images-fonts-files/
gatsbyプロジェクトのルートフォルダにstaticフォルダを作りその中にicons/icon-48x48.pngを作ると、gatsby develop時にgatsby-plugin-manifestで自動生成されたアイコンを上書きする。
画像を変更したけど、faviconのキャッシュが効いてて新しい画像が見えない
Chromeの場合
強制的にfaviconキャッシュを全部消す
rm /Users/ユーザー名/Library/Application Support/Google/Chrome/Default/Favicons