ant2マガジン

2022年01月

2022.01.26

ファビコンについて

こんにちは。
アントアントのメルマガ担当です。

いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。
今回はWebサイトを制作する際に是非設定してほしい「ファビコン（favicon）」についてご紹介します。

ファビコン（favicon）とは

WebブラウザでWebサイトにアクセスした際、ページの「タブ」に表示されるアイコンのことを『ファビコン』と言います。
また、Webブラウザのお気に入りにもファビコンが表示されます。

Webブラウザタブ

お気に入り

ファビコンを設定するメリット

複数のWebサイトやページを開いた際にページを判別しやすくなる
ファビコンを設定することでどのページが何のページなのか、どこの会社のページなのかを認識してもらいやすくなります。
ブランドイメージを印象付ける
企業ロゴやサービスのアイコンなどを使用することでサイト訪問者に印象付けることができます。
ファビコンは小さいですが「見える」ことで視覚的効果があります。

ファビコン作成について

ファビコンのサイズ

デバイスの多様化とブラウザのバージョンアップなどによって、ファビコンのサイズも様々なサイズが使用されます。

代表的なサイズ

サイズ	ブラウザ
16px × 16px または 32px x 32px	IEタブ Chromeタブ Firefoxタブその他のブラウザ
180px x 180px	Android Chromeタブ iOS,Safari

マルチアイコン

複数のサイズのアイコン画像をico形式で１つのファイルをまとめることができるアイコンのことを『マルチアイコン』と言います。
マルチアイコンは「favicon.ico」というファイル名で作成することがほとんどです。

ファビコンの作成のコツ

ファビコンは表示サイズが小さいため、表示された際に見やすいかどうか、ブランドやサービスをイメージできるかが重要となります。
そのため、ファビコン用の画像は線や色が少ないシンプルなものを使用するほうがいいと言われています。

favicon.cc

ドットからファビコンを作成することができる無料ツールです。
元画像なしで1からファビコンを作成したい場合におすすめです。

RealFaviconGenerator.net　

RealFaviconGeneratorは、260px x 260px 以上の画像（形式：PNG/JPG/SVG）を用意するだけで無料でファビコンを作成することができます。

ant2 CMSでファビコンを設定

【ファビコン画像の準備】
まずは事前にファビコン用のアイコン画像をファイル名「favicon.ico」で作成しましょう。
ファビコン設定
ファビコンの設定はコントロールパネル[管理]＞[システム]＞[サイトの設定]より設定ができます。
※アップロードできるファイル名は「favicon.ico」のみとなります。ご注意ください。
ファビコンの設定ができたら[サイト公開]を行ってファビコンの設定を反映させてください。

★注意点★

サイト公開後すぐにファビコンは反映されますが、昨今ブラウザがキャッシュをかなり強く残す仕様にある傾向がございますので、ファビコンが反映されない場合はキャッシュを削除するか強制リロードを行ってご確認ください。

ファビコンの削除方法について

一度設定したファビコンを削除する場合は、FTPアクセスを追加（ドキュメントルート）していただき、
FTPソフトより対象のファビコンファイルを直接削除してください。

今回はファビコンについてご紹介しました。

ファビコンは意外と設定を忘れがちな項目ですが、設定をすることで上記のようなメリットがあります。
特に企業やサービスのブランドイメージを印象付けるためには設定しておいてほしい項目となります。
設定をしていない方やどうやって作成したらいいかわからないという方は是非この機会に作成、設定をお試しください。