テキスト・絵文字からファビコンを瞬時に作成
Webサイト用のFavicon(ブラウザタブに表示される小さなアイコン)を生成する無料ツールです。テキスト・絵文字からFaviconを作成、または画像をアップロードしてFavicon用にリサイズできます。
一般的なFaviconサイズは16×16px、32×32px、48×48pxですが、Apple Touch Iconには180×180px、Android Chromeには192×192pxが必要です。このツールでは複数サイズを一括生成できます。
従来のICO形式に加え、現在はPNG形式のFaviconも広くサポートされています。PNG形式の方がファイルサイズが小さく、透過にも対応しています。
ファビコン(favicon=favorite icon)とは、ブラウザのタブやブックマーク、閲覧履歴、検索結果、スマートフォンのホーム画面などに表示される、サイトを象徴する小さなアイコンです。複数のタブを開いているときにサイトを一目で見分けられるようにしたり、ブランドの印象を高めたりする役割を持ちます。設置されていないサイトは地球儀や白紙のアイコンで表示されるため、サイトの信頼感やクリック率にも影響します。
ファビコンはHTMLの<head>内に<link rel="icon">を記述して設置します。たとえば32pxのPNGを使う場合は<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">のように書きます。iPhoneやiPadのホーム画面に追加した際のアイコンには<link rel="apple-touch-icon" href="/apple-touch-icon.png">を、AndroidやPWA向けにはmanifest(manifest.json)でiconsを指定します。1つだけ用意するなら32×32pxが無難ですが、環境ごとに最適なサイズを複数揃えるとどの端末でも鮮明に表示されます。
| サイズ | 主な用途 | 設置タグ・指定方法 | 形式の目安 |
|---|---|---|---|
| 16×16 | ブラウザタブ・アドレスバー | link rel="icon" | PNG / ICO |
| 32×32 | タスクバー・高解像度タブ | link rel="icon" | PNG / ICO |
| 48×48 | Windowsサイトアイコン | link rel="icon" | PNG / ICO |
| 180×180 | iPhone/iPadホーム画面 | link rel="apple-touch-icon" | PNG |
| 192×192 | Androidホーム画面・PWA | manifest.json icons | PNG |
| 512×512 | PWAスプラッシュ・ストア | manifest.json icons | PNG |
本ツールが出力するのはPNG形式です。プレビュー下のボタンから128px・32px・16pxのPNGをそれぞれダウンロードできます。Apple Touch Icon(180px)やPWA用(192px・512px)が必要な場合も、文字色・背景色・形状を同じ設定にしたまま大きめサイズで書き出せば、用途に合わせたアイコンを揃えられます。SVG形式のファビコンを使いたい場合は別途SVGを用意して<link rel="icon" type="image/svg+xml" href="/favicon.svg">と指定します。