ファビコン作成（favicon.ico）
ロゴやアイコンの画像1枚から、favicon.ico（16・32・48px入り）、各サイズのPNG、apple-touch-icon（180px）をまとめて作り、ZIPで保存します。画像はブラウザの中だけで処理され、アップロードされません。
読み込み中…
使い方と仕様
画像を入れると、次のファイルを作ってZIPにします。favicon.ico（16・32・48px の3つの絵を1つにまとめたもの）、favicon-16x16.png・favicon-32x32.png・favicon-48x48.png、apple-touch-icon.png（180px）、android-chrome-192x192.png・android-chrome-512x512.png（PWAのマニフェストなどで指定する大きさ）。画面の「<head> に貼る記述」は、ico・32px・16px・apple-touch-icon の4行で、192px と 512px の PNG は含まれません。
favicon.ico の中身は、PNG 形式の絵を並べたものです（古い BMP 形式ではありません）。作ったあと、ファイルの先頭の見出し、各絵の位置と長さを読み戻して、PNG としてそのまま開けることをテストで確かめています。ただし、ごく古いブラウザや古い Windows のツールには、PNG 入りの ico を開けないものがあるかもしれません。
元画像が正方形でないときは、「全体を収める」（縦横比を保って縮め、余った所は透明か背景色）か「中央の正方形を切り取る」を選びます。16px や32px のように小さくすると、細い線や小さな文字はつぶれます。画面に実寸のプレビューを出すので、16px で形が分かるか確かめてください。小さい絵に合わせて、単純な形のロゴにするほうが読み取りやすくなります。
縮めるときは、半分ずつ段階的に縮めてから最後の大きさに合わせます。元画像が出力より小さいときは拡大になるので、その大きさを画面に出します。PNG・WebP の透明は保ちます。apple-touch-icon だけは、透明だと黒く表示される環境があるため、背景色（塗らない設定のときは白）で塗ります。JPEG や、背景色を塗った画像は、もともと透明を持ちません。
よくある質問
- SVG の画像も使えますか？
- ブラウザが画像として開ければ読み込めますが、大きさ情報のない SVG は、ブラウザによって小さく読まれることがあります。うまくいかないときは、PNG に書き出した画像を使ってください。
- ZIPの中のファイルは、どこに置けばいいですか？
- サイトの最上位（https://自分のサイト/favicon.ico で開ける場所）に置き、表示される4行を <head> に貼ります。ブラウザは favicon を長く覚えているので、差し替えたあとすぐには変わらないことがあります。
- 作ったファイルに、元画像の情報は残りますか？
- 画素から描き直してPNGにするので、撮影場所などの付加情報（EXIF）は含まれません。
- 何も塗らないと、背景は透明ですか？
- 元画像に透明があれば、そのまま透明です。「全体を収める」で余白ができた所も透明です。180px の apple-touch-icon だけは白（または選んだ背景色）で塗ります。