Favicon（ファビコン）を作ろう
私はジェネレーター使う派。
260ピクセル以上の正四角形の画像を用意。保存形式は「PNG、JPG、SVG」がおススメ。
ということで、イラストレーターで作ろうかな。
完成したら普通に「.ai」で保存するのはもちろん、今回は「.svg」で保存したものを使ってみる。
ファビコンジェネレーター(https://realfavicongenerator.net/) に行きます。
アップロードするときは、英語のままのほうがいいと思います。
内容の確認などは、翻訳をしてみたらいいと思います。
アップロードした画像がファビコンとして表示される。ここで見て「ちょっと違うな」と思ったら、イラストレーターの画像を調節してから、またアップロードしなおしましょう。
ファビコンの確認をして、良ければ「次→」
ファビコンのダウンロードをします。コードは使うので画面はまだ開いておきます。
ダウンロードした「favicon.zip」を 右クリック → 全て展開… で解凍。
解凍した「favicon」フォルダを、自分のサイトのフォルダに移動させる。
次は、自分のHTMLファイルにコードをコピペ。自分のHTMLはVSコードで開いておこう。
<head>から</head>の間に入れます。<header>と間違いやすいので気を付けましょう。
コードそのままだとファイルパスが違っているので、自分のサイトに合うようにファイルパスを修正。
参考として、コード貼っておきます。
<!-- ファビコン -->
<link rel="icon" type="image/png" href="favicon/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="favicon/favicon.svg" />
<link rel="shortcut icon" href="favicon/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png" />
<meta name="apple-mobile-web-app-title" content="MyWebSite" />
<link rel="manifest" href="favicon/site.webmanifest" />
