Which favicon sizes do I actually need?

A favicon.ico containing 16, 32 and 48 pixel images, a 180 pixel apple-touch-icon for iOS, and 192 and 512 pixel PNGs referenced from a web app manifest cover every current browser and platform.

Why is my old favicon still showing after I replaced it?

Browsers cache favicons aggressively and a normal reload does not clear them. Change the file name or append a query string such as ?v=2 to the link href.

Can I create a favicon without a logo image?

Yes. Text mode renders one or two characters on a coloured background with optional rounded corners, which is often more legible at 16 pixels than a shrunken logo.

Is my image uploaded to a server?

No. The image is drawn on an HTML canvas in your browser and the ICO file is assembled in memory. No image data is transmitted to any external server.

ファビコン作成ツール (画像・文字からICO/PNG生成) | Favicon Generator Online Free

How to Use the Favicon Generator

A favicon is the small icon browsers show in tabs, bookmarks and history. Modern sites need more than one file: a legacy favicon.ico for maximum compatibility, PNGs at 16 and 32 pixels for tabs, a 180-pixel apple-touch-icon for iOS home screens, and 192/512-pixel PNGs referenced from a web app manifest. This generator produces all of them from a single source.

Choose whether to build the icon from text or from an image. In text mode, type one or two characters and pick a background and text colour — this is the fastest way to get a clean monogram for a side project. In image mode, upload a logo; the centre square is cropped and resized with high-quality smoothing. Every size is rendered immediately so you can judge whether the design survives at 16 pixels before committing.

About the .ico File

The downloadable favicon.ico packs three PNG images (16, 32 and 48 pixels) into a single ICO container. Every browser in current use, and Windows from Vista onward, reads PNG-compressed ICO files, so this is both smaller and sharper than the old BMP-based format. Bundling several sizes lets the operating system pick the right one instead of scaling a single bitmap badly.

Designing for 16 Pixels

A favicon is legible only if it works at the smallest size. Full wordmarks, thin strokes and fine gradients all disappear at 16 pixels. Use a single letter or a bold simplified shape, keep contrast between foreground and background high, and check the 16-pixel preview above rather than judging from the 512-pixel version.

ファビコン作成ツールの使い方

「文字から作る」を選ぶと、1〜2文字と背景色・文字色を指定するだけでモノグラム型のファビコンができます。「画像から作る」ではロゴ画像を読み込み、中央を正方形に切り出して各サイズに縮小します。設定を変えると即座に全サイズが再生成されるので、16pxで潰れていないかをその場で確認できます。

「favicon.ico をダウンロード」で16/32/48pxを1つにまとめたICOファイルを取得できます。各PNGは個別にダウンロードでき、ファイル名はそのまま使える名前（apple-touch-icon.png など）になっています。画像処理はすべてブラウザ内のCanvasで完結し、元画像が外部に送信されることはありません。

よくある落とし穴と対処 / Common Pitfalls

落とし穴 / Pitfall	問題 / Problem	対処 / Fix
ロゴをそのまま縮小する Shrinking a full logo	16pxでは文字も細線も潰れて何か分からなくなる Wordmarks vanish at 16px	1文字またはシンボルだけに単純化する Simplify to one letter or a symbol
ファビコンが更新されない The old favicon keeps showing	ブラウザのファビコンキャッシュは強く、リロードでは消えない Favicon caching is aggressive	ファイル名を変える、もしくは ?v=2 を付けて参照する Rename the file or add a query string
透過PNGを使う Transparent background	ダークモードのタブでは背景が透けて視認できなくなることがある It disappears on dark tab bars	背景色を敷くか、明暗どちらでも見える色を選ぶ Add a background or pick a safe colour
apple-touch-icon を用意しない Missing apple-touch-icon	iOSでホーム画面に追加するとページのスクリーンショットが使われる iOS falls back to a page screenshot	180pxのPNGを用意して apple-touch-icon で参照する Ship a 180px PNG
ルート直下に置かない Not serving from the site root	link要素がない環境では /favicon.ico が直接探されるため404になる Some clients request /favicon.ico directly	link要素を書いたうえで、ルートにも favicon.ico を配置する Place favicon.ico at the root as well

サイズごとの用途 / Size Reference

 16×16   ブラウザのタブ・アドレスバー
 32×32   ブックマーク、Windowsのタスクバー
 48×48   Windows のサイト アイコン
180×180  apple-touch-icon (iOS ホーム画面)
192×192  Android ホーム画面 (manifest)
512×512  PWA のスプラッシュ画面 (manifest)

favicon.ico には 16 / 32 / 48 を同梱すると過不足がありません。

manifest の例 / Web App Manifest

{
  "icons": [
    { "src": "/favicon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/favicon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Why browser-only?

Logos are brand assets, and many favicon services ask you to upload one to their servers. This generator draws every size on a local canvas and assembles the ICO container in memory: nothing is uploaded, nothing is logged, and it works offline. Open the DevTools Network tab while generating and you will see zero requests.

ロゴはブランド資産そのものです。本ツールは Canvas での描画も ICO の組み立てもブラウザ内で完結し、外部送信は一切ありません。

Favicon Generator