faviconの設定＆チェック方法

<aside> 🌿 Next.jsにも有効（spの）googleの検索結果でもファビコンを表示させたい場合は特にこれ！

</aside>

▼参考記事

Next.jsでFaviconを設定する - Qiita

■目次

Faviconを作る

https://realfavicongenerator.net/ に飛ぶ
右にある「Select your Favicon image」ボタンをクリックし、画像をアップロード（260*260pxがいいらしい）
プレビューが表示されるので、一通りチェック
一番下までいくと「Generate your Favicons and HTML code」ボタンがあるのでクリック

HTMLが表示されるのでコピーしておく
favicon packageをダウンロードできるボタンもあるので、それもクリックし、ファイル一式を取得する
ファイル一式が入っているフォルダ名を「favicons」などに変更しておく

Faviconを設置する

Next.jsの場合はpublicフォルダ内に、それ以外は画像を格納しているフォルダ内に、先ほどダウンロードしたFavicon packageを置く ※名前変更したフォルダごと置いてOK

Favicon表示のために少し設定をいじる

Favicon package内に入っている

browserconfig.xml
site.webmanifest

をそれぞれ開き、srcのパスをルートに合わせて変更する

パスの先頭に/名前変更したfavicon packageフォルダ名 を追加すればOK

例）**/favicons**/mstile-150×150.png

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square150x150logo src="**/favicons/**mstile-150x150.png"/> //変更
            <TileColor>#ffffff</TileColor>
        </tile>
    </msapplication>
</browserconfig>

{
    "name": "hogehoge",
    "short_name": "hogehoge",
    "icons": [
        {
            "src": "**/favicons/**android-chrome-192x192.png", //変更
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "**/favicons/**android-chrome-512x512.png", //変更
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

先ほどコピーしたタグをheadタグ内に貼り付ける

Next.jsの場合はpages/_document.tsx (js) 内のHeadコンポーネント内に貼り付ける

この時、各タグに閉じタグ用の/ を追記すること
ここでもパスをルートに合わせて変更しておくこと

IE8以下とWindows8/10のスタート画面にピン留めした際の対応として2行追加する

必要なければ記述しなくてOK

▼最終コード例

import NextDocument, { Html, Head, Main, NextScript } from 'next/document';

export default class Document extends NextDocument {
  render() {
    return (
      <Html>
        <Head>
          <link rel="apple-touch-icon" sizes="180x180" href="**/favicons/**apple-touch-icon.png" **/**>
          <link rel="icon" type="image/png" sizes="32x32" href="**/favicons/**favicon-32x32.png" **/**>
          <link rel="icon" type="image/png" sizes="16x16" href="**/favicons/**favicon-16x16.png" **/**>
          <link rel="manifest" href="**/favicons/**site.webmanifest" **/**>
          <link rel="mask-icon" href="**/favicons/**safari-pinned-tab.svg" color="#000000" **/**>
          **<link rel="shortcut icon" href="/favicons/favicon.ico" />** //IE8以下にも対応したい場合
          <meta name="msapplication-TileColor" content="#ffffff" **/**>
          **<meta name="msapplication-config" content="/favicons/browserconfig.xml" />** //Windows8/10のスタート画面のピン留め画像に対応したい場合
          <meta name="theme-color" content="#ffffff" **/**>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

デプロイ