SWELLをインストールしたものの、
「ファビコンはどこで設定するの？」
「ヘッダーのロゴを変更する場所が分からない」
と、最初の設定で迷っていませんか？
ファビコンとロゴは、どちらもサイトの印象を左右する大切な要素です。しかし、設定する場所はそれぞれ異なるため、SWELLを使い始めたばかりの方には少し分かりにくいかもしれません。
この記事では、SWELLでファビコンとヘッダーロゴを設定する方法を、画像の推奨サイズや形式、反映されないときの対処法とあわせて分かりやすく解説します。
どちらも数分で設定できるので、順番に進めていきましょう。
結論：設定する場所はここ
| やりたいこと | 場所 |
|---|---|
| ファビコン（タブの小さいアイコン） | 外観 → カスタマイズ → サイト基本情報 → サイトアイコン |
| ヘッダーロゴ | 外観 → カスタマイズ → ヘッダー → ロゴ画像 |
ファビコンの設定（STEP）
STEP 01. 推奨サイズの画像を用意
- 正方形・512×512 px 以上（公式推奨）
- 形式：PNG（背景を透明にできる画像形式です。透過に対応していて、ファイルが小さくても画質が綺麗という特徴があります）
STEP 02. ダッシュボードから「外観 → カスタマイズ」
WordPress の管理画面（ダッシュボード）にログインし、左側のメニューから 「外観」→「カスタマイズ」 の順にクリックします。ここが、ファビコンとロゴをまとめて設定できる画面の入り口です。
STEP 03. 「サイト基本情報」を選ぶ
カスタマイザーの画面が開いたら、左側に並ぶメニューの中から 「サイト基本情報」 を選びます。サイトタイトルやキャッチフレーズと並んで、サイトアイコンの設定項目があります。
STEP 04. 「サイトアイコン」で画像を選択
「画像を選択」→ メディアライブラリ（WordPress にアップロードした画像をまとめて管理する保管庫のような場所）に画像をアップロード → 切り抜き範囲を確認 → 公開ボタンで反映します。
STEP 05. 確認
ブラウザのタブにアイコンが出ているかをチェックします。出ない場合は、ブラウザが以前の表示を一時保存しているキャッシュが原因であることが多いです。スーパーリロード（Mac は ⌘⇧R、Windows は Ctrl+F5）というキャッシュを無視して読み込み直す操作を試すと反映されます。
ヘッダーロゴの設定（STEP）
STEP 01. 推奨サイズの画像を用意
- ヘッダーには横長で、高さ60〜80px 程度の大きさで表示されます。用意する画像自体は、表示サイズよりひとまわり大きい高さ200〜400px 程度で作っておくと、拡大されても輪郭がぼやけません（横幅は自由です）
- 形式：PNG（透過）がおすすめです。SVG という形式も使えますが、書き出しや表示の設定が少し特殊で初心者には扱いが難しいため、迷ったら PNG を選べば十分です
- 背景を透過にしておくと、サイトの背景色を変えても違和感なく馴染みます
STEP 02. 「外観 → カスタマイズ」→「ヘッダー」
ファビコンのときと同じように 「外観」→「カスタマイズ」 を開き、今度は左メニューから 「ヘッダー」 を選びます。ロゴ画像の設定項目はこの中にあります。
STEP 03. 「ロゴ画像（PCサイズ）」「ロゴ画像（モバイル）」を選択
PC とモバイルで別画像にできます。スマホ用には小さめに作り直すと読みやすくなります。
STEP 04. 高さの微調整
「ロゴの高さ」スライダーで微調整。スマホで小さくなりすぎていないかプレビューで確認します。
STEP 05. 公開して確認
公開後は、パソコンのブラウザとスマートフォンの両方でロゴが正しく表示されているか確認しておくと安心です。特にスマホでの見え方は、STEP 03 でモバイル用の画像を別途セットできているかどうかのチェックにもなります。
よくある「あれ？」
ファビコンがタブに反映されない
- ブラウザのキャッシュが原因です。シークレットウィンドウ（閲覧履歴やキャッシュを使わずにページを開ける機能）で開くと最新の状態が出ます
ロゴが小さく見える
- 画像の解像度（画像そのものの大きさ・きめ細かさ）が低い可能性です。横 600〜1000px で書き出し直すと綺麗になります
スマホでロゴが切れる
- モバイル用ロゴが未設定。STEP 03 でモバイル用を別途セット
まとめ
- ファビコン：外観 → カスタマイズ → サイト基本情報 → サイトアイコン
- ロゴ：外観 → カスタマイズ → ヘッダー → ロゴ画像
- どちらも 5 ステップ・数分で完了
- 反映されないときは キャッシュを疑う
