gatsbyで作ったサイトのiconが404になる場合の対応

原因

gatsby-plugin-manifestを使っていて、https://example.com/icons/icon-144x144.pngにアクセスしたとき、404 エラーになってしまう。
この場合、apache のセキュリティ対策設定で icons へのアクセスをブロックしてい可能性が高い。
icons ディレクトリはデフォルトページが ON のときに、Apache のデフォルト画像だけでなく、 READEME ファイルなども入っていて見えてしまう。
見えてほしくないファイルまで見えてしまうので、これを防止しているのだと思われる。

回避方法として

レンタルサーバの場合、apache の設定を変更できないことが多いので、次のようにgatsby-config.jsを修正して icons ディレクトリへの icon ファイル出力をやめて対応する。

{
  "resolve": `gatsby-plugin-manifest`,
  "options": {
    "icon": `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
    // iconsを追加してこの例のようにfaviconsディレクトリへiconファイルを出力するようにする
    "icons": [
      {
        "src": "favicons/icon-144x144.png",
        "sizes": "144x144",
        "type": "image/png"
      }
    ]
  }
}

関連記事