ブラウザのタブに表示されているアイコンは、自由に設定することができます。
このアイコンは、ファビコン(favicon)と呼ばれていて、Webサイトのシンボルマークとして表示されています。
設定していないサイトもありますが、設定自体は簡単です。本記事では、WordPressでのファビコンの設定をご紹介しますので、是非お試しください。
ファビコンとは
特に覚える必要はありませんが、ファビコンとは「favorite icon(フェイバリット・アイコン)」を縮約した単語です。
字のごとく、お気に入りのアイコンとして登録したときに、他のサイトと差別化し、直観的にユーザーへ理解してもらうためのものです。
表示例1)Chromeのブラウザで表示したとき
サイトアイコン(ファビコン)を設定してない場合、基本的には真っ白のファイルみたいなアイコンが表示されます。やっぱり設定していないアイコンでは、寂しいですね。。
※表示例2)iPhoneで表示したとき
サイトアイコン(ファビコン)を設定していない場合、Webサイトの一部をキャプチャされたイメージが表示されます。見ていただくと分かると思いますが、キャプチャだと何のWebサイトだかイメージが伝わりませんね。
ファビコンの設定について
ファビコンの設定方法は、ico形式のファイルを用意するなど、いくつか方法がありますが、本記事ではWordPressを利用している初心者の方に向けた簡単な設定方法だけを紹介します。
ファビコン用データを用意する
用意するデータ
まずは、ファビコン用のデータを用意しましょう。
必要するデータは、512px × 512pxのPNG形式の画像です。
JPG形式やGIF形式でも表示できますが、品質や利用用途を考えるとPNG形式がオススメです。
画像データの作成
可能であれば、IllustratorやPhotoshopなどのグラフィックソフトで作るのが、オリジナル性が高められるのでオススメです。
しかし、グラフィックソフトを持っていないという方も多いと思いますので、フリーでアイコンを配布しているサイトを2つご紹介します。
Free Favicon
無料のファビコンが20,000点以上配布されています。気に入ったファビコンをダウンロードすると、色々な画像が格納されていますが、使うは512px×512pxのpngデータだけでOKです。
FLAT ICON DESIGN
WordPressでファビコンを設定する
手順①
・WordPressの管理画面を起動してください。
手順②
・画面左にあるメニューから「外観」をクリックし、「カスタマイズ」を選択してください。
手順③
・カスタマイズできる項目が表示されますので、項目の中から「サイト基本情報」を選択してください。
手順④
・次のような画面が表示されますので、サイトアイコン欄の「画像を選択」をクリックし、用意した画像データを設定してください。
手順⑤
・最後に必ず「公開」ボタンをクリックしてください。これをやらないと設定が保存されませんので、ご注意を。
以上で設定完了です。
サイトを更新してタブを確認してみてください!
まとめ
サイトのオリジナリティやブランディングを考える際、ファビコンを設定することはとても大切です。サイトの顔と言っても過言ではないので、そのサイトを象徴するデザインにしましょう!
ふくねこのファビコンは、あまり捻りがないと思われるかもしれませんが、これでも色々と試して頑張って作りました努力の結晶です(笑)。