カテゴリー: 画像ツール
favicon ジェネレーター
1 枚の画像からアイコン一式を作る
ロゴを開くと 16、32、48、64、128、180、192、512 ピクセルの PNG アイコンと、head に貼る link タグが得られます。各サイズはブラウザ内で描画され、画像がアップロードされることはありません。
圧縮する画像を選んでください。
<head> に貼る HTML
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"> <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48.png"> <link rel="apple-touch-icon" sizes="180x180" href="/favicon-180.png"> <link rel="icon" type="image/png" sizes="192x192" href="/favicon-192.png">
上の URL が解決するようファイルはサイトのルートに置き、名前は変えないでください。favicon を移動すると再クロールが必要になります。
このページの処理はすべてブラウザ内で行われます。アップロードは一切ありません。
このツールでできること
favicon はもはや 1 ファイルでは足りません。ブラウザのタブは 16・32・48 ピクセルを求め、高精細ディスプレイは 64 と 128 を、iOS は 180 ピクセルの apple-touch-icon を読み、Android のウェブアプリマニフェストは 192 と 512 を要求します。このツールは 1 枚の元画像から、サイズごとに canvas を使ってすべてを描き出します。図柄は引き伸ばさず正方形の中に収め、安定した URL で参照する link マークアップも合わせて返します。すべて PNG です。現在使われているどのブラウザも PNG の favicon を読めますし、古い ICO 形式にしても得られるものがありません。
使い方
- ロゴまたは正方形の画像を選びます。512 x 512 以上が理想です。
- 必要なら余白を足し、アイコンを不透明にしたい場合は背景を塗りつぶします。
- 各サイズをダウンロードしてサイトのルートに置き、HTML を head に貼り付けます。
プライバシー
このツールはすべてブラウザ内で動作します。入力した内容がアップロード・保存・共有されることはなく、タブを閉じれば消えます。
よくある質問
- ロゴはアップロードされますか。
- いいえ。各アイコンはこのページの canvas で描かれ、ローカルのダウンロードとして提供されます。画像が端末から出ることはありません。
- 元画像はどのくらいの大きさが必要ですか。
- 少なくとも 512 x 512 の正方形で、マークの周囲に少し余白があるものが向いています。これより小さいと大きなサイズで拡大され、ぼやけて見えます。
- favicon.ico ファイルはまだ必要ですか。
- 現在のブラウザには不要です。いずれも link タグで宣言された PNG アイコンを読みます。ごく古いソフトがまだ /favicon.ico を探すことはあるので、すでにある場合は残しておいても害はありません。