無料ファビコンジェネレーター

使い方

このツールは任意のPNG、JPEG、WebP、SVGを、Canvas APIとJSZipを使ってブラウザ内で完全に、複数サイズの.ico、Apple touchアイコン、Android/PWAアイコン、Webマニフェスト、貼り付けてすぐ使えるHTMLスニペットを含む完全なファビコンパッケージに変換します。何もアップロードされません — すべてのレンダリングとファイル組み立てはローカルで行われます。

1. 1
   Canvasが画像を再スケールする

   ブラウザは元の画像を、必要な各サイズ（16、32、48、180、192、512px）でオフスクリーンのHTML Canvas要素に描画します。明示的なwidth/height属性を持たないSVGは、FirefoxとChromeが空白のキャンバスではなく同一のピクセル出力を生成するよう、まずDOMParserとXMLSerializerを使って正規化されます。
2. 2
   手書きのICOエンコーダーが.icoファイルをパックする

   小さいICOエントリ（16、32、48px）は生の32ビットBGRA DIBビットマップとしてエンコードされます — BITMAPINFOHEADERに加え、下から上へのXOR行と1bppのANDマスクです。これは、Windowsのシェルコンポーネントがそれらのサイズで非圧縮のDIB形式を要求するためです。ツールはICOディレクトリヘッダーを書き込み、DataViewとUint8Arrayを使ってエントリを完全に連結します — 外部のICOライブラリは関与しません。
3. 3
   PNG出力はcanvas.toBlob経由で生成される

   各PNGバリエーション（favicon-16x16、favicon-32x32、apple-touch-icon-180x180、android-chrome-192x192、android-chrome-512x512）はcanvas.toBlobを'image/png'で呼び出すことでキャプチャされ、無損失エンコーディングをブラウザ内蔵の画像エンジンに委ねます。任意のパディング、背景色、形状のクリッピング（四角形、角丸、円形）はキャプチャ前にキャンバスコンテキストに適用されます。
4. 4
   JSZipがすべてを1つのダウンロードにまとめる

   JSZipは生成されたすべてのファイル — favicon.ico、5つのPNG、アプリ名を含むsite.webmanifest、正しい<link>タグを含むfavicon-snippet.html — を単一の.zip blobに組み立て、端末に自動的にダウンロードします。

関連ツール