WordPressでサイトアイコン(ファビコン)を設置する方法

サイトアイコンとは、Webブラウザのタブやブックマーク、スマートフォンやタブレットのホーム画面に表示されるアイコンのこと。もともとはファビコン(favicon)と呼ばれていましたが、現在のWordPressにはサイトアイコンという呼称で設置する機能が付いています。

目次

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

サイトアイコンは次の場所で表示されます。

Webブラウザのタブ

Webブラウザのタブに表示されるサイトアイコン

Webブラウザのブックマーク

Webブラウザのブックマークに表示されるサイトアイコン

スマートフォンのホーム画面

スマートフォンのホーム画面に表示されるサイトアイコン

こういった場所に表示されるためサイトアイコン(ファビコン)はWebサイトのシンボルマーク・イメージとなります。

サイトアイコンの設置方法

WordPressではバージョン4.3以降、管理画面でサイトアイコンを簡単に設置する機能が実装されています。

実際に設置してみましょう。

画像を用意する

まずはサイトアイコンとして使用する画像を用意します。

画像サイズは512×512以上の正方形が想定されていますのでこの規格に合わせるのが望ましいです。

Brandmark などで作成したロゴのアイコン部分をサイトアイコンにすると手っ取り早くそれっぽいサイトアイコンが用意できます。

AIによるロゴデザイン生成サービス Brandmark

ここでは Brandmark で作成したロゴのアイコン部分を切り出して次のような画像を用意しました。

電脳世界のサイトアイコン

画像は他の画像と同じようにWordPressの「メディア」にアップロードしてしまってOKです。

テーマカスタマイザーでサイトアイコンを設置

画像をアップロードしたらテーマカスタマイザーでサイトアイコンを設置します。

WordPressの管理画面に入り、左側のメニューから「外観」→「カスタマイズ」を選択

WordPressの管理画面に入り、左側のメニューから「外観」→「カスタマイズ」を選択します。

「サイト基本情報」をクリック

「サイト基本情報」をクリック。

サイトアイコンを選択

「サイトアイコンを選択」から用意した画像を選択します。

サイトアイコン設置後のプレビュー

プレビューが表示されます。

問題なければ「公開」をクリック。

これでサイトアイコン(ファビコン)の設置は完了です。

Webブラウザやスマートフォンのホーム画面などでサイトアイコンが正常に表示されるか確認しておきましょう。

このエントリーをはてなブックマークに追加

コメントを残す

頂いたコメントは一読した後表示させて頂いております。
反映まで数日かかる場合もございますがご了承下さい。