みなさんは、ご自身のWebサイトにファビコンを設置していますか？
ファビコンはWebサイトを視覚的に捉えてもらえるため、ユーザーにとってとても便利なものであり、サイトのブランディングにも効果的です。
今回は、ファビコンとはどういうものかという説明と、その設置方法を紹介していきます。
googleが2019年5月から、スマホの検索結果にファビコンを表示
2019年5月から、スマホでのGoogleの検索結果に、ファビコンが表示されるようになりました。
これにより、ファビコンのあるなしは、検索したひとが表示されたサイトを見る際に
「これはちゃんとしたサイトだな」と認識する大事な要素の一つとなります。
逆に、設定していないサイトはとても残念な印象を与えてしまいます。
ファビコンとは
ファビコンとはブラウザでページを開いた時にタブ部分に表示されるアイコンのことです。
お気に入りに登録した時の一覧にも表示されます。
先ほど紹介したように、googleの検索結果でも表示されるようになりました。
ファビコンがあるから閲覧数が上がる、ということは考えにくいですが、
閲覧者に安心感を与える、ブランドイメージを作る、という意味では大切なものです。
ファビコン作成のポイント
ファビコンは、Webサイトの内容が伝わるシンボルマークとなるものを作成します。
サイトのロゴ、もしくはサイト名前の一文字を使用して作成することが多いです。
サイトのロゴ
サイト名前の一文字
サイトカラーを使うのもいいですね。 いずれにせよ、できるだけ単色にして、シンプルな形状にしましょう。
最小サイズは16×16ととても小さく表示されますので、
複雑なものや色数の多いものは避け、シンプルでわかりやすいものが好ましいです。
ついつい凝ったものをファビコンにしたくなりますが、いざ表示されると潰れてなにかわからなくなるので、ファビコンに関してはシンプル イズ ベストです。
ファビコンにする画像はできるだけ線や色が少ない、シンプルなものにしましょう。
ファビコンの画像サイズと形式
おもなファビコンのサイズは下記通りです。
32px × 32px：Chrome、Firefox、Safariなどのタブ
48px × 48px：Windowsのサイトアイコン
64px × 64px：高解像度のWindowsアイコン
152px × 152px：iOS、 Androidのホーム画面
512px以上 × 512px以上：ワードプレスでの設定
その他にも、最近ではデバイスの多様化で、様々なサイズが適応されるようになってきました。
該当のサイズがない場合は、設定したファビコンが拡大・縮小されますので全部網羅する必要もないように思います。
ico形式で設定する場合は、 マルチファビコンで 16px × 16px、 32px × 32px、 64px × 64px、 152px × 152px を作っておけばある程度カバーできると思います。
ちなみに、マルチファビコンというのは、複数のサイズのファビコンをひとつのico形式にまとめたもののことです。
ファビコンは通常「.ico」の形式で作成します。
通常の画像加工アプリやソフトでは「.ico」形式で保存は難しいので、ファビコンを作成できるWEBサービスを利用するといいでしょう。
ファビコンを簡単に作成できるサービス
半透過マルチアイコンfavicon.icoを作ろう!
多くのファビコンについて書かれている記事で紹介されているサイトです。png形式から、簡単にico形式に変換することができます。
設置方法
通常のサイトではheadタグに記載する
通常のサイトでは、「.ico」形式でサーバーにUPし、headタグに記述するするのがオーソドックスなやり方です。
headタグに記載するコードは下記の通り。
「href=」の中はファビコンのファイル名にします。
一般的には「favicon.ico」とつけられていますが、違う場合はご自身のファイル名に合わせてください。
< head>
< link rel="shortcut icon" href="favicon.ico">
< /head>wordpressの場合
ワードプレスの場合、pngやjpgといった通常の形式の画像をUPすればいいようになっている場合があります。
デフォルメの機能でそうなっていなくても、拡張機能で簡単にファビコンの設定ができます。
ファビコンは設定して損はなし！
ファビコンの設定はやって得はしないけれど、やっていないと残念ではあります。
ぜひやっておきましょう！
