医療事務の資格をとるならコチラ!最新キャンペーン情報

簡単5分!Cocoonのサイトアイコン(ファビコン)の作り方と設定方法

  • URLをコピーしました!

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

「ファビコン」とは

ブラウザのページタブやお気に入りリスト、ブログカード等のサイト名左側に表示されるアイコンのこと。

Cocoonテーマで未設定の場合は、初期設定の白い繭のアイコンです。

ファビコンの参考写真
赤丸で囲われているのがファビコン(favicon)です
みなみ

5分で設定できるのにメリットたくさん…!
初期設定のままではもったいない!

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

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

2021年11月追記

このブログは、ブログ10ヶ月目に「Cocoon」からへと移行しています。
>> SWELLへ移行した理由は?移行時間は?

目次

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

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

  • ページタブの中で目立つ
  • スマホのGoogle検索結果の中で目立つ
  • 一度訪問したユーザーに覚えてもらいやすい

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

スマホ検索画面でのファビコン表示例
スマホだと検索画面でファビコンが表示されます
みなみ

簡単に設定できて、メリットたくさん…!
はやめに設定しておきましょう♪

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

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

  • フリー素材サイトからダウンロードする
    (5分でOK!)
  • オンラインツール「Canva」で自作する
    (10分でOK!)

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

みなみ

私はもともと「フリー素材サイト」のアイコンをそのまま使用していたのですが、この記事作成を機に自作アイコンに変更しました!

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

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

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

アイコンダウンロード方法
  1. お好きなアイコンを探す
  2. 「size」:512pxを指定
  3. 「color」:お好きな色を選択
    ※16進数のカラーコード(#000000)での指定もできます
  4. 「Download file」:「PNG」形式を指定
  5. ダウンロードする
フリー素材サイトからダウンロードする方法
icon-rainbowさんの素材ダウンロード方法
みなみ

お好きなアイコンとカラーを選ぶだけ!
ダウンロードデータをそのままサイトアイコンに設定すればOKです。

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

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

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

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

みなみ

私のファビコンやトップページのロゴ、アイキャッチ画像等はすべてこのCanvaで作成しています!

「Canva」とは
  • Webブラウザ上で使えるグラフィックデザインツール
    • インストールの必要なし!
    • PCでもスマホでも作業OK!
  • 豊富なデザインテンプレートと素材あり
  • 無料登録ですぐに使える(無料版・Pro版あり)
    • 無料版でもめちゃめちゃ有能
    • Pro版だと素材&機能が使い放題
  • 30日間の無料お試し可能

今回のファビコン作成では、有料版CanvaProの「透過背景での保存機能」がとっても便利です。
ぜひ最初の無料お試し期間を使って作成してみましょう。

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

Cocoonのファビコンサイズ

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

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

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

例①

アイコン無料素材をつかったもの

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

例②

サイトタイトルの一字を大きくしたもの

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

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

Canvaでは、有料のPro版であれば背景透過できます。
30日間の無料期間中にぜひ背景透過してみてください。

>>

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

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

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

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

みなみ

「Cocoon」は機能もマニュアルも充実しすぎていて、本当に無料でいいのか心配になります…!笑

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

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

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

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

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

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

この記事で紹介しているデザインツールはブログ運営で必須のツールです…!

最初の30日間はPro版を無料トライアルできます。

無料版でも機能十分ですが・・・

  • 背景透過保存機能
  • 素材の種類がたくさん
  • フォントの種類がたくさん

CanvaPro版はサイトアイコンロゴ作成にピッタリです。

みなみ

ぜひトライアル期間を上手く生かして作成してみてください♪

2021年11月追記

このブログは、ブログ10ヶ月目に「Cocoon」からへと移行しています。


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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
トップへ
目次
閉じる