ファビコン生成
1枚の画像から、サイトに必要な全サイズを
ブラウザ内で処理
元画像
結果
生成されたアイコン
まだ生成していません
画像をドロップして生成を押すと、ここにアイコンが表示されます。
ZIP にはアイコン画像、site.webmanifest、HTML スニペットが含まれます。
ファビコンはもう1つのファイルでは済みません。ブラウザは16pxと32px、iOS は180px、Android は192pxと512pxを求め、それぞれ決まった方法で参照します。正方形の画像を1枚アップロードすれば、一式と対応するマークアップが手に入ります。
使い方
- 1 正方形の画像をドロップします。512px 以上が理想です。
- 2 初期状態では中央を正方形に切り抜きます。全体を押し込みたい場合はオフにしてください。
- 3 生成を押します。
- 4 ZIP をダウンロードし、HTML スニペットをページの head に貼り付けます。
よくある質問
元画像はどのくらいのサイズが必要ですか。
512×512 以上の正方形です。16px 版は縮小して作られるため、小さい画像や長方形の画像ではぼやけたアイコンになります。細かい描き込みより、シンプルで太い形のほうが縮小に耐えます。
favicon.ico は今も必要ですか。
ほとんど不要です。現行のブラウザは link タグから PNG アイコンを読みます。非常に古い Internet Explorer に対応する必要がある場合や、サイトのルートに慣習的に置かれることを前提としたツールがある場合だけ残してください。
site.webmanifest は何のためのものですか。
ユーザーがサイトをホーム画面に追加したとき、Android と Chrome がどのアイコンを使うかを伝えるファイルです。アプリ名やテーマカラーも含まれます。これがないと、Android はページのスクリーンショットを使ってしまいます。