セオツールズ

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

画像・文字・絵文字からファビコンを作成します。favicon.ico（ico 変換）・apple-touch-icon・PNG・SVG・manifest を一括で書き出し、タブ・Google 検索・iPhone での見え方を確認できます。サイズ（16・32・48・180・192・512px）もまとめて生成。処理はブラウザ内で完結します。

1. アイコンを作る

2. 調整する

形
背景

3. プレビュー

画像を選ぶとプレビューが表示されます。

  • 補足: icon.svg の文字は閲覧者の環境にあるフォントで描画されます。指定フォントがない端末では別のフォントになります

4. サイト情報（manifest・タグ用）

5. ダウンロード

  • JSONfavicon.ico16・32・48px を 1 ファイルに収録
  • JSONicon.svgブラウザのタブ用(Google 検索では使われません)
  • JSONicon-192.png192x192(Google 検索向けの 48px 超 PNG・Android 用)
  • JSONicon-512.png512x512(PWA 用)
  • JSONicon-512-maskable.png512x512 maskable(余白つき・PWA 用)
  • JSONapple-touch-icon.png180x180・不透過(iPhone のホーム画面用)
  • JSONsite.webmanifestWeb アプリマニフェスト

<head> に入れるタグ

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/icon-192.png" type="image/png" sizes="192x192">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Google 検索の要件チェック

  • 対応済み: 48px より大きいラスター画像(icon-192.png)を rel="icon" で指定しています
  • 対応済み: 形式は ICO と PNG(Google が対応する形式)。正方形で書き出します
  • 注意: icon.svg は Google 検索の favicon には使われません(SVG は非対応)。ブラウザのタブ用です
  • 公開後に確認: favicon の URL は固定し、ホスト名ごとに 1 つにしてください(サブドメインごとに別設定)
  • 公開後に確認: Googlebot と Googlebot-Image が favicon・ホームページをクロールできるよう、robots.txt でブロックしないでください

Google 検索セントラル: favicon の定義

あわせて使いたいツール

ファビコンに関する参考記事