ファビコンジェネレーター

ファビコンジェネレーターとは？

文字または絵文字（好きな色と形で）か 画像 から、Web サイト用のファビコン一式を生成します。マルチサイズの favicon.ico（16、32、48 px）、16、32、48、180（Apple タッチアイコン）、192、512 px の PNG アイコン、site.webmanifest、<head> に貼り付ける HTML の <link> タグが得られます。

ファビコンジェネレーターの使い方

1. ソース を選びます：テキスト／絵文字、または 画像（正方形の画像が最適です）。
2. 形、背景色、文字色、マニフェスト用の アプリ名 を設定します。
3. favicon.ico をダウンロード をクリックし、プレビューから必要な PNG ファイルをダウンロードします。
4. HTML for the <head> と site.webmanifest をコピーし、すべてのファイルをサイトのルートフォルダーに置きます。

例

Text "A", Rounded, Background #4f46e5

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

favicon.ico（16、32、48 px）と 6 つの PNG ファイルも一緒に得られます。

ファビコンジェネレーターを使うべき場面

新しい Web サイト、個人プロジェクト、社内ツール、ドキュメントサイトに使います。精細なロゴがある場合は、細かい部分が小さなサイズでは消えてしまうため、16 px と 32 px 用に簡略化したバージョンを作ってください。ダークモードに合わせて鮮明に表示されるアイコンが欲しい場合は、SVG ファビコンも併用してください。

ファビコンジェネレーターの仕組み

各サイズは別々のキャンバスに描画されます。形が背景色で塗りつぶされ、最大 3 文字が中央に置かれてアイコンのサイズに合わせて拡大縮小されるか、画像が中央で正方形に切り取られ、高品質のスムージングでリサイズされます。各キャンバスは PNG として書き出されます。.ico ファイルはバイト単位で組み立てられます。6 バイトの ICONDIR ヘッダー、サイズごとに 16 バイトのディレクトリエントリ（幅、高さ、32 bpp、データサイズ、オフセット）、その後ろに埋め込まれた PNG 画像という、現在のすべてのブラウザと Windows Vista 以降が対応する PNG-in-ICO 形式です。180 px の Apple タッチアイコンは、iOS が自分で角を丸めるため、常に正方形で不透明です。

一般的な使用例

• ✓ 個人プロジェクト用の文字や絵文字のファビコンを数秒で作る
• ✓ 正方形のロゴからすべてのサイズのアイコンを生成する
• ✓ ホーム画面へのインストール用に Apple タッチアイコンと Web マニフェストを追加する
• ✓ レガシーなブラウザ向けに、本物のマルチサイズの favicon.ico を作る

よくある質問

他のカテゴリを見る