オタク道場 ツール
日本語

Favicon 作成ツール

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> 内に貼り付けます。

    使用例

    作成されるファイルと HTML

    入力
    logo.png（512×512、背景透過）
    出力
    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">

    Web サイトに必要なアイコン

    favicon.icoブラウザのタブ、ブックマーク、Google 検索結果に表示されるアイコン（Google は 48×48 以上を推奨）
    apple-touch-icon.pngiPhone / iPad の「ホーム画面に追加」で使われる 180×180 のアイコン。iOS は透過部分を黒で表示するため、常に背景色で塗りつぶします
    android-chrome-192 / 512Android のホーム画面や PWA のインストール用アイコン。site.webmanifest で指定します

    仕様とポイント

    出力ファイル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 タグ
    プライバシーブラウザ内で作成し、画像はアップロードされません

    よくある質問

    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 も一緒に用意しておくのがおすすめです。