「Cocoonのファビコンってどこで変えるの？」と悩んでいる人は意外と多いですし、設定したつもりなのにタブや検索結果で前のまま表示されてしまい、モヤモヤしている人もいると思います。
この記事では、Cocoonでファビコンを設定する手順から、画像の作り方、反映されないときの確認ポイントまでまとめてお伝えします。
最初に結論を一言でまとめると、Cocoonのファビコンは「外観＞カスタマイズ＞サイト基本情報＞サイトアイコン」で画像を一つ登録して、ブラウザやキャッシュの確認をしてあげれば、基本的にはきちんと反映されます。
ブログ収益化の教科書プレゼント
↓ ↓ ↓
Cocoonのファビコンを整えると何が変わる？
まずは、Cocoonでファビコンを整えると何が変わるのかを整理しておきます。どこに表示されて、どんな役割を持っているのかを知っておくと、「とりあえず設定しておこう」ではなく、意味を理解した上で取り組めます。
Cocoonファビコンが表示される場所と役割
ファビコンは、小さいわりに出番が多いアイコンです。Cocoonで設定したファビコンがどこに出てくるのか、よく見る場所を表にまとめるとこんなイメージです。
| 表示される場所 | 見ている人 | 役割・意味 |
|---|---|---|
| ブラウザのタブ | 読者 | 大量にタブを開いているときに、自分のサイトを一瞬で見分ける目印 |
| ブックマーク一覧 | 読者 | 後から読み返すときに、自分のブログを見つけやすくするラベル |
| スマホのホーム画面 | 読者 | サイトをホーム画面に追加したときに表示されるアイコン |
| 検索結果のタイトル左 | 読者 | 他サイトと並んだときに、ブランドや雰囲気を一目で伝える小さな看板 |
タブを10個も20個も開いているときに、小さなアイコンがあるサイトと、地球マークのままのサイトを比べると、どちらが印象に残るかは想像しやすいと思います。ファビコンは、あなたのブログを読者の記憶に残すための「小さいけれど大事な看板」だと考えてもらえると分かりやすいです。
ファビコンを設定しないデメリット
Cocoonを入れた直後の状態だと、多くのブログが似たような見た目のアイコンになりがちです。そのままにしておくと、次のようなデメリットが出てきます。
- タブを見ても、どのブログかパッと判別しづらい
- ブックマークや履歴に埋もれてしまい、再訪してもらいにくい
- 細かい部分まで気を配っていない印象になり、信頼感が少し下がることもある
ファビコンだけで検索順位が大きく上がることはほとんどありませんが、クリックされたり、何度も訪問してもらえたりといった「読者の行動」には、じわじわ効いてきます。Cocoonでブログ運営をしていくなら、早めに整えておきたいポイントの一つです。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
Cocoonファビコン設定前に知っておきたい基礎知識
ここからは、実際にCocoonのファビコンを設定する前に知っておきたい基本情報をまとめます。最初にここを押さえておくと「作り直し」や「やり直し」が減るので、少しだけ付き合ってください。
おすすめの画像サイズと形式
Cocoonのファビコンは、WordPressの「サイトアイコン」という機能に乗せて表示されます。そのため、Cocoon独自の特別なサイズではなく、WordPressが扱いやすい画像を用意しておくのがポイントです。
| 項目 | 推奨値 | 理由 |
|---|---|---|
| 画像サイズ | 512×512px | WordPressがこの画像から複数サイズを自動生成してくれるため、細かく気にしなくてよい |
| 画像の形 | 正方形 | タブや検索結果では正方形で切り取られることが多く、崩れにくい |
| 画像形式 | PNG | 背景透過ができて、ブラウザとの相性も良く、扱いやすい |
| 色の数 | 1〜3色程度 | 色が多すぎると小さい表示で潰れやすく、ぼんやりした印象になりやすい |
昔は自分で「.ico」ファイルを作る必要がありましたが、今のWordPress＋Cocoonの環境では、512×512pxのPNG画像を1枚用意しておけば十分です。あとからヘッダーやロゴに使うことも考えると、少し大きめかつシンプルなデザインで作っておくと使い回しがしやすくなります。
失敗しないファビコンデザインのコツ
ファビコンは、とにかく表示サイズが小さいのが特徴です。私も最初はあれもこれもと詰め込みすぎて、ブラウザのタブで見たら「ただの色の四角」にしか見えませんでした。そんな失敗を避けるために、次の点を意識してみてください。
- 文字は入れてもアルファベット1〜2文字までにする
- 線は太め、パーツは少なめにして、シルエットが分かるようにする
- 背景と文字（絵）の色のコントラストを強くする
- ブログ全体で使っているテーマカラーをどこかに入れる
作った画像は、パソコンだけでなくスマホでも確認するのがおすすめです。「一瞬見ただけで自分のサイトだと分かるか？」を基準に、色や形を少しずつ調整してみてください。
Cocoonでファビコンを設定する具体的な手順
基礎知識が分かったところで、ここからは実際にCocoonでファビコンを設定していきます。作業は、WordPressのカスタマイザーから進める形になりますが、流れ自体はとてもシンプルです。
WordPressカスタマイザーからCocoonファビコンを設定する
Cocoonのファビコンは、Cocoon設定の画面ではなく、WordPressの「外観＞カスタマイズ」から設定します。全体の流れを一覧すると次のようになります。
| 手順 | やること | 画面上の場所 |
|---|---|---|
| 1 | WordPressの管理画面にログインする | ログインページ |
| 2 | 左メニューの「外観」をクリックする | 管理画面サイドバー |
| 3 | 「カスタマイズ」を選ぶ | 外観メニュー内 |
| 4 | 「サイト基本情報」を開く | カスタマイザーメニュー |
| 5 | 「サイトアイコン」で画像を選択する | サイト基本情報の下部あたり |
| 6 | 512×512pxの画像をアップロードして選択する | メディアライブラリ |
| 7 | 右上の「公開」ボタンを押す | カスタマイザー右上 |
すでに別の画像を登録している場合は、「画像を変更」ボタンから差し替えればOKです。設定したら、一度ブラウザでサイトを開き直し、タブの左側に新しいアイコンが表示されているか確認してみてください。
【ちょっと一息♪】 私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？
セキュリティプラグインやキャッシュに注意する
Cocoonでファビコンを変えたのに「前のアイコンが残ったまま」という場合、多くはキャッシュまわりが原因です。私もこれで何度かハマりました。次の順番で確認してみてください。
- ブラウザの履歴とキャッシュを削除してから、ページを再読み込みする
- キャッシュ系プラグインを入れているなら、一度キャッシュを削除してから確認する
- サーバーパネルに「キャッシュクリア」機能があれば、実行してから再度アクセスする
これらを試してもタブのアイコンが変わらない場合は、あとで紹介するチェックリストの流れで、もう少し細かく原因を探っていきましょう。
Cocoonファビコン画像を作る3つの方法
続いて、Cocoonのファビコンに使う画像をどう用意するかを整理します。デザインが得意な人は少数派だと思うので、ここでは「簡単さ」と「時間がかからないこと」を重視して3パターンに絞りました。
自分で作る・配布素材を使う・外注するの3パターン
ざっくりまとめると、Cocoon用のファビコン画像の用意の仕方は次の3つです。
| 作り方 | 向いている人 | メリット | デメリット |
|---|---|---|---|
| Canvaなどで自作 | 少し手を動かす時間が取れる人 | 無料から使えて、オリジナル感を出しやすい | 慣れるまで何度か作り直す可能性がある |
| フリーアイコン素材を使う | とにかく早く設定を終えたい人 | 数分でファビコンを用意できる | 他サイトとデザインがかぶる可能性がある |
| ココナラなどで外注 | ブランドイメージにこだわりたい人 | プロの目線でアイコンをデザインしてもらえる | 費用がかかり、やり取りにも少し時間が必要 |
最初の一歩としては、フリー素材や簡単な自作でも十分です。ブログの方向性が固まってきたタイミングで、改めてCocoonのファビコンを作り直す、という進め方でも問題ありません。
Canvaを使ってCocoonのファビコンを自作する
私が個人的に一番おすすめしているのが、Canvaを使ってCocoonのファビコンを自作する方法です。デザインソフトが使えなくても、次の流れでサクッと作れます。
- Canvaで「デザインを作成」から正方形のキャンバスを選ぶ
- カスタムサイズで512×512pxに設定する
- シンプルなアイコンや文字を1〜2点だけ配置する
- 背景色と文字・アイコンの色のコントラストをはっきりさせる
- PNG形式（背景透過）でダウンロードする
最初からゼロで作るのが難しければ、テンプレートを読み込んで、色だけ自分のブログカラーに変えるのがおすすめです。Cocoonのファビコンだけでなく、ロゴやアイキャッチにもその色を使っていくと、だんだん統一感が出てきます。
フリー素材や外注を使うときの注意点
【稼げるキーワード教えます】
▼ ▼ ▼
フリー素材サイトや外注サービスを使ってCocoonのファビコンを用意するときには、次の点を事前に確認しておきましょう。
- 商用利用が許可されている素材かどうかを必ずチェックする
- クレジット表記が必要な場合は、フッターやプロフィール欄などに記載する
- 外注する場合は「正方形アイコン」「512×512px」「背景透過PNG」の3点を伝える
- ブログのテーマカラーや雰囲気が分かる参考画像を一緒に渡しておく
このあたりを曖昧にしたまま進めると、「なんとなくイメージと違う…」という結果になりがちです。Cocoonのファビコンは小さなパーツですが、サイト全体の印象にも関わってくるので、ここだけは押さえておくと安心です。
★ちょっとだけ宣伝させてください★ 「ブログで10万」と聞くと、 と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。
Cocoonファビコンが反映されないときのチェックリスト
次に、Cocoonでファビコンを設定したのに「なぜか変わらない」ときの確認ポイントをまとめます。タブや検索結果で旧アイコンがしつこく表示され続けるのは、ブログ初心者のあるあるなので、順番に潰していきましょう。
まず確認したい5つのポイント
原因を一つずつ切り分けるために、チェックリストを用意しました。上から順番に見ていけば、どこでつまずいているかが絞りやすくなります。
| チェック項目 | 具体的な確認方法 |
|---|---|
| 1. サイトアイコンが正しく変更されているか | 「外観＞カスタマイズ＞サイト基本情報」で新しい画像になっているかを目視で確認する |
| 2. 画像サイズと形式が適切か | 512×512pxの正方形PNGになっているか、画像編集ソフトやメディア詳細画面で確認する |
| 3. ブラウザキャッシュが残っていないか | キャッシュを削除するか、シークレットウィンドウでサイトを開いてみる |
| 4. キャッシュプラグインの影響がないか | 利用中のキャッシュプラグインのキャッシュ削除ボタンを押してから再表示する |
| 5. サーバー側のキャッシュが効いていないか | サーバー管理画面でキャッシュクリア機能があれば実行し、その後に確認する |
この5つを試してもCocoonのファビコンが変わらない場合は、自分のパソコンだけ古い情報を握っていることもあります。別のブラウザや、スマホなど他の端末から同じページを開いてみて、本当に変わっていないのかを確認してみてください。
検索結果にCocoonのファビコンが出ないとき
タブのアイコンは新しくなっているのに、検索結果の小さなアイコンだけ前のまま、というケースも多いです。これは、検索エンジン側の更新タイミングの問題も関わってきます。
- トップページやサイトマップのURLが正しく認識されているか確認する
- インデックス登録のリクエストを送り、しばらく様子を見る
- ファビコン画像のURLへ普通にアクセスできるか（404などになっていないか）試してみる
- あれこれいじりすぎず、ファビコンを頻繁に変更しないようにする
設定に問題がないのであれば、あとはゆっくり反映されるのを待つしかない場面もあります。焦って何度も差し替えると、かえって状況が分かりづらくなるので、「設定を整理してから、落ち着いて待つ」という姿勢も大切です。
Cocoonファビコンとサイト全体のブランドづくり
ここからは、単にCocoonでファビコンを設定するだけでなく、「自分のブログのブランド」としてどう活かすかという視点でお話しします。せっかく作るなら、長く使えるアイコンにしておきたいところです。
ブログの世界観とファビコンを揃える
ファビコンは小さなアイコンですが、サイトロゴやヘッダー画像、アイキャッチなどと世界観が揃っていると、読者の記憶に残りやすくなります。ほんの少し意識するだけで、全体の印象がぐっと整います。
- ブログのテーマカラーとファビコンの色を合わせる
- ロゴに使っているモチーフの一部を切り出してファビコンにする
- アイキャッチでよく使うフォントや記号を、ファビコンにも反映してみる
私も、ヘッダーのロゴと似たデザインにCocoonのファビコンを作り直したところ、「このアイコンを見たらあなたのブログだと分かる」と言われることが増えました。小さな工夫ですが、積み重ねると大きな差になっていきます。
テーマを変えても使えるファビコンにしておく
将来的にCocoonから別のテーマに乗り換える可能性があるなら、どのテーマでも違和感なく使えるファビコンを意識しておくと便利です。
- 「Cocoonらしさ」より「自分のブログらしさ」を優先してデザインする
- テーマ固有の設定ではなく、WordPressのサイトアイコンとして登録しておく
- 背景透過のPNGで作っておき、ヘッダーの色が変わってもなじむようにしておく
こうしておくと、テーマを変更したときも、Cocoon用に作ったファビコンをそのまま次のテーマで活かしやすくなります。ブログ全体のイメージを長く育てていくためにも、少し先を見据えて作っておくと安心です。
★ブログでは公開できない裏情報★ 例えば、 などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。
私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。
よくある質問｜CocoonのファビコンQ&A
最後に、Cocoonのファビコンに関してよく聞かれる質問を、Q&A形式でまとめました。今の悩みに近いものがあれば、参考にしてみてください。
Q1. Cocoonでファビコンを変えたのに、スマホだけ前のままです
A. スマホのブラウザやホーム画面のアイコンは、パソコンとは別にキャッシュを持っていることがあります。Cocoonでファビコンを変えたあとに、次のことを試してみてください。
- スマホのブラウザアプリの履歴とキャッシュを削除する
- ホーム画面に追加しているショートカットがあれば、一度削除してから作り直す
- 別のブラウザアプリで同じサイトを開き、新しいアイコンになっているか確認する
これでCocoonの新しいファビコンが表示されるケースが多いので、まずはここからチェックしてみてください。
Q2. ファビコンの画像サイズは512×512px以外でも大丈夫ですか？
A. まったく受け付けないわけではありませんが、Cocoonでファビコンを安定して表示させたいなら、512×512pxの正方形PNGを用意しておくのが一番無難です。このサイズで作っておけば、WordPress側で必要なサイズに自動で調整してくれるので、細かいことを気にせずに済みます。
Q3. とりあえずフリー素材でCocoonのファビコンを設定してもいいですか？
A. もちろん大丈夫です。何も設定しないよりは、フリー素材でもCocoonのファビコンを付けておいた方が、読者から見た印象はずっと良くなります。ただし、商用利用が許可されているかどうかだけは必ず確認してください。ブログが育ってきたタイミングで、オリジナルのファビコンに差し替えていくのもおすすめです。
まとめ｜Cocoonのファビコンを整えてブログの「顔」をつくろう
この記事の内容を整理します
- Cocoonのファビコンは「外観＞カスタマイズ＞サイト基本情報＞サイトアイコン」から設定できる
- 512×512pxの正方形PNGを用意しておけば、いろいろな表示に対応しやすい
- デザインはシンプルに、色は少なめにし、ブログ全体の世界観に合わせると覚えてもらいやすい
- ファビコンが反映されないときは、サイトアイコン設定・画像サイズ・ブラウザやキャッシュ・検索結果のタイミングの順で確認する
- テーマを変えても使えるように、自分のブログのブランドを意識したCocoonのファビコンを作っておくと長く活躍してくれる
今日からできる最初の一歩は、「512×512pxの正方形アイコンを1枚準備して、Cocoonのサイトアイコンに登録してみること」です。完璧なデザインでなくてもかまいません。一度設定してみて、タブやスマホでどんな見え方になるかを確かめてみてください。そこから少しずつ調整していけば、きっと「あ、これがうちのブログの顔だな」と思えるCocoonファビコンに育っていきます。
★ちょっとブレイク★ 「あと3ヶ月早くこの情報を知りたかった…」 そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。 無料で読めるうちに受け取っておいてください。
記事を読んだらコチラ
▼ ▼ ▼
