Webサイト（ブログ）には、Webサイトに設定できるサイトアイコン（ファビコン）というものがあります。
サイトアイコンを設定しておくと、Googleの検索で表示され記事の中から、そのサイトの記事だということが簡単に識別できます。
でも、サイトアイコンの設定は必須ではありません。（SEOにも影響しないです）
サイトアイコンの作成・設定の時間がなかったり、必要なさそうと判断した場合は、この記事の内容をスキップしても構いません。
ただ、オリジナルのサイトアイコンを設定しておくと、Googleなどの検索結果にそのサイトアイコンが表示されて、同じCocoonを利用している他のサイトとの差別化ができるんです。
上記画像の一番最初の「還じいブログ」は僕が運営している姉妹サイトの記事ですが、「K」のサイトアイコンが表示されていることがわかります。（円形に切り取られてるのでわかりづらいですが）
ちなみに、無料テーマのCocoonでは、標準で「まゆ（繭＝Cocoon）」の形をしたサイトアイコンが表示されるようになっています。
Cocoonの利用者はかなり多いので、場合によっては検索結果画面がCocoonのサイトアイコンだらけになって、どのサイトも同じように見えて区別ができなくなるんですよね。
この記事では、ファビコン（サイトアイコン）を作成する方法と、WordPressに設定する方法を紹介します。
初心者の人でもわかりやすく書いているので、サイトアイコン設定の参考にしてください！
ちなみに、サイトアイコンとファビコン（favicon）はほとんど同義語なので、この記事でもファビコンと書いたり、サイトアイコンと書いたりしていますが、同じであることを
サイトアイコン（ファビコン）を作成する
WordPressのファビコンの画像サイズは、縦、横とも最低512ピクセル以上が推奨となっています。
なので、512ピクセルの正方形の画像（jpgやpngなど）を作成すればOKです。
用意する画像は512ピクセルですが、そのサイズで表示されることはほぼないです。
ざっくり確認したところ、Googleの検索結果画面では28ピクセルほどで、ブラウザのタブの表示ではもっと小さくて16ピクセルしかありません。
ファビコンの画像は凝ったものを作ってもよくわからなくなるので、できるだけシンプルなものにするのがポイントです。
ここでは、テキストからファビコンを作成する方法、絵文字からファビコンを作成する方法を中心に紹介します。
テキストからファビコンを作成する
まずは、テキストからファビコンを作成する方法です。
以下の「favicon.io」にアクセス。
The best Favicon Generator (completely free) – favicon.io
真ん中の「TEXT→ICO」をクリック。
「Generate From Text」内の赤枠部分を変更して、ファビコンを作成します。
上のプレビュー画面でリアルタイムにファビコンが確認でき、最後に「DownLoad」ボタンを押せば、ファビコンの複数画像が圧縮されたファイルがダウンロードされます。
テキストは日本語も使えます。
また、2文字以上でも入力できますが、文字がはみ出ないようにフォントのサイズを小さくしてください。
Background（背景の形）は、それぞれ以下のようになります。
注意点
Googleの検索結果画面のサイトアイコンは丸く切り取られるため、Background（背景の形）を「円形」に変更して、文字がはみ出ない事を確認しながらファビコンを作成してください。
作成したファビコンをダウンロードする
ファビコンができたら、画像をダウンロードします。
Background（背景の形）はCircle（円形）以外を選択して、「Download」をクリックして任意のフォルダに保存してください。
Circle（円形）を選択すると、円形のファビコンになるので注意！
（円形でよければCircleでも構いません）
保存さいた圧縮ファイルを解凍してください。
512×512という名前の画像ファイルが、ファビコンとして設定する画像になります。
絵文字からファビコンを作成する
絵文字からファビコンを作成する方法です。
「favicon.io」の画面で、右の「絵文字→ICO」をクリック。
絵文字の名前をクリック。
「Download」をクリックすれば、ファビコンの圧縮ファイルがダウンロードできます。
圧縮ファイル内の512×512という名前の画像ファイルが、ファビコンとして設定する画像になります。
サイトアイコン（ファビコン）を設定する
ファビコンが用意できたので、WordPressに設定します。
WordPress管理メニューの「設定」→「一般」とクリック。
「サイトアイコンを選択」をクリック。
ファビコンの画像をドラッグ＆ドロップします。
ファビコンにチェックがついていることを確認して、右下の「サイトアイコンとして設定」をクリック。
「変更を保存」をクリック。
そのまま、ブラウザのタブにファビコンが表示されます。
カスタマイザーからもファビコンは設定できる
実は、「外観」→「カスタマイズ」からも、ファビコンは設定できます。
WordPress管理メニューの「外観」→「カスタマイズ」とクリック。
「サイト基本情報」をクリック。
「サイトアイコンを選択」をクリックして、先に解説した方法と同じようにファビコンをアップロードしてください。
最後に、「公開」をクリックすれば、カスタマイザーでのファビコンの設定が完了です。
まとめ
ここまで、サイトアイコン（ファビコン）の作成と設定の方法を紹介しました。
冒頭でも書いたように、サイトアイコンは必須ではありません。
ですが、他のサイトとの差別化や簡単に識別されるようになるので、できればサイトアイコンの設定はした方がいいでしょう。
コメント