Faviconジェネレーター

作れません。このツールの出力は Canvas の toDataURL('image/png') で書き出した PNG のみで、複数サイズを 1 ファイルに束ねる ICO 形式のバイナリは生成しません。現行の主要ブラウザは <link rel="icon" type="image/png"> で指定した PNG を読み取れるため、多くのサイトでは PNG だけで運用できます。サイトルート直下の /favicon.ico は <link> 指定が無いときにブラウザが慣習的に探しに行くパスなので、ICO 形式が必要な場合は ICO 対応の変換ツールを別途利用してください。PNG のデータを favicon.ico という名前で置く方法は、中身を判定して表示するブラウザもありますが仕様として保証されている挙動ではありません。

縦横比は維持されず、正方形に引き伸ばされます。実装は drawImage(img, 0, 0, size, size) で元画像全体を出力サイズいっぱいに描画するため、横長の画像は横方向が圧縮され、縦長の画像は縦方向が圧縮されて見えます。トリミングや余白の追加は行いません。ロゴを正しい比率で出力したい場合は、先に画像クロッパーで 1:1 に切り抜くか、透明な正方形キャンバスの中央にロゴを配置した画像を用意してからアップロードしてください。

ファイル選択は accept="image/*" で、MIME タイプが image/ で始まるファイルを受け付けます。実際に処理できるかは、お使いのブラウザがその形式を <img> として描画できるかどうかで決まります。SVG は width・height 属性や viewBox の有無によって描画される大きさが変わり、アニメーション GIF や APNG は最初のフレームだけが使われます。HEIC のようにブラウザ側で表示できない形式は生成に失敗します。入力形式にかかわらず、出力は常に PNG です。

保持されます。各サイズを描く前に clearRect で Canvas を透明にクリアし、そこへ元画像を描画して PNG で書き出すため、元画像のアルファチャンネルはそのまま出力に反映されます。ただし JPEG は透過情報を持たない形式なので、JPEG を入力した場合は背景色ごと出力されます。透過が必要なら PNG または SVG を入力してください。

ブラウザのタブや検索結果用としては rel="icon" と sizes 属性の組み合わせで問題なく使えます。一方、Android の「ホーム画面に追加」や PWA のインストール時に使われるアイコンは、通常は Web App Manifest（manifest.json）の icons 配列から参照されます。このツールは manifest.json を生成しないため、PWA として配布する場合は下の DEEP DIVE に示した manifest の書き方を参考に、192 px と 512 px を icons に登録してください。

ブラウザは favicon を長期間キャッシュします。同じファイル名で上書きした場合は、href にクエリ文字列を付けて /favicon-32x32.png?v=2 のように URL を変えるか、ブラウザのキャッシュを削除して再読み込みしてください。iOS のホーム画面アイコンは追加時点の画像が端末に保存されるため、既に追加済みのショートカットは削除して追加し直す必要があります。

いいえ。選択したファイルは URL.createObjectURL でブラウザ内の一時 URL に変換され、非表示の Canvas 要素で縮小・PNG 化されます。ダウンロードもデータ URL を <a download> で保存するだけなので、外部との通信は発生しません。ページを離れると元画像も生成結果も破棄されます。