テキスト Favicon 生成器

テキストを入力し、スタイルをカスタマイズして、あなた専用のFaviconを生成します。

テキスト

最良の結果のため、1〜2文字を推奨

フォント

フォントサイズ: 60px

テキスト色

背景色

クイックカラー選択

単色背景を使用

背景形状

プレビュー

テキストをアイコンに

任意のテキストを入力すると、さまざまなフォントとスタイルでプロフェッショナルなfaviconアイコンを自動生成します。

スタイルのカスタマイズ

フォント、色、背景形状、背景画像など豊富なカスタマイズオプションに対応します。

ライブプレビュー

WYSIWYGのライブプレビューで、パラメータ調整の結果を即座に確認できます。

Faviconとは？

Favicon（favorite iconの略）は、ブラウザのタブやブックマークなどに表示される小さなアイコンで、複数のタブやブックマークの中からあなたのサイトをすばやく見分けるのに役立ちます。

Faviconの使い方

ウェブサイトにFaviconを追加するには、次の手順を実行します：

当サイトのツールでFavicon一式を生成してZIPファイルとしてダウンロードします。
ダウンロードしたZIPを解凍し、すべてのファイルをウェブサイトのルートディレクトリに配置します。
HTMLの<head>セクションに適切な<link>タグを追加します。

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<link rel="manifest" href="/site.webmanifest">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/android-chrome-512x512.png" sizes="512x512">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">HTML

形式の説明

ICO形式 (.ico)

従来のfavicon形式で、すべてのブラウザ（古いInternet Explorerを含む）と互換性があります。通常は16x16、32x32、48x48など複数サイズを含みます。

PNG形式 (.png)

モダンブラウザで推奨される形式で、透過背景をサポートし、ファイルサイズも小さくできます。16x16はタブ、32x32はタスクバー、48x48はデスクトップショートカット向けです。

Android Chromeアイコン

192x192と512x512は、Android端末のPWA（プログレッシブウェブアプリ）用アイコンとして、ユーザーがサイトをホーム画面に追加したときに表示されます。

Apple Touchアイコン

180x180はiOSデバイス（iPhone、iPad）向けに設計されたアイコンで、ユーザーがサイトをホーム画面に追加したときに使用されます。Appleにより自動的に角が丸められ、光沢が付与されます。

16px でも読めるテキストファビコンの設計

テキストファビコンの明暗を分けるのはタブサイズです。テキスト生成ツールでは、これらのパラメータが画像ツール以上に重要になります。512px のプレビューで鮮明に見えても、実際のブラウザタブでは判読不能な塊になることがあります。

フォントの選択

太めのサンセリフ（Arial Black、Helvetica Bold、Futura）が 16×16 の描画に最も強く、セリフ体・筆記体・細字フォントの細いストロークは、プレビューでは鮮明でもタブサイズでは消えてしまいます。

文字数

1 文字が理想です。2 文字のモノグラムはフォントサイズを一段下げれば使えます。3 文字以上は 16px のタブで判読できないため、長いテキストは 180×180 の Apple タッチアイコン専用にしてください。

文字色と背景のコントラスト

コントラスト比は 7:1 以上を目安に。タブにはライトとダークの両テーマがあります。透明背景の中間グレー文字はどちらかで見えなくなり、塗りつぶし形状＋白文字なら両方で読めます。

背景の形状

15〜20% の角丸はどんなサイズでも現代的なアプリアイコンに見えます。完全透明の背景はプレビューではきれいですが、ダークなタブバーの上では判読しにくくなります。公開前に両テーマで確認してください。

余白

字形はキャンバスの 60〜70% に収めてください。ブラウザは公称サイズより小さく描画するため（高 DPI では 16px アイコンをより大きいスロット内に表示）、端に接した字形は視覚的に切り取られます。