5分で表示できる!WordPressでファビコンを設定する方法

2023.10.07
2023.10.07

突然ですが「ファビコン」というものをご存知でしょうか?ファビコンはサイトを表すシンボルマークであり、サイト制作をする上で必ず設置しておきたいものです。この記事ではWordPressを使ってサイト制作をしている方に向けて、ファビコン設定の方法と注意点を説明していきたいと思います。

ファビコンとは

ファビコンとは、ブラウザのタブやブックマークの横に表示されるアイコンのことです。
favicon(ファビコン)は favorite icon(お気に入りアイコン)を短縮して生まれた言葉と言われています。

赤枠で囲まれれいる、タブの横に表示されているアイコンがファビコンです。上の写真のタブの左端にあるアイコンはGoogle、Yahoo!のファビコンです。たくさんあるタブやブックマークから、ファビコンを目印にしてサイトを探したことがある方も多いのではないでしょうか。

ファビコンを設置することでユーザーは直感的なイメージでサイトを認識しやすくなり、ブランディングや再訪率upの効果があると言われています。

このようにファビコンはサイトを端的に表すシンボルマークという重要な役割を果たしており、ユーザビリティを考えると必ず設置しておきたいものです。

それでは、実際にWordPress上でファビコンを設定する方法を説明していきたいと思います。

WordPressでファビコンを設置する方法

WordPressでファビコンを設置するには、以前はテーマを編集したり専用のプラグインを利用したりする必要がありました。しかし、WordPress4.3以降ではサイトアイコンを設定する機能が追加され、サイトアイコンとしてファビコンとアプリアイコンを簡単に設定することができるようになりました。ファビコン用の画像があれば5分もかからずに設定可能です。

ここではサイトアイコンとしてファビコンを設定する方法を紹介します。
(この記事を作成時のバージョンはWordPress 4.8.8です。)
ファビコンを設置する際の手順は以下の2つです。

⒈アイコンとなる正方形の画像を用意

⒉WordPressでサイトアイコンを設定する

それぞれ順を追って説明していきます。

⒈アイコンとなる正方形の画像を用意

まずはアイコンに使う画像を作成します。Illustratorなどの画像作成ソフトで正方形の画像を作成してください。

画像のサイズについて

WordPressで推奨されている512px × 512px以上の画像を作成しましょう。

アイコンデザインの時に注意したいこと

ファビコンが表示されるサイズは小さめなので、初めて作る際はシンプルでわかりやすいデザインを心がけてがユーザーにとって分かりやすいアイコンにすることがポイントです。テーマカラーを利用したり、マークやロゴなどのモチーフを活用することがおすすめです。

様々なサイトのファビコンをまとめたサイトもあるので、様々なファビコンを参考にしてみてもよいかもしれません。

・favicon-gallery.com:http://favicon-gallery.com/
・the favicon gallery:http://thefavicongallery.com/

⒉WordPressでサイトアイコンを設定する

画像が用意できたら、WordPressを使ってファビコンを設定しましょう。 WordPress4.3以降ではサイトアイコンを設定する機能が追加され、ファビコンとアプリアイコンを簡単に設定することができるようになりました。

サイトアイコンを設定すると、その画像がファビコン、アプリアイコン(スマートフォンのホーム画面に表示されるアプリのアイコン)として表示されます。

設定手順

まずWordPressを開き、管理画面から「外観」→「カスタマイズ」を選択します。

次に「サイト情報」をクリックします。

「サイトアイコン」から「画像を選択」をクリックします。

「ファイルをアップロード」から作成した画像をアップロードします。

「メディアライブラリ」からアップロードした画像を選択し、「選択」をクリックします。

512px以上の画像だと切り抜き画面が表示されるので、プレビューを見ながら切り抜き方を設定します。

alt=”” width=”1203″ height=”564″ />

表示されたプレビューを見て問題がなければ、「保存して公開」をクリックして完了です。

サイトアイコンを設定する時の注意点

ファイルの拡張子がpngなどの場合、画像の背景が透明な場合があります。この場合ファビコンとしては問題ないのですが、アプリアイコンとして表示すると背景の透明な部分が黒く表示されてしまいます。

サイトアイコンとしてファビコンを設定する場合は、背景に色をつけておきましょう。

まとめ

この記事ではWordPressのサイトアイコン機能を使ってファビコンを設定する方法とその注意点について説明してきました。ファビコンは小さいアイコンながら、サイトを一目で表す重要なシンボルマークです。ブランディングやユーザーのサイトの使いやすさのためにも欠かせません。

WordPressなら簡単にファビコンを設定できます。まだファビコンを設定していない方は是非設定してみてください。

2023.10.07
WordPress開発・運用チーム

WordPressを使ったWebサイト制作を得意とする株式会社セルリアのWeb制作チーム。ご要望に合わせ、長く利用頂きやすいホームページをご一緒に制作いたします。集客、Webマーケティングについても貴社のご要望に合わせた形でご提案いたします。また、高度なカスタマイズ、プラグイン開発にも対応可能です。お問い合わせフォームよりお気軽にご相談ください。

こちらの記事を読んだ方におすすめ