Faviconジェネレーター

Faviconジェネレーターとは？

Webサイトのブラウザタブやブックマークに表示される小さなアイコン「Favicon」を、テキスト入力や手持ちの画像（PNG/SVG）から簡単に生成できるツールです。2026年のベストプラクティスに基づき、SVG（ダークモード対応）・PNG（Apple Touch Icon）・ICO（後方互換）の3形式＋PWA用manifestを一括出力します。

2026年のFaviconベストプラクティス

現在のモダンブラウザでは、以下の構成が推奨されています：

• favicon.svg — メインのファビコン。CSSメディアクエリでダークモード対応が可能
• apple-touch-icon.png — iOS Safari用。180×180pxのPNG
• favicon.ico — IE11やレガシーブラウザ用の後方互換。16・32・48pxのマルチサイズ対応
• manifest.webmanifest — PWA/Androidホーム画面用のアイコン定義

HTMLへの設置方法

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

FAQ

• Q. ダークモード対応とは？ — SVGファビコン内にCSSの@media (prefers-color-scheme: dark)を埋め込み、OSのダークモード設定に連動して色が切り替わります。
• Q. Google Fontsは使えますか？ — PNG/ICO生成時はブラウザに読み込まれたGoogle Fontsを使用します。SVGファビコンではフォント名を指定しますが、閲覧者の環境にフォントがない場合はシステムフォントにフォールバックします。
• Q. 自前のロゴ画像は使えますか？ — はい。「画像」モードに切り替えてPNGやSVGをアップロードするだけで、SVG <image> タグで埋め込んだダークモード対応のfavicon.svgを生成できます。ライト用・ダーク用の2枚を設定すると、OSのテーマに応じて自動で切り替わります。

ブラウザ完結で安全に使えます

本ツールはすべての処理をブラウザ内のCanvas APIとJavaScriptだけで完結しています。データが外部サーバーに送信されることは一切ありません。

その他のツール