投稿日 2020/11/27

Create react app を使って作ったプロジェクトにファビコンとホーム画面追加を設定する

reactfaviconiPhone

Create react app で作ったアプリのファビコンは、初期状態だと React のアイコンになっています。

いつも使っているものに変更しようかなという気持ちで、 ついでに iPhone で「ホーム画面に追加」した場合のアイコンを設定します。

(IE は対応していません。使わないので・・)

ファビコン対応：favicon.ico を入れ替える

public 直下にあるので、.ico を作って入れ替えます。 ここでは 48x48,32x32,24x24,16x16 に対応したマルチアイコンとします。

public\favicon.ico

iPhone のホーム画面に追加に対応：画像追加

180x180 の png を用意して(名前はなんでもいい。ここでは apple-touch-icon-180.png) public に置きます。

public\apple-touch-icon-180.png

manifest.json を書き換え

アイコンを設置したときに public にディレクトリを切った場合は、src にパスを書けばよいです。

public\manifest.json 
{
  "short_name": "Color Changer",
  "name": "Change SVG color",
  "icons": [
    {
      "src": "chrome48.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {      "src": "apple-touch-icon-180.png",      "type": "image/png",      "sizes": "180x180"    },    {
      "src": "chrome192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "chrome512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#e6e6e6"
}

参考