ファビコンジェネレーター
画像を1回アップロードするだけで、ブラウザタブ、iOSホーム画面、Android/PWAアイコンなど必要なすべてのファビコンサイズと、それを使うためのHTMLをダウンロードできます。
クリックして画像を選択、またはここにドラッグ&ドロップ
正方形の画像が最適です。端末内で完結し、何もアップロードされません。
得られるもの
ブラウザタブ用の16×16、32×32、48×48のPNG、iOSホーム画面用の180×180のapple-touch-icon、 AndroidとPWAマニフェスト用の192×192 / 512×512のPNGを含むzipファイルに加え、サイトの <head>に貼り付けられる正確な<link>タグを記載したテキストファイルが含まれます。
仕組み
あなたの画像はまず、収まる最大の中央寄せ正方形にトリミングされ、次にdrawImage()の1回の呼び出しでその正方形を目的のサイズのキャンバスに一度にトリミング・スケーリングします。そのため正方形でない画像は、引き伸ばされるのではなくトリミングされて出力されます。これは各サイズごとに6回行われます。16、32、48、180、192、512ピクセルです。各キャンバスはPNGファイルとしてエクスポートされます。ZIPアーカイブはサーバー側の圧縮なしにJavaScriptでバイト単位で組み立てられ、サイトの<head>に貼り付けるための正確な<link>タグを含むテキストファイルも入っています。
.icoファイルがないことに気づくでしょう。すべての最新ブラウザはPNGアイコンを直接受け付けます。生成されるサイズのうち、32×32は最新画面のブラウザタブをカバーし、180×180はiOSのホーム画面ショートカットで使われ、192×192と512×512はプログレッシブウェブアプリの仕様が要求する2つのサイズです。512pxで見栄えの良いアイコンは、16pxではしばしば潰れて見えます。細かいディテールより、大胆でくっきりとした高コントラストな形を選びましょう。
ドロップした画像は、ブラウザのメモリ内で完全にデコード、トリミング、リサイズ、圧縮されます。このページにはアップロードのステップは一切ありません。生成中にネットワークタブを見てみてください。転送されるのは完成したZIPファイルがメモリからダウンロードフォルダへ移動する部分だけです。
よくある質問
.icoファイルではないのはなぜですか?
モダンブラウザ、iOS、Androidはいずれも直接PNGファビコンに対応しており、このダウンロードに含まれる各サイズもPNGです。.icoファイルは歴史的に複数サイズを1つのコンテナにまとめるためのものでしたが、現在は必須ではありません。同梱のHTMLスニペットが各用途に適したPNGをブラウザに指定します。
どんな画像をアップロードすればいいですか?
正方形の画像が最もきれいにトリミングされます。正方形でない画像は、リサイズ前に自動的に中央基準の正方形へトリミングされるため、ロゴの重要な部分は中央付近に配置してください。
画像はどこかにアップロードされますか?
いいえ、すべてのサイズはcanvas APIを使ってブラウザ内でローカルに生成されます。サーバーには何も送信されません。