特集・記事リスト 記事・特集リスト
資料ダウンロード 無料お役立ち資料
本サイトについて 本サイトについて
お問い合わせ お問い合わせ
閉じる

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

ファビコンとはサイトのシンボルの役割を果たす画像です。タブの左に表示されているのがファビコンです。ファビコンを設置することで、タブやブックマークの中からサイトを探しやすくなり、ブランディングや再訪問に繋がると言われています。今回はファビコンの設置方法を紹介します。

カテゴリ: WordPress
特集: WordPress特集

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

ファビコンとは

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

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

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

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

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

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

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

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

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

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

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

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

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

画像のサイズについて

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

v

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

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

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

・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などの場合、画像の背景が透明な場合があります。この場合ファビコンとしては問題ないのですが、アプリアイコンとして表示すると背景の透明な部分が黒く表示されてしまいます。

content/uploads/2019/03/image1-25.png” alt=”” width=”222″ height=”277″ />

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

まとめ

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

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


最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

無料でできるWebマーケティング11選  <MIDORIBON>

ダウンロード資料画像

Webマーケティングに取り組もうとしている方に向けて、無料で利用できるWebマーケティングに役立つツールを9つ集めました。ツールの始め方からWebマーケティングに利用するメリット、実践的な活用方法まで解説します。

コストをかけずにまずはWebマーケティングに取り組んでみたい思いの方にぴったりの一冊です。

そのままの計画で、目標達成できますか?

Webマーケティングには予想外な事態がつきものであることを私たちは理解しています。
考えて、考え抜いて設計したはずのKPIが全く達成されずに、形骸化し誰も触れない状態になっている。

サイト内でユーザーがどのような行動をとっているかを解析

自社と競合を比較し、どこが勝っていてどこが弱みなのかを浮き彫りに

ユーザーのニーズや業界動向等を調査し、状況にあった施策を提案

課題解決のポイント、目標達成のプロセスなど
Webサイトの成長につながる具体的な手段をご提示いたします

運営会社

Web制作・広告・コンサルティングのセルリア

サービス一覧
会社概要