先頃、とあるサイトのファビコンを作る機会がありまして。
ファビコンってのは、フェイバリット・アイコンを省略した呼び名で。
お気に入りにサイトを登録したときに、その一覧のサイト名の横に表示されるアイコンだったり。
あるいはブラウザでサイトを開いたときに、ブラウザのタブの左端に表示される小さなアイコンなんかがそれにあたるんですが。
最近は利用される端末がPCやらスマホやらいろいろあるもんで、それぞれに対応したサイズのファビコンを作らなきゃいけなかったりするんですね。
とはいえ真面目に対応してたら、20種類とか30種類とか作らなきゃならなくてエラク大変なんです。
そこである程度手抜きして、とりあえず簡単にできる範囲で手軽に作る方法は?と調べてやってみたんで。
手順のメモとして、記事にしておこうかなと。
まずは、サイズが152×152(px)以上のJPG・PNG・GIFの画像を1つ用意します。
次にコレをファビコン用の透過PNGや、ICOファイルにするわけですが。
「様々なファビコンを一括生成。favicon generator」という、便利なサイトを作ってくれた有難い方がいらっしゃいまして。
今回は、そこでファビコン用の画像を作らせて頂きました。
やりかたは実に簡単で「画像ファイルを選択」して、「ファビコン一括生成」をクリックするだけ。
そうすると、38個のファイルをまとめた1つのZIP圧縮ファイルがダウンロードできますので。
それを解凍した中のファイルから、
・favicon.ico
・apple-touch-icon-152x152-precomposed.png
の2つのファイルを取り出します。
簡単にやりたいので、使う画像はこの2つだけです。
1つめのほうは、16x16・32x32・48x48の3つのサイズの画像を含むマルチアイコンになってます。
そして2つめのほうは、iPhoneなどのスマートフォン用として使用する画像です。
これら2つの画像をサーバの適当な場所にアップロードしまして、ファビコンを表示するサイトのHTMLファイルなどに以下のように記述します。
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
記述する場所は、<HEAD>から</HEAD>の間で、<META・・・>とかの記述があるのと同じ位置です。
上記は、HTMLファイルなどとファビコンのファイルが同じディレクトリにある場合で。
ファビコンのディレクトリが異なる場合は、それに合わせてファビコンのファイル名の前にディレクトリ名を付けます。
というわけで書き換えたファイルをアップロードして、スマホやPCのブラウザで確認できたら完了です。
ブラウザのキャッシュをクリアしたりしないと表示されない場合もあるので、その辺は要注意ですね。