Zenn
📖

Firebase + GatsbyJS でWebサイト作る　5　アイコン設定

2022/04/11に公開
Firebase
Gatsby.js
React
tech

ヘッダーとかの作り方は前回やったので、あとは適当に自分の好きなように編集するだけになります。
今度はアイコンを作ります。
アイコンというのは、

この「不等式botのWebSite」というタイトルの隣にある画像のことです。
ここの画像を変更します。今はデフォルトの状態なので、GatsbyJSのアイコンがそのまま貼ってある感じになります。

GatsbyJSでは、gatsby-config.jsにアイコンの設定が書いてあるので、
React Helmetを使って設定した<head>タグの中にアイコンの設定を書いても反映されないので、注意が必要です。

とりあえずGatsbyJSのアイコンを削除

/src/images/というフォルダの中にGatsbyJSのアイコンであるicon.pngという画像ファイルがあるので、これを削除します。
次に、適当にアイコンにしたい画像をこのフォルダの中に入れます。
今回はinequalitySymbol.pngという以下の画像ファイルをアイコンにします：

この画像ファイルはTeXの\geqで出てくる記号をスクショとって、
Macのプレビューで適当に「編集→楕円で選択→command+Kで切り取り」をしたものです。
縦横比が1:1じゃないですが、だいたい1:1なのでこれでいきます (注[1][2])。

gatsby-config.jsの編集

次に、gatsby-config.jsを編集します。
ここにアイコンの設定が書いてあるので、それを削除して新しいものに変更します：

gatsby-config.js
module.exports = {
  ... ,
  plugins: [{
    ... ,
    {
    resolve: 'gatsby-plugin-manifest',
    options: {
-      "icon": `src/images/icon.png`,
+      "icon": `src/images/inequalitySymbol.png`
      },
    }

build

あとはターミナルでgatsby buildを実行すれば、アイコンの設定が完了します (注[3])。
gatsby serveをしてlocalhost:9000で確認します：

丸く切り取ったので、このタグを選択していない場合は丸くなります：

いい感じになって嬉しいです。

注釈

[1] ちなみに、正方形で切り取りたい場合は、
Macの写真アプリで「編集→切り取り→スクエア」でできます。
プレビューでやると、ちゃんと正方形にしようとすると細かくてしんどいです。

[2] ちなみに、gatsbyでは正方形のアイコンを使うことを推奨しているので、
「正方形を推奨しているぞ」というwarnが表示されます。

[3] buildが終わらない場合、gatsby-config.jsの中で
"icon": ... ではなくicon: ...になっているかもしれません。
もしそれでもbuildが終わらないなら最初の記事にある通り

npm add -D corss-env

を実行します。
それでもbuildが終わらない場合はどうしたらいいかよくわかりません...

参考

・gatsby-plugin-manifest
・Macで縦横比を指定して切り取る

Discussion