ファビコンの作り方と設置方法

ブラウザでは、タイトルの左横にイメージ画像を表示することができます。

本ページでは、ファビコンの作り方と設置方法を説明します。

ファビコンとは

ファビコンとは、ブラウザで表示した時に、タイトルの左に出ている小さな画像のことです。

ファビコンの表示例

ファビコンを設置しておくと、ブラウザでブックマークされた時もファビコンが表示されるようになります。

ファビコンの作り方

ファビコンは、エクセルの画像などで作成できます。エクセルの画像であれば、縦横のサイズをpxで指定もできます。pxで指定する時は、32pxなど単位も含めて入力する必要があります。

作成した画像をコピーして、Windows標準アプリのペイントに貼り付けます。その後、ファイル形式を指定して保存することで、ファビコンとして使えるようになります。

ペイントの画面

絵を作るのが苦手な方でも、文字だけ使って作成するというのもあります。私は、フォントは日本語であればHG行書体、英字であればAR BERKLEYで、太字にしてぼかしを入れた文字でファビコンを作成しています。

ファビコンで使えるファイル形式とサイズ

ファビコンで使えるファイル形式として、ICO形式(拡張子ico)、PNG形式(拡張子png)、GIF形式(拡張子gif)などがあります。良く使われるのは、ICO形式かPNG形式です。

Windows標準アプリのペイントであれば、PNGとGIF形式で保存できます。ICO形式は、PNGやGIFから変換してくれるサイトが、インターネットで検索するとすぐ見つかると思います。

サイズは、さまざまです。16px × 16px、32px × 32px、48px × 48px、64px × 64px、128px × 128pxなどが可能です。正方形にする必要があります。

サイズは、最低でも32px × 32px以上にした方がよいと思います。ブラウザでは、16px × 16pxに縮小されて表示されますが、高解像度のディスプレイの場合は、32px × 32pxのまま表示されます。

ファビコンの設置

ファビコンを表示させるためには、ICO形式のfavicon.icoというファイル名にして、ルートディレクトリ(トップページと同じ階層)にアップするだけです。HTMLに記述しなくても、各ページでファビコンが表示されます。

ルートディレクトリに置かない場合、またはPNG形式やGIF形式の場合は、HTMLで以下をhead内に追加します。

【HTMLでファビコンを読み込ませる記述】
<link rel="shortcut icon" href="images/favicon.ico">

上記は、imagesフォルダにICO形式でファビコンを配置した時の例です。PNG形式であれば、favicon.ico部分がfavicon.pngなどになります。

サイト内で関連ページをチェック

ホームページ作成「タッチアイコンの設置方法