ICO・ファビコンの作成

使い方とメモ

• 画像を1枚入れるか、1〜2文字を打つだけで、サイトに要るアイコンが全部そろいます。ブラウザのタブ用（favicon.ico）、iPhoneのホーム画面用（apple-touch-icon.png）、Androidやアプリ化したとき用（192・512のPNGと site.webmanifest）です。
• favicon.ico には 16・32・48 の3枚を入れています。1枚の画像を縮めて入れただけのICOだと、タブの16pxで潰れたり、Windowsのショートカットで粗くなったりします。
• タブの見え方を先に確かめられます。16pxは思ったより小さいので、写真やロゴの細かい文字はまず読めません。余白を減らす、文字1つにするなど、ここで調整してから書き出してください。
• iPhoneのホーム画面は、透明な部分を黒く塗ってしまいます。そのため apple-touch-icon.png だけは、背景を透明にしていても白（色を選んでいればその色）で埋めて書き出します。角は iPhone が自分で丸めるので、四角のままで構いません。
• 既存の .ico を入れると、中に何枚・何pxの画像が入っているかを一覧します。「タブで使う16pxが入っていない」のような抜けも分かります。
• 書き出したファイルはサイトのいちばん上（ドメイン直下）に置き、下に出る <head> 用のタグを貼ってください。
• 画像はブラウザの中だけで処理しています。サーバへ送っていません。