画像をアイコンやファビコンに変換
画像を1枚選ぶだけで、完全なアイコンセットを生成します。6種類のサイズを内包したfavicon.icoに加え、ブラウザやOSが必要とするあらゆるサイズのPNGアイコンが出力されます。
使い方
- 1
画像を選びます——理想は透明な背景の正方形PNGです。
- 2
収め方と生成したいサイズを選びます。
- 3
ダウンロード前に各サイズをプレビューできます。
- 4
favicon.icoだけをダウンロードするか、PNGアイコンとマニフェストを含むフルパックをダウンロードします。
なぜ1枚の画像だけでは足りないのか
ブラウザのタブには16pxや32px、iOSのホーム画面には180px、Androidのマニフェストには192pxと512pxが求められます。1枚の大きな画像だけを渡すと各デバイスがそれを縮小することになり、小さいサイズでは輪郭がぼやけてしまいます。そのため、それぞれのサイズを個別に、高品質な補間処理で生成しています。
ICOファイルとは
異なるサイズの複数の画像を1つにまとめたファイルで、システムはその中から用途に合ったサイズを選んで使用します。16、32、48、64、128、256pxを内包しており、ブラウザとWindowsが必要とするサイズをすべてカバーしています。
全体を収めるか、余白なく埋めるか
アイコンは正方形ですが、元画像は通常そうではありません。「全体を収める」は画像全体を保持し透明な余白を追加するため、ロゴに向いています。「余白なく埋める」は正方形を隙間なく埋め、端を切り取るため、写真に向いています。
よくある質問
- favicon.icoとPNGアイコンの違いは何ですか？
- ICOは複数のサイズを1つにまとめたもので、古いものも含めすべてのブラウザが認識できます。個別のPNGアイコンはiOSやAndroid、Webマニフェストが必要とするものです。フルパックには両方が含まれます。
- ファイルはどこに置けばいいですか？
- サイトのルートディレクトリに配置し、ツールの下に表示されるリンクタグをページのhead内に追加してください。
- 元画像として適しているものは？
- 透明な背景の正方形画像で、512px以上のものです。シンプルなロゴは、細かいイラストよりも16pxでの見え方がはるかに良好です。
- 透明度は保持されますか？
- はい。すべてのサイズがPNGとして生成され、ICO内でもそれ以外でも透明度は完全に保持されます。
- SVGに対応していますか？
- はい。SVGは最も適した元画像です。各アイコンの実寸で描画し直されるため、結果は完璧に鮮明になります。
- iOS用アイコンのサイズは？
- 180pxで、apple-touch-iconタグに使用します。サイズ一覧では初期設定で選択されています。
- 画像はサーバーにアップロードされますか？
- いいえ。生成はすべてブラウザ内で行われ、ICOファイル自体もページ上でバイト単位から組み立てられます。
- site.webmanifestとは何ですか？
- ユーザーがサイトをホーム画面に追加した際、Androidにどのアイコンを使うかを伝えるファイルです。パック内にすぐ使える状態で生成されます。