ファビコンの作り方と設置方法
ブラウザでは、タイトルの左横にイメージ画像を表示することができます。
本ページでは、ファビコンの作り方と設置方法を説明します。
ファビコンとは
ファビコンとは、ブラウザで表示した時に、タイトルの左に出ている小さな画像のことです。
ファビコンを設置しておくと、ブラウザでブックマークされた時もファビコンが表示されるようになります。
ファビコンの作り方
ファビコンは、エクセルの画像などで作成できます。エクセルの画像であれば、縦横のサイズを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内に追加します。
<link rel="shortcut icon" href="images/favicon.ico">
上記は、imagesフォルダにICO形式でファビコンを配置した時の例です。PNG形式であれば、favicon.ico部分がfavicon.pngなどになります。
ホームページ作成「タッチアイコンの設置方法」