Faviconを切り分ける

最終更新: 2022年02月03日

報告

Faviconを切り分ける理由

ローカルサーバーと本番のURLを同時に開いていると混乱することがあります。いくら編集しても反映されず、気が付いたら本番のURLを見ていた。という経験はほとんどの開発者が経験することです。

ローカルサーバーの場合Faviconをわかりやすいものに変えることで解決します。

実装

以下の例ではローカルサーバーの場合に工事マーク🚧 にすることでタブで見分けがつくようにしています。

pages/_document.tsx
import Document, { Head, Html, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html lang="ja">
        <Head>
          {/* 追加 */}
          {process.env.NODE_ENV === 'development' ? (
            <link rel="icon" type="image/svg+xml" href="/favicon-dev.svg" />
          ) : (
            <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
          )}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Safari は現在 SVG Favicon に対応していません。

FaviconはSVGにして絵文字を使っています。

public/favicon-dev.svg
<svg xmlns="http://www.w3.org/2000/svg">
  <text y="32" font-size="32">🚧</text>
</svg>