【ファビコン / HTML】アイコン画像を作成し、自サイトのタブに設定する方法
自サイトのタブにアイコン画像を設定する方法のご紹介です。 たくさんのタブを開いていても、一目で自分のサイトだとわかるので、ぜひ設定してみてください。
アイコン画像の作成
まずはタブに使うアイコン画像を用意します。 ちなみに、タブで使われるアイコン画像はファビコンといい、 サイトのシンボルのような役割をします。
また、用意する画像の形式はJPG,PNG形式で用意すると良いでしょう。 下記でアイコン画像を自作する例をご紹介しますが、既に画像が用意してある場合は 画像をICO形式のファイルに変換するへお進みください。
エクセルで画像を自作する例
アイコンに使う画像はどのように用意しても良いのですが、 私の場合はエクセルの図形の書式設定などを駆使して、作成してみました。
まずはエクセルで以下のようなものを作ります。
そしてこれをコピーして「ペイント」ソフトに貼り付けます。
「選択」で必要な範囲を選び、「トリミング」して文字部分を中心に仕上げます。
この画像をPNG形式で保存して、アイコン画像の作成は完了です。
画像をICO形式のファイルに変換する
JPG,PNG形式の画像が用意できたら、それをICO形式の画像ファイルに変換します。 タブのアイコンには、拡張子が「.ico」の画像ファイルを使うためです。
変換といっても非常に簡単です。以下のサイトから簡単にICO形式の画像ファイルを作ることができます。
英語ですが、使い方を画像付きでご説明するので安心してください。
上記のURLにアクセスしたら、まずは赤枠にあるファイルを選択ボタンを押して、 保存してるPNG,JPG形式の画像を選択します。
続いてOptionalのチェックボックス2つにチェックを入れます。 チェックなしだと16x16だけのアイコン画像を作成しますが、 これらにチェックすることで、32x32と48x48サイズのアイコン画像も作成できます。
IEやChromeなど、ブラウザによって使用されるアイコンサイズが違うため、 作っておくと良いでしょう。
チェックを入れたら、Create Iconボタンを押します。
すると、下にサンプルが表示されます。 これでOKならばDownload FavIconボタンを押します。
ICO形式のファイルがダウンロードされるので、これをアイコン画像として使います。 なお、1つのファイルに16x16、32x32、48x48の画像が入っています。 ファイルを開くと3ページあるのがわかるかと思います。
自分のサイトにアイコン画像を設定する
自分のサイトにアイコン画像を設定する方法は２つあります。
- ルートディレクトリに設置する
- HTMLファイルのhead要素内に書き足す
全てのページに同じアイコン画像を使う場合は、 1の「ルートディレクトリに設置する」がおすすめです。
一方で、ページによってアイコン画像を変えたい場合は、2の 「HTMLファイルのhead要素内に書き足す」やり方を使います。
ルートディレクトリに設置する方法
ルートディレクトリとはサイトのトップ階層のことで、トップページ(index.html)が配置されているフォルダを指します。
このルートディレクトリに、先ほどFavIcon Generatorで ダウンロードしたICO形式の画像ファイルをアップロードします。
これで、サイトのどのページを開いてもアイコン画像がタブに設定されます。
また、以下のようにブックマークにもアイコン画像が表示されます。
HTMLファイルのhead要素内に書き足す
HTMLファイルのhead要素に以下を追記することで、アイコン画像を設定することもできます。
<link rel="shortcut icon" href="http://test.com/image/favicon.ico"/>
赤字のURLはアイコン画像がある場所です。 上の例だと、「http://test.com/image/」に「favicon.ico」というアイコン画像をアップロードし、それを参照しています。
アイコン画像を複数用意して、それぞれのアイコン画像を参照するようにすれば、 ページごとに好きなアイコン画像を使うことができます。
このHTMLファイルに追記するやり方は、アイコン画像が1つでも(サイト全体で同じアイコン画像を使う場合でも)問題ないですが、 その場合は1のルートディレクトリに設置する方法の方が簡単で良いでしょう。
