Jetpackのサイトアイコン機能でホームページのアイコンを設定する

お気に入りとかに表示されるホームページ独自のアイコンをfavicon(ファビコン)と言う。
設定するには、画像ファイルを作って、ページのヘッダーコード内に特定のコードを書けば良いのだが、万能プラグインの「Jetpack」にないかなー?と思って探したら余裕であったので、今回はJetpackのサイトアイコン機能(Site Icon)で実装してみる。

Jetpackのインストール・設定については、下記参照。
JetpackはWordPressに必須のプラグインなのでインストールから設定までやってみる

サイトアイコン機能の設定手順

  1. Jetpackの設定画面にて「Site Icon」の「設定」をクリックする。
    Site Icon設定メニューイメージ

  2. 画面が切り替わるので『画像を選択』ボタンをクリックする。
    サイト基本情報設定画面で『画像を選択』ボタンをクリックする

  3. 画像のサイズは512×512ピクセル
    読み込ませてみた。↓
    サイトアイコン画像を読み込ませた状態

  4. 保存して公開』ボタンをクリックする。
    『保存して公開』ボタン

  5. 早速なんか小さいのが付いた。
    ブラウザタブに表示されるサイトアイコン
    若干っていうか、かなり見にくいけど画像がウンコなだけでJetpackのせいではない。

  6. スマートフォンで見たときのサイトアイコン↓
    スマートフォンで見たときのサイトアイコン
    うん、見える見える。

まとめ

通常、表示デバイスに合わせて複数のアイコン画像を作ったりしないといけないけど、Jetpackのサイトアイコン機能なら512×512ピクセルの画像1枚でオッケーなのでラクできた。

投稿者: Output48

中学生の時に初めてHTMLに触れてからホームページ制作を独学で始める。 ベンチャー企業の営業、大手企業のSEを経て、独立。 ここ数年はWEB以外の仕事をしていたため、割と本気で勉強中。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です