サイトアイコン（ファビコン）とは
サイトアイコン（ファビコン）とは、
**Webサイトを開いたときや読み込み中に表示される「小さなアイコン画像」**のことです。
WordPressでは「サイトアイコン」と呼ばれていますが、
一般的には「ファビコン（favicon）」という名前で知られています。
サイトアイコンが表示される場所
サイトアイコンは、主に次のような場所に表示されます。
- ブラウザのタブ（ページタイトルの左側）
- ブックマーク（お気に入り）に保存したとき
- スマホで「ホーム画面に追加」したときのアイコン
- サイト読み込み中・共有時の表示
今、サイトアイコンが未設定なので
デフォルトの地球マークで表示されています。
サイトアイコンは「サイトの顔」
サイトアイコンはサイズがとても小さいですが、
**サイトの第一印象を決める「顔」や「名札」**のような存在です。
- タブがたくさん開いているときでも見つけやすい
- ブックマーク一覧で、自分のサイトがひと目で分かる
- 「ちゃんと作られているサイト」という印象を与えられる
といった効果があります。
未設定でも問題はないけれど…
サイトアイコンを設定していなくても、
サイトが表示されなかったり、エラーになることはありません。
ただし、
- サイトを育てていきたい
- 記事数が増えてきた
- 少しずつ「整えていきたい」と感じている
そんなタイミングでは、
早めに設定しておくと安心できる項目のひとつです。
サイトアイコンは後から変更できる
サイトアイコンは、
一度設定したあとでも何度でも変更可能なので。
- まずは仮のアイコンを作る
- サイトの方向性が固まったら作り直す
でいいかなと思っています。
Canvaでサイトアイコンを作る具体手順
私は Canva（有料プラン） を使って、サイトアイコンを作成しています。
Canvaは操作が直感的で、画像サイズの指定や書き出しも簡単なので、
サイトアイコン作りにもとても向いています。
※ 基本的な考え方や注意点は、Canva無料プランでも共通です。
① Canvaで新しいデザインを作成する
Canvaにログインし、トップ画面から
「デザインを作成」→「カスタムサイズ」 を選びます。
サイズの指定
- 幅：512 px
- 高さ：512 px
- 正方形
WordPressのサイトアイコンは、
512×512pxの正方形画像 が推奨されています。
② シンプルなデザインを意識する（ここが一番大事）
サイトアイコンは、とても小さく表示されます。
そのため、デザインは 「引き算」 が基本です。
気をつけたいポイント
- 文字は 1文字〜短い単語まで
- 細かい装飾は入れない
- 色は 1〜2色程度
- 背景と文字のコントラストをはっきりさせる
たとえば、
- 頭文字（S など）
- シンプルなアイコン
- 単色＋ワンポイント
といったデザインが向いています。
③ 小さく表示されることを意識して確認する
デザインができたら、
画面を縮小表示して見え方を確認しておくのがおすすめです。
- 文字がつぶれていないか
- 何のアイコンか判別できるか
- 白背景・黒背景どちらでも見えるか
「少し物足りないかな？」くらいが、
実際に表示するとちょうどよく見えることが多いです。
④ 画像を書き出す
デザインができたら、右上の 「共有」→「ダウンロード」 をクリック。
書き出し設定の例
ファイル形式：PNG
背景透過：オン
サイズ：512 × 512 px
これで、サイトアイコン用の画像が完成です。
サイトアイコンは背景透過なしでも設定できますが、
ブラウザや背景色によっては白い枠が目立ってしまうことがありました。
今回は表示をすっきりさせるため、背景透過で作成しています。
サイトアイコンは「仮」でOK
サイトアイコンは、あとから何度でも変更できます。
- 最初は仮のデザインで設定
- サイトの雰囲気が固まったら作り直す
という進め方でも問題ありません。
私が作成したサイトアイコン（実例）
今回、Canvaを使って作成したサイトアイコンがこちらです。
ハンドメイドのサイト用にはやさしい印象のピンク、
「ゆっくりIT日記」用には落ち着いたブルーを使い、
サイトの内容が色でも伝わるように意識しました。
中央にはイニシャルの「S」を配置し、
ファビコンとして小さく表示されたときでも
ひと目で判別できることを重視しています。
周囲の装飾は細かく表示されなくても、
中央のイニシャルが認識できれば十分と考え、
シンプルさを優先しています。
背景は透過せず、
それぞれのサイトカラーをそのまま活かした形で書き出しました。
このあと、この画像を使って
WordPressにサイトアイコンを設定する手順を確認していきます。
サイトアイコンの設定方法（WordPress）
サイトアイコンは、WordPressの管理画面から
2つの方法で設定することができます。
どちらで設定しても、反映される内容は同じです。
ここでは、
- ① プレビューで確認しやすい方法
- ② 設定画面から直接行う方法
の両方を記録しておきます。
方法① 外観 → カスタマイズ から設定する（おすすめ）
初心者さんや、見た目を確認しながら設定したい場合は、
こちらの方法が分かりやすくおすすめです。
手順
- WordPress管理画面にログイン
- 外観 → カスタマイズ をクリック
- サイト基本情報 を選択
- 「サイトアイコン」の項目で
サイトアイコンを選択 をクリック - Canvaで作成した 512×512px の画像 を選択
- 必要に応じて切り抜きを確認
- 公開 をクリックして完了
この方法では、
設定しながらサイトの見た目をプレビューで確認できます。
方法② 設定 → 一般 から設定する
サイトアイコンは、
設定 → 一般設定 からも設定できます。
手順
- WordPress管理画面にログイン
- 設定 → 一般 をクリック
- 「サイトアイコン」の項目で
サイトアイコンを選択 をクリック - Canvaで作成した 512×512px の画像 を選択
- ページ下部の 変更を保存 をクリックして完了
こちらは、
初期設定や管理用のメモとして使いやすい方法です。
どちらの方法を使えばいい？
- 見た目を確認しながら設定したい場合
→ 方法①（外観 → カスタマイズ） - 設定項目としてまとめて管理したい場合
→ 方法②（設定 → 一般）
どちらを使っても問題ありませんので、
自分が分かりやすい方法を選んでOKです。
設定後の確認ポイント
- ブラウザのタブにアイコンが表示されているか
- ページを再読み込みして反映されているか
- 複数タブを開いたときに、判別しやすいか
※ 反映まで少し時間がかかることがあります。
すぐに表示されない場合は、
ブラウザの更新やキャッシュクリアを試してみてください。
