ファビコンとは？ファビコンの作成方法と設定方法を紹介

公開日: 2021.05.25

更新日: 2021.11.24

ファビコンはWebページのブラウザタブに表示される正方形のアイコンのことです。目にすることが多いこの画像には、どういった目的があるのでしょうか。

本記事ではファビコンについて解説するとともに、利点や実際の作り方・設置方法なども紹介します。

ファビコンとは

favicon（ファビコン）とは、favorite icon（お気に入りのアイコン）という言葉を省略したものです。ブラウザのタブやブックマークで表示される、Webサイトごとに自由に設定可能なアイコンのこと。

ファビコンはユーザーが迷わないように、サイトをアイコンで表現したものです。ブラウザのブックマークやタブ上にURLだけではなく、アイコンがあると探しやすくなることも。そのためファビコンは、独自性があるものをサイトのシンボルとして設定しておく必要があります。

ファビコンはブラウザのタブに常に表示されており、ユーザーに対して、サイトを認知させる役割があります。

自社のサービス、ロゴ、アプリなどがある場合、ファビコンでも同じ画像を使用していることが多く、ブランディングとしての目的もあるのです。そのため、社名、サービス名を表現したアイコンが多く、配色を意識した目立つシンボルとしても活用できます。

また、ファビコンを設定しておくことでページ作成において詳細な部分まで気を遣っているとしてWebサイトの信頼性も向上するといえるでしょう。そのほか、似たようなサービスがある場合でもファビコンで差別化することが可能です。

ファビコンは縦横比が同じ正方形サイズで、その種類は20以上。ブラウザ、OS、ソフトにより、その最適サイズが異なります。ブラウザのタブ、アドレスで使用する場合は16px、32pxサイズが一般的です。

近年デバイスの多様化によりファビコンの種類は増えており、複雑化しつつあります。もし最適化されたファビコンが用意されていなければ、クライアント側で自動的に調整し表示するため、全デバイスを考慮して作る必要はありません。

ファビコンのファイル形式とその作成方法について見てみましょう。ファビコンは画像ファイルですので、画像作成ソフトがあれば作れます。ただし、大小様々なファビコンを用意するのは大変なこと。そこでファビコンをソフトを使わずに作成できるツールをご紹介しましょう。

ファビコンのファイル形式は「.ico」です。他に「.gif」や「.png」形式でも対応可能ですが、一部のブラウザでファビコンとして表示できないことがあるので、ファビコンは「.ico」形式で作成するようにしましょう。

ファビコンは画像作成ツールでも作れますが、専用のサイトを使えば簡単に作成可能です。ここでは３つのサイトをご紹介します。

このツールを使えばファビコンが数分で作成可能です。260pxの画像を用意し、アップロードすれば、ファビコンが生成されます。Mac/Windowsのパソコン/モバイル表示用のアイコンに対応。

https://realfavicongenerator.net/

あらかじめ画像を用意して、アップロードすればすぐにファビコン形式に変換できます。透過対応のアイコンを一括で生成できるのが特徴です。

画像を準備しなくても、サイト上にカラーツールがあり、任意のファビコンを作成できます。プレビュー機能もあり便利なのが特徴。

ファビコンを作成したら、実際にWebサーバへアップロードしてみましょう。まずは、ファビコンをWebサーバへアップロードします。設置する場所は、サーバのルートディレクトリ（最上位の階層）直下に置いてください。

ファビコンの画像ファイルがサーバへ問題なくアップロードできたら、「public_html」ディレクトリ（Webサーバ上のフォルダ）にある、htmlファイルのhead部分にファビコンを表示できるように記述してください。

具体的にはファビコンファイルを読み込めるように以下の文を追記します。記述が終わったら、記述内容が正しく反映されているか、ブラウザやデバイスを変えながら確認してみましょう。

ファビコンとは、ブラウザのタブやブックマークでサイトのシンボルとして、表示されるアイコン画像のことです。ファビコンを表示することで、ユーザーにサイトを視覚的に認知させることができます。

また、Webサイトのブランディング・信頼性向上のためにも、オリジナルのファビコンを作るようにしてください。ファビコンはツールを活用すれば簡単に作成できますので、オリジナルのファビコンを作り、サイトのシンボルとしてアピールしましょう。