faviconを作る
サイトのアイコン用に複数サイズを書き出します
使い方
- 画像を選ぶ
- 余白の色を決める
- まとめてZIPで保存する
このツールについて
1枚の画像から、サイトのアイコン（favicon）に使う複数の大きさのPNGをまとめて作ります。16・32・48・180・192・512ピクセルの正方形で、縦横比を保ったまま中央に置き、余った部分は選んだ色で埋めます。切り取らないので、絵は欠けません。ICO形式は作りません（いまのブラウザはPNGで足ります）。
6つの大きさをまとめて書き出す
1枚の画像から、16・32・48・180・192・512ピクセルの正方形PNGを作り、ZIPにまとめます。中のファイルはfavicon-32x32.pngのように大きさが名前に入るので、どれがどれか分からなくなりません。
小さいほうはブラウザのタブや履歴、大きいほうはホーム画面に置いたときのように、大きく表示される場面のために入れてあります。使わない大きさがあれば、ZIPから取り出さずに置いておいて差し支えありません。
切り取らないので、丸いロゴも欠けない
縦横比を保ったまま正方形の中央に置き、余ったところを選んだ色で埋めます。はみ出す分を切る作りにすると、丸いロゴや横長の社名の端が落ちてしまうためです。
余白の色は白・黒・透明から選べます。最初は透明になっているので、どんな色のタブに置いても地の四角が出ません。背景を白にしたいときだけ、色を選び直してください。
ICOは作らない
拡張子が .ico の形式は作りません。いまのブラウザはPNGのアイコンを読めますし、ICOを自前で組み立てると「ファイルは開けるのに表示されない」という分かりにくい不具合を生みかねないためです。
元の画像が長方形でも処理できますが、もともと正方形に近いほうがきれいに収まります。先に形を整えたいときは、画像を正方形にするで正方形にしてから通してください。
よくある質問
- ico形式は作れませんか？
- 作れません。PNGのアイコンで足りる作りにしています。ico形式がどうしても必要な環境では、別の道具をお使いください。
- 何枚もまとめて処理できますか？
- 1枚ずつです。1つのサイトに使うアイコンは1つなので、複数の元画像から一度に作る作りにはしていません。
- 透明のまま書き出されますか？
- 余白の色に透明を選べば、透明のPNGとして書き出します。書き出しの形式はPNGで固定です。
- 元の画像に小さな文字が入っています。
- 16ピクセルまで縮むと、文字はほぼ読めなくなります。記号や頭文字だけの絵にしてから通すと、小さい大きさでも見分けがつきます。
プライバシー
このツールはブラウザ内だけで処理します。選んだファイルがサーバーへ送信されることはありません。