LeeDDHH/next_js_favicon_setting.md

## next_js_favicon_setting.md

      
    Raw
  

              next_js_favicon_setting.md
            
          
    前提


以下の環境で動作確認


node.js
16.17.0


npm
8.15.0


next
12.3.1


react
18.2.0


typescript
4.8.3


Favicon用の画像を用意する

Faviconジェネレーターサイトに画像を上げる


以下のサイトにアクセスする

Favicon Generator for perfect icons on all browsers


「Select your Favicon image」からFavicon用の画像を上げる


ブラウザでの表示を確認する


必要であれば、背景色や余白の設定をする
問題なければ、下部の「Generate your Favicons and HTML code」を押す


プロジェクトにFaviconファイルを配置する


「Favicon package」を押してFaviconファイル一式をダウンロードする


ファイル一式を解凍し、 public/favicons にまとめて配置する


ファイルの修正をする


以下のファイルを修正する

browserconfig.xml
  <?xml version="1.0" encoding="utf-8"?>
    <browserconfig>
      <msapplication>
        <tile>
          <square150x150logo src="/favicons/mstile-150x150.png"/> // /favicons配下になるように修正
          <TileColor>#da532c</TileColor>
        </tile>
      </msapplication>
    </browserconfig>

site.webmanifest
  {
    "name": "",
    "short_name": "",
    "icons": [
      {
        "src": "/favicons/android-chrome-192x192.png", // /favicons配下になるように修正
        "sizes": "192x192",
        "type": "image/png"
      },
      {
        "src": "/favicons/android-chrome-256x256.png", // /favicons配下になるように修正
        "sizes": "256x256",
        "type": "image/png"
      }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
  }


_document.tsx を修正する


以下のコードを _document.tsx の Head 内にコピーする

その他の設定も含めて以下のように設定する

_document.tsx
︙
<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="#5bbad5" />
  <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のスタート画面のピン留め画像に対応したい場合
︙
</Head>
︙