ファビコン作成 — favicon.ico とPNGアイコンを無料生成
ブラウザーで favicon.ico、各サイズのPNGアイコン、manifest、HTMLコードを作成
ブラウザー内で処理・アップロード不要
1〜2文字がいちばん見やすいです。最大4文字まで入力できます。
site.webmanifest の name に入ります。
どんなツール？
ファビコンは、ブラウザーのタブやブックマーク、スマホのホーム画面に表示される小さなアイコンです。このツールは、ロゴ画像や数文字のテキスト、絵文字1つから必要なサイズをすべて作り、あわせて使うHTMLタグとウェブアプリマニフェストも用意します。画像はブラウザーの中だけで処理されます。
使い方
- 作り方を選びます。文字・絵文字からではテキスト・フォント・背景を選べ、画像からではロゴのファイルを使います。
- 画像の場合は、正方形にする方法（中央を切り抜くか、余白をつけるか）と、背景を透明にするかどうかを決めます。形は四角・角丸四角・円から選べます。
- 必要に応じてサイト名、短い名前、テーマカラーを入力します。これらは site.webmanifest と HTML コードに入ります。
- サイズごとのプレビューを確認し、1つずつダウンロードするか**すべてダウンロード（ZIP）**を押します。
- ファイルをサイトのルートにアップロードし、HTML の
<head>に入れるコードを head に貼り付けます。
作成されるファイルと仕様
| ファイル | サイズ | 用途 |
|---|---|---|
| favicon.ico | 16, 32, 48 | ブラウザーの標準アイコン、古い環境 |
| favicon-16x16.png、favicon-32x32.png | 16, 32 | ブラウザーのタブ |
| favicon-48x48.png | 48 | デスクトップのショートカット |
| apple-touch-icon.png | 180 | iOS のホーム画面（端まで塗りつぶした不透明な正方形） |
| android-chrome-192x192.png、android-chrome-512x512.png | 192, 512 | Android、PWA |
| android-chrome-maskable-512x512.png（任意） | 512 | Android アダプティブアイコン：絵柄を中央のセーフゾーンに収め、背景は端まで塗りつぶし |
- マスター画像：まず512pxの正方形を描き、すべてのサイズをそこから作ります。小さいサイズへは半分ずつ段階的に縮小するので、一気に縮めるよりも輪郭がきれいに残ります。
- ICOの構成：6バイトのヘッダー、画像ごとに16バイトのディレクトリエントリー、続いてPNGデータです。
- 文字の収め方：文字の幅はアイコンの約78%以内、文字サイズは72%以内に収めます。
- 文字色：背景に合わせて読みやすい黒か白を自動で選びます。もちろん変更もできます。
コード例
<link rel="icon" href="/favicon.ico" sizes="48x48">
<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">よくある質問
画像はアップロードされますか？
いいえ。サイズ変更もICOファイルの作成もすべてブラウザーの中で行われ、結果はお使いの端末にダウンロードされるだけです。
どんなファイルが作られますか？
favicon-16x16.png、favicon-32x32.png、favicon-48x48.png、apple-touch-icon.png（180）、android-chrome-192x192.png、android-chrome-512x512.png と、16・32・48を含む favicon.ico です。site.webmanifest と HTML の link タグも付いていて、すべてを1つのZIPでダウンロードできます。
favicon.ico の中身は何ですか？
16・32・48ピクセルの画像が、PNGデータとしてICOコンテナに格納されています。この構成は現在のブラウザーと、Vista以降のWindowsで読み込めます。ICOのヘッダーとディレクトリはこのツールが直接書き込み、テストでマジックバイト（00 00 01 00）とエントリー数を確認しています。
正方形でない画像はどうなりますか？
ファビコンは正方形なので、初期設定では中央から最大の正方形を切り抜きます。切り抜くとロゴが欠けてしまう場合は「全体を入れて余白をつける」を選ぶと、縦横比を保ったまま余った部分が透明になります。
文字や絵文字を使うときの注意点は？
16ピクセルでは、大きめの1〜2文字しか読み取れません。絵文字はプラットフォームごとに見た目が違うため、お使いの端末が描く絵柄がアイコンになります。フォントも端末のものを使うので、一部の文字はパソコンによって見た目が少し変わることがあります。
ファイルはどこに置けばいいですか？
サイトのルートにアップロードし、link タグを HTML の head に貼り付けてください。別のフォルダーに置く場合はコード内のパスを変更します。ブラウザーはファビコンを長くキャッシュするので、変更がすぐ反映されないときはキャッシュを削除してください。
