ウェブサイトを訪問するとブラウザタップにアイコンが見られます。それをファビコン(favicon)といいます。このポストではウェブサイトにファビコンを設定する方法を説明します。
事前準備
ファビコン(favicon)として使うイメージファイルの準備
ファビコンとして指定するico拡張子のイメージファイルが必要です。png、svgファイルも可能ですがおすすめはicoです。
サイズ
イメージファイルのサイズは以下のサイズがおすすめです。単位は「px」で、縦と横が一緒の正四角形です。
- 16*16 (おすすめ)
- 32*32
- 48*48
- 64*64
- 128*128
- その他
ブラウザによって最適なサイズがそれぞれなのでファビコンを見せたいターゲットに合わせる必要があります。一般できなウェブブラウザでは「16*16」、「32*32」を多く使かうようです。
事前に準備できてるイメージファイルがあれば拡張子をicoにしてくれればいいですが、(ファイル名前変更でOKです。)準備できていない場合は以下の方法でイメージファイルを作りましょう。
既にあるイメージファイルの背景を透明化する方法
細かいな調整は他のツールを使う方がよいですが、簡単なイメージであればMicrosoft社のPowerPointを使って背景が不透明なイメージファイルを簡単に背景を透明にすることができます。以下のポストにやり方を整理しまして、参照してください。
グラフィックツールでイメージ作り
直接イメージファイルを作るには以下の無料プラグラムを使うとよいと思います。
ペイント3D
Microsoft社で提供するペイントの上位バージョンです。色んな機能が追加されたんですが、その中にも背景透明化を支援することが一番目立つ機能ですね。ダウンロードはこちらで。
Inkscape
ベクターデータ作成特化のグラフィックツールです。使用方法が結構易くないですがガイドを見ながらツールの使い方に慣れるとペイント3Dよりかなり使える機能が多いです。ダウンロードはこちらで。
ウェブサイトにファビコンを追加
イメージファイルが準備できてればHTMLを修正しましょう。
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="favicon.ico" />
</head>
</html>基本的に必要なコードは<link rel=”icon” href=”favicon.ico” /> です。位置は<head>タグの中で、icoファイルの場所を正しく指定することでファビコンが表示されます。有効なブラウザは「Internet Explorer11」,「Google Chrome」,「Microsoft Edge」,「FireFox」などです。ただ、様々な問題で表示されない場合もありますね。
旧バージョンのInternet Explorer
最新バージョンであるInternet Explorer11では上記のコードでできますが、旧バージョンではできない場合があります。IE8,9,10では以下のソースを使います。
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="favicon.ico" /> <!-- IE8 -->
<link rel="icon" type="image/x-icon" href="favicon.ico"> <!-- IE9, 10 -->
<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico"> <!-- IE9, 10 -->
<title>favicon test</title>
</head>
</html>
