ファビコンを生成

SVG・PNG・JPGから完全なファビコン一式を作成

SVG、PNG、JPGのロゴ1点から、favicon.ico、ブラウザ用PNG、Apple Touchアイコン、Android Chromeアイコン、site.webmanifest、貼り付け用HTMLタグを作成します。すべてブラウザ内で処理し、完全なパッケージをZIPでダウンロードできます。

ここにファイルをドロップ

新規ファイルの既定値を編集しています

背景

透過単色

角丸

カスタム（px）

絵柄余白（%）拡大率（%）

水平方向の配置

垂直方向の配置

余白は絵柄を内側に寄せ、拡大率は絵柄を拡大し、配置は絵柄が枠いっぱいにならないときの位置を決めます。背景と角丸の形は常にアイコン全体に広がります。

Web マニフェストアプリ名短縮名

ホーム画面やランチャーで正式名称が収まらないときに、アイコンの下に表示されます。12 文字程度が目安です。

最適化SVG を最適化

出力を生成する前に、安全な最適化プリセットを実行します。

ロゴを追加すると、各ファビコンサイズでのプレビューが表示されます。

出力

head-tags.html

<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

index.html 以外のファイルを、サイトを配信しているフォルダに置き、これらのタグを全ページの head に貼り付けてください。

ファイルがありません。上にドロップするか、「ファイルを選択」を押してください。

ファビコンとは

ファビコンは、ブラウザがページのタイトルの横に表示する小さなアイコンです。タブ、ブックマーク、履歴、一部の検索エンジンの検索結果に現れます。もとはサイトのルートに置く 16 × 16 の favicon.ico 1 つだけでした。今では同じ役割を、さまざまなサイズのファイルの集まりが担っています。ブラウザのタブ、ホーム画面のショートカット、インストールの案内では、アイコンが描かれる大きさが大きく異なるためです。

1 つのファイルではなくファビコン一式が必要な理由

favicon.ico が 1 つあれば今も動きますが、それだけでは足りなくなりました。ブラウザのタブは .ico の中から 16 px か 32 px の項目を読み、Safari はページを Home Screen に追加するときに 180 px の apple-touch-icon を求め、Android Chrome はインストールの案内とスプラッシュ画面のために Web マニフェストから 192 px と 512 px の PNG を読みます。これらを 1 つずつ書き出すと、6 回の書き出しと、6 回ぶんの切り出しがずれる余地と、手書きのマニフェストを抱えることになります。1 つの元ファイルからまとめて生成すれば、どのサイズも同じ絵柄のまま、ドロップ 1 回で済みます。

ファビコン一式をオンラインで生成する方法

1
ロゴをドロップするか「ファイルを選択」を押してキューに追加します。SVG、PNG、JPG、WebP、GIF、BMP、AVIF、TIFF に対応し、一度に最大 40 件です。
2
背景、角丸、余白、拡大率、配置を指定し、マニフェストに入れるアプリ名と短縮名を入力します。設定を変えるたびに、すべてのサイズが描き直されます。
3
「すべて保存」を押すと favicon-package.zip をダウンロードできます。あとは「HTML タグ」タブにある 4 つの link タグを、全ページの head に貼り付けてください。

プライバシー：ファイルはブラウザから出ません

変換は、JavaScript および WebAssembly を使用してブラウザーでローカルに実行されます。ファイルのアップロードやサーバー側の変換がないため、追加したファイルはデバイス上に残ります。

ローカル処理は、機密ロゴ、内部文書、未公開のクライアントアートワークを保護するのに役立ちます。ページと変換コードは使用中にキャッシュされるため、すでに開いているツールはネットワーク接続がなくても引き続き動作できます。

よくある質問

どのファイルが手に入り、どこに置けばよいですか？

favicon.ico（1 つのファイルに 16、32、48 px を収録）、favicon-16x16.png、favicon-32x32.png、apple-touch-icon.png、android-chrome-192x192.png、android-chrome-512x512.png、site.webmanifest、そしてタグを収めた index.html です。index.html 以外をすべて、サイトを配信しているフォルダにコピーし、4 つの link タグを全ページの head に貼り付けてください。

SVG ではなく PNG や JPG のロゴでも使えますか？

はい。SVG、PNG、JPG、WebP、GIF、BMP、AVIF、TIFF に対応しています。それでも元ファイルは SVG のほうが有利です。どのサイズもベクターから描かれ、再サンプリングにならないためです。512 px より小さいラスターのロゴは、大きいアイコンでは拡大されるためぼやけます。その場合はファイルの行に警告が表示されます。

PNG のアイコンを用意しても favicon.ico は必要ですか？

残しておいてください。どのタグも行き先を示していないときに、ブラウザやクローラーがサイトのルートに要求するのがこのファイルで、1 つのファイルに複数のサイズを収められるのもこれだけです。PNG のほうを好むブラウザは PNG の項目がまかない、Android のインストールの案内はマニフェストがまかないます。