無料WEBツールdigtoooooools

by 大阪のホームページ制作会社digrart

ファビコン作成ツール｜favicon変換ジェネレーター

🎯
最新6点セット

2026年推奨のミニマル構成

🌙
ダークモード対応

CSS内蔵SVGファビコン

📱
PWA・iOS・Android

全プラットフォーム対応

⚡
ブラウザ完結

画像はサーバーに送信しない

📁

画像をドラッグ＆ドロップ
または

推奨: 512×512px以上の正方形PNG / SVG

「最新ミニマルセット」とは
かつてのファビコン生成では16種類以上のサイズを用意するのが一般的でしたが、2024年以降は研究が進み「SVG・ICO・apple-touch-icon・PWAアイコン2種・manifest」の6ファイルで全デバイスをカバーできることが分かっています。Evil Martiansや主要ブラウザベンダーが推奨するこのミニマルアプローチにより、ファイル管理が圧倒的にシンプルになります。
Google検索でファビコンが表示される条件
Googleが検索結果のサイト名横にファビコンを表示するには、48pxの倍数サイズ（48/96/144px）かつ100KB以下である必要があります。また、ホームページ（ドメインルート）でのみ表示されるため、内部ページのファビコンはインデックスの対象外です。
HTMLに記述する4行だけで全デバイス対応
現代的なファビコン実装は <link rel="icon" href="/favicon.svg" type="image/svg+xml">（SVGファビコン）・<link rel="icon" href="/favicon.ico" sizes="48x48">（ICOフォールバック）・<link rel="apple-touch-icon" href="/apple-touch-icon.png">・<link rel="manifest" href="/manifest.webmanifest"> の4行で完結します。
なぜSVGファビコンが「新標準」なのか
SVGはベクター形式のため、Retinaディスプレイや4Kモニターでも完璧にシャープなファビコンが表示されます。加えて、SVGファイル内にCSSの @media (prefers-color-scheme: dark) を埋め込むことで、ダークモード時に自動的に見た目を変化させることができます。これはPNGやICOでは実現できない、SVGファビコン固有の大きな利点です。
対応ブラウザ
SVGファビコンはChrome 80・Firefox 41・Edge 80で対応しています。SafariはSVGアイコンのタブ表示をサポートしておらず、ICOをフォールバックとして必ず一緒に配置する必要があります。そのため「SVG + ICO」の両方を設定するのが2026年の正解です。
ダークモード自動対応のSVGコード例
<svg xmlns="..."><style>@media (prefers-color-scheme:dark){.bg{fill:#1e1e2e}}</style><rect class="bg" fill="none"/><image href="..."/></svg> のようにインラインCSSで背景色を制御します。ライトモードでは透明、ダークモードでは指定した背景色が自動で適用されます。
apple-touch-iconとは
iPhoneやiPadでWebサイトをホーム画面に追加したときに表示されるアイコン画像です。 <link rel="apple-touch-icon" href="/apple-touch-icon.png"> で指定します。サイズは180×180pxが推奨で、これひとつで異なるデバイスサイズに対応できます。
透過禁止の理由
apple-touch-iconに透過PNGを指定すると、iOSが透過部分に自動で黒背景を適用してしまいます。ロゴの周囲が黒くなって見栄えが悪くなるため、apple-touch-icon専用の背景色を指定してPNG画像を合成することが強く推奨されています。
角丸はOSが自動適用する
Appleは画像にiOS風の角丸マスクをOSレベルで自動的に適用するため、画像自体に角丸を入れる必要はありません。ただし、ロゴや重要な要素がマスクにかかってしまわないよう、四隅に10〜20%程度のパディングを設けることが推奨されています（「セーフゾーン」と呼びます）。
manifest.webmanifestとは
PWA（プログレッシブウェブアプリ）の基本情報を定義するJSONファイルです。アプリ名・テーマカラー・表示モード・アイコンの参照先などを記述します。HTMLから <link rel="manifest" href="/manifest.webmanifest"> で参照します。拡張子は .json でも動作しますが、.webmanifest が仕様上の正式な拡張子です。
必須アイコンサイズ
192×192px はAndroid端末へのインストール時のホーム画面アイコンに使われます。512×512px はPWAのスプラッシュスクリーン（起動時の全画面表示）に使われます。この2サイズが揃っていない場合、PWAとしてのインストール体験が損なわれます。
Maskable（マスカブル）アイコンとは
Androidでは多様なアイコン形状（丸・四角・ドロップ型など）がランチャーによって適用されます。"purpose": "maskable" で指定したアイコンは、OSがトリミングして表示する前提で設計されたもので、セーフゾーンを80%以内に収める必要があります。
ロゴ・アイコンは機密データ
企業のロゴやブランドアイコンは、まだリリースされていない新プロダクトや新ブランドを含む場合もあります。外部サーバーに画像をアップロードするタイプの生成ツールでは、その画像が一時的にでも外部に送信・保存されるリスクがあります。当ツールはアップロードされた画像を一切サーバーに送信しません。
Canvas APIによる処理の仕組み
すべての画像処理はブラウザ内の FileReader API・Canvas API・Blob API によって完結します。FileReader でローカルファイルを読み込み、Canvas でリサイズ・合成処理を行い、Blob 形式でダウンロードします。この一連の処理においてネットワーク通信はゼロです。
ICOファイルのバイナリ構築
ICOファイルは複数サイズのPNGをまとめたバイナリ形式ですが、当ツールではJavaScriptの DataView と ArrayBuffer を使ってICOのバイナリヘッダを手動で構築し、Canvasからエンコードした各サイズのPNGを埋め込んでいます。サーバーサイドのImageMagickや外部変換サービスは使用していません。
画像処理・テキスト解析
WEB開発ツール
SEO対策
ネットワーク
セキュリティ
ビジネス
SNS・エンタメ
生活