ガイド/サイトをカスタマイズ/サイトアイコンを追加する

サイトアイコンを追加する

サイトアイコンはファビコンとも呼ばれる、サイトを表す固有のアイコンです。このガイドでは、サイトアイコンをサイトに追加する方法を説明します。

サイトアイコンが表示される場所

サイトアイコンは以下の場所に表示されます。

  • WordPress.com ダッシュボードのサイト名の横。
  • 訪問者のブラウザータブ。
  • ユーザーがブラウザーでサイトをブックマークする際に表示されるアイコン。
  • 検索結果。
  • ブラウザーやスマートフォンに保存する際のホーム画面のアプリアイコン。

いくつかの例を紹介します。

デスクトップのブラウザータブに表示されたサイトアイコン (ファビコン)。
デスクトップのブラウザータブにファビコンとして表示されたサイトアイコン
モバイル端末のショートカットに表示されたサイトアイコン (ファビコン)。
モバイル端末のショートカットに表示されたサイトアイコン
ブラウザータブと検索結果

サイトアイコンを追加する

サイトにサイトアイコンをアップロードするには:

  1. サイトのダッシュボードにアクセスします。
  2. 「設定」→「一般」に移動します。
  3. 「サイトアイコン」の横にある「サイトアイコンを選択」ボタンをクリックします。
「サイトアイコンを選択」オプションが表示された「一般設定」の「サイトアイコン」セクション
  1. サイトの「メディア」パネルが開き、次の操作ができます。
    • 「メディアライブラリ」タブから既存の画像を選択する。
    • こちらのガイドラインに従い、「ファイルをアップロード」タブから新しい画像をアップロードする。
  2. 画像を選択したら、「メディア」パネルの右下にある「サイトアイコンとして設定」ボタンをクリックします。
    • 画像サイズが正方形である場合は、サイトアイコンが設定されます。
    • 画像サイズが正方形でない場合は、画像を切り抜くオプションが表示されます (この手順はスキップできません)。正方形の切り抜きを選択したら、「画像切り抜き」ボタンをクリックして次に進みます。
右にプレビューが表示された、サイトアイコンの画像の切り抜きを変更するオプション。
サイトアイコンを切り抜く
  1. サイトアイコンの選択や切り抜きが完了したら、ページ下部の「変更を保存」ボタンをクリックしてサイトアイコンを保存します。

サイトアイコン画像のガイドライン

サイトアイコンの画像ファイルは以下の条件を満たしている必要があります。

  • 縦横比: 正方形画像をアップロードします。
  • サイズ: 512 x 512ピクセル以上。
  • ファイルタイプ: 最も一般的な画像ファイルタイプは PNG と SVG です。あらゆる有効なファビコン形式に対応しています。

すぐに役立つヒントを以下に紹介します。

  1. シンプルなものにする。複雑にするほどのスペースはありません。
  2. 認識しやすいものにする。小さいスペースを最大限に活用してブランドを盛り込みます。普段使用しているロゴが小さい正方形ではない場合は、むやみにオリジナルロゴ全体を詰め込もうとせず、そのロゴを想起させるものを作成してみてください。
  3. テキストやレタリングはできるだけ減らす。ファビコンは小さな画像であることを意識します。普段使用しているロゴに会社名が書かれていても、ファビコンでは簡潔にしてください。
  4. 色を検討する。ウェブブラウザー (Google Chrome、Safari、Edge など) によって使用しているカラーパレットが異なります。また、ダークモードの人気が高まっているため、ユーザーのブラウザーに関係なくファビコンを美しく表示するには、ファビコンが白、グレー、黒の背景色できれいに目立つようにしましょう。

サイトアイコンを削除する

サイトアイコンを削除するには:

  1. サイトのダッシュボードにアクセスします。
  2. 「設定」→「一般」に移動します。
  3. 現在のプレビュー画像の下で、「サイトアイコン」の横にある「サイトアイコンを削除」ボタンをクリックします。
「サイトアイコンを削除」と書かれた、サイトアイコンのプレビューの下のリンク。
サイトアイコンを削除する
Copied to clipboard!