簡単5分！Cocoonのサイトアイコン（ファビコン）の作り方と設定方法

WordPressテーマ「Cocoon」愛用中のみなさん、サイトアイコン（ファビコン）の設定はお済みでしょうか？

この記事では、サイトアイコン（ファビコン）の作り方とCocoonでの設定方法をご紹介します。

初心者の私でも簡単5分で作ることができました！

サイトアイコン(ファビコン)設定のメリットは？

ブログのサイトアイコンをオリジナルに変えるメリットはこちら。

特に、2番目の「スマホのGoogle検索結果の中で目立つ」ことは、ユーザーのクリック率（検索流入）に大きく関わってきます。

サイトアイコン(ファビコン)の作成方法

ファビコンを作成する方法は、大きく２つあります。

お好きな方を選択ください。

①フリー素材サイトからダウンロードする方法

フリーのアイコン素材サイトからダウンロードする方法です。

ヘッダーロゴの素材でもお世話になっている、『icon-rainbow』さんでのダウンロード方法をご紹介します。

その他おすすめのフリー素材サイトさん

WordPressのサイトアイコンは、サイズ512×512px以上のpng形式が推奨されています。
サイズや形式に注意してダウンロードしましょう。

②オンラインツール「Canva」で自作する方法

次は、無料のオンラインデザインツール「Canva」（※一部機能は有料）を使ってオリジナルのファビコンを作る方法を紹介します。

Canvaのホーム右上の「デザインを作成」⇒「カスタムサイズ」で画像サイズを指定します。

ファビコンのサイズは、512×512px以上の正方形サイズにしましょう。

ファビコンのデザインは、下記のようなものが多いです。

1. アイコン素材をつかったもの
2. サイトタイトルの一字を大きくしたもの

例①

※先ほど紹介した『icon-rainbow』さんからアイコン素材をお借りしました。

例②

ファビコンはかなり小さいサイズ（16×16px 等）で表示されるので、複雑なデザインは避けるようにしましょう。

完成したら、Canva画面右上の「ダウンロード」ボタンから「png」形式で画像データを保存します。

Cocoonでのサイトアイコン（ファビコン）設定方法

「外観」⇒「カスタマイズ」⇒「サイト基本情報」⇒「サイトアイコン」で設定できます。

サイトアイコンの設定方法は、「Cocoon」公式サイトがとっても分かりやすかったです。

こちらを参考にすれば、すぐに設定完了です！

アイコンの反映には時間がかかります。
特に、スマホのお気に入りリストやスマホ検索結果への反映には数日掛かりました。
また、キャッシュが残っていると変更前のアイコンが表示されることもあります。

まとめ：Cocoonならファビコン設定は簡単！気軽にトライ！

テーマ「Cocoon」なら本当に簡単にサイトアイコンの設定ができちゃいます！

無料アイコンをそのまま登録すれば5分でOＫです。

ファビコンを設定するだけでも、スマホ検索画面で目立つので立派なSEO対策です。

簡単に設定できるので、はやめに設定しちゃいましょう。

---

「ブログ運営」に関するオススメ記事