favicon（ファビコン）とは
そもそもファビコンとはFavorite（お気に入り）icon（アイコン）の略でinternetExplore5より導入されました。
ブラウザのタブに表示されるのは勿論、スマホでホーム画面に登録した時にも表示されます。スマホでgoogle検索を利用した時に表示されるようになっていますので、お洒落でかっこいいファビコンを作りたいですね。
ファビコン作成前に知っておきたい知識
ファビコンを作成する前に意外に知られていない本当に正しいファビコン作成のルールを解説します。
既にファビコンを作られている方もこのルールに当てはまっていないなら作り直すことをおすすめします。
実はファビコンに関する明確なガイドラインはSearch Consoleヘルプに記載されています。
- Google がファビコンのファイルとホームページをクロールできること（Google をブロックしないこと）。
- ファビコンがウェブサイトのブランドを視覚的に表したものとなっており、ユーザーが検索結果を見た際に一目でサイトを見分けられるようになっていること。
- ファビコンのサイズが 48 ピクセルの倍数になっていること（例: 48 x 48 ピクセル、96 x 96 ピクセル、144 x 144 ピクセルなど）。SVG ファイルの場合は、サイズに関して特別な指定はありません。有効なファビコン形式は、すべてサポートされています。Google では画像サイズを 16 x 16 ピクセルに変換するため、その解像度で適切に表示されるか、あらかじめご確認ください。16 × 16 ピクセルのファビコンは指定しないでください。
- ファビコンの URL は固定されている必要があります（URL は頻繁に変更しないでください）。
- わいせつな表現やヘイト表現に関連するシンボル（例: かぎ十字章）などの不適切なファビコンは表示されません。該当する表現がファビコン内で見つかった場合は、デフォルトのアイコンに置き換えられます。
ポイントを要約すると
- googleがクロールできるようになっている事
- 16×16pxまでサイズを縮めてもそのアイコンが一目で理解できる事
- 48pxの倍数のサイズで作られている事
- ファビコンのURLは頻繁には変えない事
- 猥褻やヘイト表現（不愉快になる人がいる）は使わない事
また、SVG ファイルはサイズの指定は有りませんと記述されていますが、拡張子が(.ico)の場合でも大丈夫です。icoは様々のサイズを一つの拡張子にまとめられている為です。
以上がファビコン作成をする前に知っておきたい知識となります。
ファビコンのデザインを決めよう
ファビコンのデザインを決めるうえで重要な事は16×16pxの小さいサイズで見ても貴方のサイトである事が一目で理解できるアイコンにしないといけない事です。
プロのデザイナーにサイトのロゴを作成してもらえるならそれを使用するのも有りですが、個人で作成するならサイトの頭文字1文字か2文字で作る事をおすすめします。当サイトなら名前が「In-Output」ですので、「I」の一文字か「IO」の2文字ですね。
まずはcool textというサイトでお気に入りのフォントを見つけて2文字打ち込んでみましょう。cool textなら下の画像のようなデザインがいくつも用意されています。
→おすすめサイト：cool text
cool textで「IO」の2文字のロゴを作成しました。
このままだと正方形にはなっていませんし、サイズや拡張子等もgoogleのファビコンのガイドラインに沿っていません。そこでFavicon ジェネレーターを使用して「.ico」拡張子に変更しましょう。
→おすすめサイト：Favicon ジェネレーター
こちらのサイトで画像を選択して、サイズを指定するだけで自動的にアイコンに変換されます。注意点として、作成するサイズには「16」と「48」は必ず含めておきましょう。後はお任せではあるのですが、個人的に「32」と「256」を使用しています。
ジェネレーターで作成された画像はこのように正方形になっています。
あとはこれを16pxで見たときにどのように表示されるかです。
IOと認識できますし、スタイリッシュでお洒落ですね！（管理人の個人的な意見ですが）
まとめ
この記事ではファビコンの作り方を解説しました。実際に作成してみると1分もかからずにファビコンが作れるかと思います。簡単に作れるからと言ってころころとファビコンを作り直すことはおすすめしません。ガイドラインにも書いてましたね。
これ！と決めたものを末永く使っていきましょう。
