faviconタグ生成ツール｜ICO・PNG・SVG・Apple Touch Icon対応

このツールでできること

用意済みのICO、PNG、SVG faviconとApple Touch Iconについて、HTMLのhead内へ貼り付けるlinkタグをまとめて生成できます。相対パス、ルート相対パス、絶対URLを入力でき、複数のアイコンは画面上の設定順に出力します。

使い方

1. アイコンの種類を選び、ファイルパスまたはURLを入力します。
2. PNG faviconまたはApple Touch Iconでは、画像の幅と高さを入力します。
3. 複数ファイルがある場合は「アイコンを追加」を押して設定を増やします。
4. 「タグを生成」を押し、生成結果をコピーしてHTMLのhead内へ貼り付けます。

生成後に種類、パス、サイズ、設定行を変更すると、古い結果は消去されます。Clipboard APIで自動コピーできない場合は、結果欄から手動でコピーできます。

入力例・出力例

ICOの/favicon.ico、32×32のPNG、SVG、180×180のApple Touch Iconをこの順に設定すると、次の4行を生成します。

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

パス/icon.png?a=1&label="main"を32×32のPNGとして入力した場合、HTML属性値用の特殊文字を1回だけエスケープします。

<link rel="icon" type="image/png" sizes="32x32" href="/icon.png?a=1&amp;label=&quot;main&quot;">

よくある利用場面

• 複数サイズ・形式のfaviconタグを入力順にまとめるとき
• SVG faviconとApple Touch Iconを含むhead用コードを作るとき
• 既に配置したアイコンファイルのパスから、貼り付け用タグを作るとき

処理仕様

• ICOはrel="icon" type="image/x-icon"、PNGはrel="icon" type="image/png"、SVGはrel="icon" type="image/svg+xml" sizes="any"、Apple Touch Iconはrel="apple-touch-icon"として出力します。
• PNGとApple Touch Iconの幅・高さは、半角数字による1～4096の整数が必須です。幅と高さが異なる設定も受け付けます。ICOではsizes属性を省略し、SVGでは指定サイズではなくsizes="any"を出力します。
• パスの生の入力値に改行、タブ、NULL等の制御文字がある場合は拒否し、その後で前後の空白を除きます。URLの構文や到達可否、拡張子と種類の一致、実際のMIMEタイプや画像寸法は検査せず、入力表記を正規化しません。
• 同じ種類・サイズ・パスの設定は重複として拒否します。同じパスでも種類またはサイズが異なれば生成できます。
• hrefへ入れる直前に&、"、<、>をHTML属性値用に1回だけエスケープします。入力済みの&は復号せず、出力では&になります。
• タグは設定順にLFで区切り、末尾改行を付けません。どこか1件でも空欄、制御文字、不正サイズ、重複があれば部分的なタグは残さず、最初の該当欄へ移動します。

画像の生成・解析・表示確認、Web App Manifest、mask-icon、browserconfig.xml、テーマカラーの生成には対応していません。生成したタグを配置した後のブラウザやOSでの採用結果も判定しません。

入力データについて

外部ライブラリを使わず、入力内容とタグ生成をブラウザ内だけで処理します。入力したファイルパスやURLをToolRollのサーバーや外部サービスへ送信せず、Cookie、Web Storage、IndexedDBにも保存しません。Clipboard APIは「結果をコピー」を押したときだけ、生成結果のコピーに使用します。