# Favicon 作成ツール

URL: https://tools.otaku-dojo.com/ja/favicon-generator
Updated: 2026-10-04

Favicon 作成ツールは、1 枚の画像（正方形の PNG または SVG 推奨）から Web サイトに必要なアイコンをまとめて作成します。16・32・48 px を含む favicon.ico、16・32 px の PNG、180 px の Apple Touch Icon、192・512 px の Android / PWA 用アイコン、site.webmanifest、そして <head> に貼り付ける HTML タグを出力します。すべてブラウザ内で作成され、画像はアップロードされません。

## Favicon 作成ツールの使い方

1. サイト名（site.webmanifest に記載）を入力し、必要に応じて背景色と余白を選びます。
2. ロゴ画像を点線の枠にドロップします。512×512 以上の正方形の PNG か SVG がおすすめです。
3. 「すべてダウンロード」でファイルを保存し、サイトのルートフォルダに置きます。
4. 下の HTML タグをコピーして、ページの <head> 内に貼り付けます。

## 仕様とポイント

- **出力ファイル**: favicon.ico（16/32/48）、16 / 32 PNG、Apple Touch Icon 180、Android 192 / 512、site.webmanifest
- **入力形式**: PNG、SVG、JPG、WebP（512×512 以上の正方形を推奨）
- **正方形でない画像**: 中央に配置して透過の余白を追加
- **オプション**: 背景色、余白 10%、サイト名
- **付属**: 貼り付け用の <head> HTML タグ
- **プライバシー**: ブラウザ内で作成し、画像はアップロードされません

## 使用例: 作成されるファイルと HTML

```text
logo.png（512×512、背景透過）
```

→

```html
favicon.ico、favicon-16x16.png、favicon-32x32.png、
apple-touch-icon.png、android-chrome-192x192.png、
android-chrome-512x512.png、site.webmanifest

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
```

## よくある質問

### favicon を変えたのに古いものが表示されます

ブラウザは favicon を長くキャッシュします。URL にバージョンを付ける（例：/favicon.ico?v=2）か、キャッシュを削除してから開き直してください。

### Google の検索結果に favicon は表示されますか？

トップページに <link rel="icon"> があり、48×48 以上で、Googlebot がクロールできれば表示されます。新しいアイコンが反映されるまで数日かかることがあります。

### Apple Touch Icon が背景色で塗りつぶされるのはなぜ？

iOS は透過部分を黒で表示するため、180×180 の Apple Touch Icon は選んだ背景色で必ず塗りつぶします。

### SVG を favicon にできますか？

最近のブラウザは SVG の favicon に対応していますが、Safari や一部の古いブラウザは非対応のため、このツールで作った favicon.ico と PNG も一緒に用意しておくのがおすすめです。