ファビコンの作成方法を解説【1分で作れてお洒落なアイコン】

ファビコンの作成方法を解説【1分で作れてお洒落なアイコン】
ファビコンの作成方法が知りたい!!
favicon(ファビコン)を作成する事でユーザーが複数のタブを開いた時に自分のサイトの位置を分かりやすくしてくれます。タブのみではなくお気に入りに登録した時もアイコンとして表示されるのでファビコンは必ず登録しておきましょう。
この記事では難しそうなファビコンの作成を1分でお洒落に作り上げる方法を解説しています。

favicon(ファビコン)とは

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 は頻繁に変更しないでください)。
  • わいせつな表現やヘイト表現に関連するシンボル(例: かぎ十字章)などの不適切なファビコンは表示されません。該当する表現がファビコン内で見つかった場合は、デフォルトのアイコンに置き換えられます。

引用:Search Consoleヘルプ

ポイントを要約すると

  1. googleがクロールできるようになっている事
  2. 16×16pxまでサイズを縮めてもそのアイコンが一目で理解できる事
  3. 48pxの倍数のサイズで作られている事
  4. ファビコンのURLは頻繁には変えない事
  5. 猥褻やヘイト表現(不愉快になる人がいる)は使わない事

また、SVG ファイルはサイズの指定は有りませんと記述されていますが、拡張子が(.ico)の場合でも大丈夫です。icoは様々のサイズを一つの拡張子にまとめられている為です。

以上がファビコン作成をする前に知っておきたい知識となります。

ファビコンのデザインを決めよう

ファビコンのデザインを決めるうえで重要な事は16×16pxの小さいサイズで見ても貴方のサイトである事が一目で理解できるアイコンにしないといけない事です。

プロのデザイナーにサイトのロゴを作成してもらえるならそれを使用するのも有りですが、個人で作成するならサイトの頭文字1文字か2文字で作る事をおすすめします。当サイトなら名前が「In-Output」ですので、「I」の一文字か「IO」の2文字ですね。

まずはcool textというサイトでお気に入りのフォントを見つけて2文字打ち込んでみましょう。cool textなら下の画像のようなデザインがいくつも用意されています。

→おすすめサイト:cool text

cooltext

cool textで「IO」の2文字のロゴを作成しました

作成した画像

このままだと正方形にはなっていませんし、サイズや拡張子等もgoogleのファビコンのガイドラインに沿っていません。そこでFavicon ジェネレーターを使用して「.ico」拡張子に変更しましょう

→おすすめサイト:Favicon ジェネレーター

こちらのサイトで画像を選択して、サイズを指定するだけで自動的にアイコンに変換されます。注意点として、作成するサイズには「16」と「48」は必ず含めておきましょう。後はお任せではあるのですが、個人的に「32」と「256」を使用しています

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

ジェネレーターで作成された画像はこのように正方形になっています。

ファビコン

あとはこれを16pxで見たときにどのように表示されるかです。

ファビコンこれが16pxのサイズです

IOと認識できますし、スタイリッシュでお洒落ですね!(管理人の個人的な意見ですが)

まとめ

この記事ではファビコンの作り方を解説しました。実際に作成してみると1分もかからずにファビコンが作れるかと思います。簡単に作れるからと言ってころころとファビコンを作り直すことはおすすめしません。ガイドラインにも書いてましたね。

これ!と決めたものを末永く使っていきましょう。

>プログラミング情報サイト「In-Output」

プログラミング情報サイト「In-Output」

当サイトではプログラミング言語の情報を発信しています。
HTMLやCSSのマークアップ言語の学習方法や解説、WordPressでのサイト開設方法、python等のプログラミング言語を使用して日頃の作業の効率化等、皆様のお役に立てるサイトを目指しています。

CTR IMG