Favicon HTMLに適用

1.設計されたバビコン(svg)を生成または導入する。

2.Real Favicon GeneratorのWebサイトにアクセスします。

https://realfavicongenerator.net/

3.Real Favicon GeneratorのWebサイトにログインします。

Select your Favicon imageボタンをクリックし、SVG形式のお気に入りアイコンをアップロードします.

4.次のページが生成されます。

Favicon packcageボタンをクリックしてパッケージをダウンロードし、プロジェクトのルートディレクトリに入れます.
その後、ラベルにlinkおよびmetaのラベルを加える.

<!--! Favicon  -->
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    <link rel="manifest" href="/site.webmanifest" />
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#3da5f5" />
    <meta name="msapplication-TileColor" content="#da532c" />
    <meta name="theme-color" content="#ffffff" />

CRAからFaviconを適用

それをパブリックフォルダのルートディレクトリに入れ、バビコンを適用しました.