ファビコンとは、Webブラウザでページを開いた際、タブ部分に表示されるアイコンを指します。
簡単に設置する場合 png１つで作成
アイコンを色々なブラウザに合わせて何個も作成するのが面倒な場合
48 x 48px のicon.pngを１つ作るだけでもOK
※ホーム画面でアイコンをきれいに見せたい場合は 192 x 192px で作成してください。
HTML head内 <head>～</head>
<link rel="icon" href="icon.png">
WEBアイコンは小さく表示されるので、シンプルなデザインにしましょう。
icooon-monoサイトを利用すると簡単です。
※PNGでダウンロードしましょう。
illutratorでの作り方・書き出し方法はこちらを参考(icon.pdf)
SVGファビコンを作った場合
一般的なウェブサイトでは、SVGでファビコンを作れば補助のアイコンを含めて3つで済みます。
あらゆるブラウザ向けにSVGを 1点
iOSのホーム画面用にPNGを1点（余白とか調整した画像・180x180px）
SVGが使えない環境（Safari等）のために .ico を1点。（32x32px）
※favicon.icoはフォルダーに入れておくだけ
HTML head内
<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
ファビコン(favicon)
ファビコンを作成してくれるサイト ➡ https://ao-system.net/favicon/