DevTools Japan トップへ

Favicon生成ツール

テキスト・絵文字からファビコンを瞬時に作成

Favicon生成ツールの使い方

Webサイト用のFavicon(ブラウザタブに表示される小さなアイコン)を生成する無料ツールです。テキスト・絵文字からFaviconを作成、または画像をアップロードしてFavicon用にリサイズできます。

Faviconのサイズ

一般的なFaviconサイズは16×16px、32×32px、48×48pxですが、Apple Touch Iconには180×180px、Android Chromeには192×192pxが必要です。このツールでは複数サイズを一括生成できます。

ICO形式とPNG形式

従来の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×48Windowsサイトアイコンlink rel="icon"PNG / ICO
180×180iPhone/iPadホーム画面link rel="apple-touch-icon"PNG
192×192Androidホーム画面・PWAmanifest.json iconsPNG
512×512PWAスプラッシュ・ストアmanifest.json iconsPNG

本ツールが出力するのはPNG形式です。プレビュー下のボタンから128px・32px・16pxのPNGをそれぞれダウンロードできます。Apple Touch Icon(180px)やPWA用(192px・512px)が必要な場合も、文字色・背景色・形状を同じ設定にしたまま大きめサイズで書き出せば、用途に合わせたアイコンを揃えられます。SVG形式のファビコンを使いたい場合は別途SVGを用意して<link rel="icon" type="image/svg+xml" href="/favicon.svg">と指定します。

よくある質問

ファビコン(favicon)とは何ですか?
ファビコンとは、ブラウザのタブやブックマーク、履歴一覧、スマホのホーム画面などに表示されるサイトのアイコンです。サイトの目印となり、複数タブを開いたときに見分けやすくします。HTMLの「link rel=icon」でページに設置します。
ファビコンの推奨サイズは何pxですか?
タブ表示用は16×16px、高解像度ディスプレイ向けに32×32pxを用意します。iPhoneのホーム画面用(apple-touch-icon)は180×180px、AndroidやPWA向けには192×192pxと512×512pxが推奨です。複数サイズを揃えるとあらゆる環境で綺麗に表示されます。
絵文字や文字からファビコンを作れますか?
はい。このツールは入力欄に文字(1〜2文字)または絵文字を入れるだけでファビコンを生成します。クイック絵文字から選ぶこともでき、背景色・文字色・形状(角丸・丸・四角)・フォントサイズを自由にカスタマイズできます。画像素材は不要です。
生成したファビコンのファイル形式は何ですか?
このツールはPNG形式で出力します。128px・32px・16pxのPNGをそれぞれダウンロードできます。PNGは透過に対応しファイルサイズも小さく、現在の主要ブラウザがファビコンとしてサポートしているため、そのままサイトに設置できます。
作成したファビコンのHTMLへの設置方法は?
ダウンロードしたPNGをサイトに置き、headタグ内に「link rel=icon type=image/png href=/favicon-32.png」のように記述します。Appleのホーム画面用は「link rel=apple-touch-icon href=...」を追加します。生成処理はすべてブラウザ内で完結し、サーバーへは送信されません。

関連ツール

画像圧縮ツール アスペクト比計算ツール カラーコード変換ツール