このツールについて
ファビコン生成ツールは、文字、絵文字、ロゴから、モダンな Web サイトに必要なすべてのアイコンを作成します。各サイズでアイコンを描画して favicon.ico にまとめ、Web アプリマニフェストを書き出し、ページの <head> に貼り付ける <link> タグも用意します。すべてを 1 つの ZIP でダウンロードできます。
きれいなアイコンを最も手早く作るにはテキストから始めましょう。1〜3 文字か絵文字を入力し、色、フォント、形（正方形、角丸、円）を選びます。テキストのアイコンには拡大縮小できる favicon.svg も付くので、どのサイズでも高解像度の画面でもくっきり表示されます。
使い方
- 作成元として テキスト または 画像 を選びます。画像の場合は 画像を選択… を押して、正方形の PNG、SVG、JPG を選びます。
- 形 を設定し、色付きのタイルにアイコンを載せる場合は 背景を塗りつぶす をオンに、透明のままにする場合はオフにします。
- サイト名を入力します。スマホのホーム画面にサイトを追加したとき、アイコンの下に表示される名前で、
site.webmanifest（Android）とapple-mobile-web-app-titleタグ（iOS）に書き込まれます。続けて、ファイルをアップロードする アイコンのフォルダー（通常は/）を入力します。 - プレビューを確認します。16 px のアイコンがブラウザのタブに表示されるものです。
- ZIP をダウンロード を押し、ファイルをサイトにアップロードして、HTML を
<head>に貼り付けます。
例
既定の設定では次のタグが生成されます：
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="apple-mobile-web-app-title" content="My Site">ヒント
- ブラウザはファビコンを強力にキャッシュします。アイコンを差し替えたら、プライベートウィンドウでページを開いて変更を確認してください。
- iOS は Apple タッチアイコンの透明部分を無視して黒で塗りつぶすため、ホーム画面のアイコンをきれいに見せるには背景を塗りつぶしたままにしておきましょう。
よくある質問
› どのファイルが作成されますか？
favicon.ico（16、32、48 px）、16・32・48 px の PNG アイコン、180 px の Apple タッチアイコン、192・512 px の Android 用アイコン、site.webmanifest、HTML タグ、そしてテキストから作成した場合は favicon.svg です。
› ロゴはどこかにアップロードされますか？
いいえ。画像はブラウザ内で canvas を使って読み込み・リサイズされ、ZIP も端末上で作成されます。
› どんな画像が最適ですか？
背景が透明な、512 × 512 px 以上の正方形の PNG または SVG です。シンプルで太い形は 16 px でも判別できますが、細かいディテールや細い文字はつぶれてしまいます。
› favicon.ico は今でも必要ですか？
はい。古いブラウザや、/favicon.ico を直接リクエストするツールのために必要です。モダンブラウザは HTML 内の PNG や SVG のリンクを使います。