ファビコンについて | ant2マガジン | CMSなら「ant2-ASP」でホームページ制作!

ファビコンについて

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

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

ファビコン(favicon)とは

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

1

Webブラウザタブ

  

2

お気に入り

  

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

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

ファビコンのサイズ

デバイスの多様化とブラウザのバージョンアップなどによって、ファビコンのサイズも様々なサイズが使用されます。
代表的なサイズ
サイズ ブラウザ
16px × 16px
または
32px x 32px
IEタブ
Chromeタブ
Firefoxタブ
その他のブラウザ
180px x 180px
Android Chromeタブ
iOS,Safari
マルチアイコン

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

ファビコンの作成のコツ

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

favicon.cc

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

 

RealFaviconGenerator.net 

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

ant2 CMSでファビコンを設定

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

★注意点★

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

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

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

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

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

イベント出展のお知らせ

2022年2月に開催される『page展 2022』に出展いたします!

クラウド型CMS商材「ant2(アントツー)」の販売代理店サービスをより具体的に実感していただけるよう
販売代理店の成功事例や制作事例を多数交えてご紹介させていただきます。
お時間がございましたら、是非お越しくださいませ。

詳しくはこちら『page展  2022』に出展いたします!』

page2022の概要

出展期間
2022年2月2日~2月4日 10:00~17:00

開催場所・アクセス
サンシャインシティ コンベンションセンター
展示ホールD(文化会館2F)【D-14】
〒170-0013 東京都豊島区東池袋3丁目1[アクセス]
【最寄駅】池袋駅(JR・東京メトロ・西武線・東武線)
池袋駅東口が一番近い出口になります。

入場料
1,000円

※WEB事前申し込みで無料 ★事前登録フォーム★