Favicon（ファビコン）を作ろう

画像を用意

ファビコン用の画像　タテ260px　ヨコ260px　を用意します。
保存形式は「PNG、JPG、SVG」のどれかにします。

今回はSVGにしてみました。

ファビコンジェネレーター

ファビコンジェネレーターにいきます。 https://realfavicongenerator.net/

ファビコン用の画像をアップロードします

↓翻訳版

各種設定を好みでします:iOS用

↓翻訳版

各種設定：Android Chrome

↓翻訳版

各種設定：Windows

↓翻訳版

ここは飛ばす

↓翻訳版

各種設定：macOS Safari

↓翻訳版

ファビコンジェネレーターオプション

↓翻訳版

コードをコピー

「Faviconパッケージ」をダウンロードし、コードをコピーします
（「4.」はさわらなくてOKです。）

↓翻訳版

HTMLの＜head＞の中にコードをコピペしますが、パスが変更になるので注意

コピペの時にコードをこのようにコードを修正します。「href="/apple-touch-icon.png"」→「href="自分のサイトの画像フォルダ/favicon/apple-touch-icon.png"」

例「href="/apple-touch-icon.png"」→「href="img/favicon/apple-touch-icon.png"」

↓参考までに、こちがら今回の設定で吐き出されたコード（※このまま使わないで下さい）

ダウンロードしたデータを解凍し名前を変更

ダウンロードしたデータを解凍し名前を変更します

そのデータを自分のサイトの画像フォルダの中に入れます