画像不要・無料・登録不要
テキストファビコンジェネレーター
1〜3文字の英字、イニシャル、文字からファビコンを作成できます。フォント、色、形を選び、実寸プレビューを確認して、ICOとPNGをダウンロードします。
テキストのファビコンをデザインする
1〜3文字を入力してください。16 pxでは1〜2文字が読みやすくなります。
フォントは、デバイスで利用可能なファミリーを使用します。ダウンロードはラスター イメージであるため、エクスポートされたレタリングは他のデバイスでも同じままです。
実際のファビコンサイズでプレビューする
実際のピクセルサイズは以下の通りです。ダウンロードする前に読みやすさを確認してください。
ファビコンファイルをダウンロードする
ICO 1個、6サイズのPNG、Web App Manifest、HTMLコードを収録。透かしは入りません。
HTMLのheadに追加
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">マニフェストには、基本的なアイコンの参照が含まれています。オフライン サポートを追加したり、サイトを完全な PWA に変えたりするものではありません。
テキストからファビコンを作成する方法
1. 文字を選択してください
1 文字または 2 つのイニシャルから始めます。長い名前はブラウザ タブで詳細が失われます。
2. 形と余白を調整する
書体と対照的な色を選択します。パディングを調整し、16、32、および 48 ピクセルのプレビューを検査します。
3. ダウンロードしてインストールします
パッケージをダウンロードし、ファイルをパブリック ディレクトリに配置し、提供された HTML タグを追加します。フレームワークのパスを確認してください。
文字・イニシャルを使ったファビコンのアイデア
ロゴがまだなくても、文字を使えばサイトを見分けやすいファビコンを作れます。名前の中で覚えてもらいやすい部分を選び、実際のタブと同じ大きさで確認しましょう。以下の例はエディターですぐ再現できます。
個人サイトなら1文字
名前、メディア名、製品名の頭文字を使います。1文字なら線を太くしても周囲に十分な余白を取れるため、小さなブラウザタブでも判別しやすくなります。
ポートフォリオなら2文字のイニシャル
2文字のイニシャルは、ポートフォリオやニュースレター、小規模ビジネスの名称を印象づけるのに向いています。MWのような横幅のある組み合わせと細い文字を見比べてください。同じ余白でも、文字の組み合わせによって見た目の大きさは変わります。
プロジェクトの短いラベル
3文字の略称は、開発者向けツールや個人プロジェクトに使えます。16 pxのプレビューで文字がつぶれて見える場合は、拡大表示だけで判断せず、文字数を減らしてください。
16 pxでも読みやすい文字ファビコンにするコツ
拡大プレビューは細かな調整に便利ですが、判別しやすさは最小サイズで確認するのが確実です。設定を一つずつ変え、どの変更が効果的か見比べましょう。
フォントより先に文字を決める
3文字に決める前に、1文字と2文字の案も試してください。ブランド名が長い場合は、正式名称を小さな正方形に詰め込まず、覚えやすい略称を使います。
文字の太さと内側の空間を両立する
太字は細い線より縮小に強い一方、太すぎるとB、R、aなどの内側がつぶれます。16 pxと32 pxで太さを見比べ、輪郭が最も明瞭なものを選びましょう。
明るいタブと暗いタブの両方で確認する
背景と十分なコントラストがある文字色を選びます。プレビュー背景を切り替え、透明な角や縁も確認してください。円形は正方形より文字を置ける範囲が狭いため、余白を取りすぎないようにします。
文字の周囲にスペースを残す
文字が小さすぎる場合は余白を減らし、線が縁に近すぎる場合は余白を増やします。角丸や円形に変えると使える範囲も変わるため、形を変更したら最小サイズでもう一度確認してください。
ファビコンのファイル形式と PNG サイズ
| ファイル | サイズ | 使用する |
|---|---|---|
| favicon.ico | 16 / 32 / 48 ピクセル | ブラウザーのファビコン用に 1 つの ICO ファイル内の 3 つの PNG 画像。 |
| favicon-16x16.png、favicon-32x32.png、favicon-48x48.png | 16 / 32 / 48 ピクセル | タブ、ブックマーク、その他の Web サイト UI の個々の小さなアイコン。 |
| apple-touch-icon.png | 180×180ピクセル | ホーム画面のアイコン候補。不透明なタイルが必要な場合は、正方形の背景を選択してください。 |
| アンドロイド-クローム-192x192.png、アンドロイド-クローム-512x512.png | 192 / 512 ピクセル | 含まれている Web マニフェストによって参照される大きなアイコン。これらはマスカブルアイコンではありません。 |
マニフェストには、基本的なアイコンの参照が含まれています。オフライン サポートを追加したり、サイトを完全な PWA に変えたりするものではありません。
サイトにファビコンを設置する方法
サイトの構成に合った方法を選んでください。参照先も変更する場合を除き、ダウンロードしたファイル名はそのまま使います。古いアイコンを置き換えた後は、公開中のサイトで表示を確認しましょう。
HTML・静的サイト
ZIPを展開し、サイトのルートから配信されるディレクトリへ配置します。エディターに表示されたHTMLタグをページのheadへコピーしてください。サブフォルダーへ置く場合は、アイコンとmanifestの参照先に加え、site.webmanifest内の画像パスも変更します。
設置コードを確認Next.js プロジェクト
プロジェクトのファビコン規約またはMetadata設定でICO・PNGを指定します。新しい参照を追加する前に、アプリですでにアイコンを定義していないか確認してください。Next.js向けガイドでは、配置場所とよくある競合を解説しています。
Next.jsのファビコン設置ガイドWordPressサイト
サイトアイコンには512 pxのPNGを使います。WordPress側で必要なサイズが自動生成されるため、ZIP内の全ファイルをアップロードする必要はありません。設定場所はWordPress向けガイドで確認できます。
WordPressのサイトアイコン設定ガイド新しいファビコンが表示されないときは
まず生成したファイル自体に問題がないか確認し、次にサイトから正しく配信されているかを調べます。このツールで正常に見えていても、サイト側のパスや設定が正しいとは限りません。
ブラウザには古いアイコンが表示されたままです
公開したアイコンのURLを直接開き、新しい画像になっているか確認します。正しければ、新しいブラウザセッションで開き、ブラウザやCDNのキャッシュも確認してください。HTML、フレームワークのメタデータ、サイト設定に古い参照が残っていないかも調べます。
アイコンが表示されない、またはぼやけて見える
アイコンのURLが、404ページやログイン画面ではなく画像を返しているか確認します。16 pxのPNGを引き伸ばさず、用途に合った書き出しサイズを使ってください。画像自体が読みにくければ、文字数を減らすか、太さや余白を調整します。
Google 検索のアイコンが更新されていません
更新には、Googleがトップページとアイコンファイルを再クロールする必要があります。アイコンのURLは変えず、常にアクセスできる状態にしてください。ブラウザで更新されても検索結果へすぐ反映されるとは限らず、ファビコンの表示自体も保証されません。
テキストファビコンジェネレーターに関するよくある質問
テキストファビコンとは何ですか?
テキスト ファビコンは、文字、イニシャル、またはいくつかの文字を使用して、ブラウザー タブ内の Web サイトを識別します。これは、ロゴがまだない場合、または完全なワードマークが小さいサイズで詳細すぎる場合に便利です。
何文字使用すればよいですか?
エディターは最大 3 文字を受け入れます。通常、1 つまたは 2 つの太字は 16 × 16 ピクセルで最適に機能します。実際のサイズのプレビューを使用して、独自のデザインを確認します。細いストロークや幅の広い 3 文字は読みにくい場合があります。
漢字やアクセント付き文字は使用できますか?
はい、デバイス上のフォントが表示できる場合に限ります。アクセントの組み合わせは、その文字とともにカウントされます。ダウンロードする前に、プレビューで不足しているグリフがないか確認してください。 PNG ファイルと ICO ファイルには、レンダリング結果が保存されます。
フォントの選択肢に Arial、Georgia、Courier という名前が付けられているのはなぜですか?
選択肢には、システムフォントへフォールバックできる一般的なフォントファミリーを使っています。実際の書体はOSによって異なる場合があります。PNGとICOには文字を画像として書き出すため、サイト訪問者が同じフォントをインストールする必要はありません。
何かをアップロードしたり、アカウントを作成したりする必要がありますか?
いいえ。テキストはレンダリングされ、画像はブラウザーで生成されます。このツールはテキストをアップロードしないため、サインアップせずにファイルをダウンロードできます。
Next.js または WordPress でパッケージを使用できますか?
ICOとPNGはどちらの環境でも使えますが、配置場所や設定方法が異なります。Next.js・WordPress向けガイドで、適切なファイルの場所やサイトアイコン設定を確認してください。付属のHTMLスニペットは、通常のHTMLサイトで使えます。
生成されたマニフェストは完全な PWA セットアップですか?
いいえ。名前、色、および通常のアイコンの参照が提供されます。 PWA には依然としてプロジェクト固有のセットアップとテストが必要です。マスカブルアイコン、追加のプラットフォーム アセット、その他のマニフェスト設定には、PWA アイコン ジェネレーターを使用します。
テキストのファビコンですか、それとも画像ベースのロゴですか?
文字やイニシャルにはこのエディタを引き続き使用してください。名前やキャッチフレーズを含むシンボルが必要な場合はロゴ メーカーを選択するか、既存の画像のサイズを変更する場合はファビコン ジェネレーターを選択します。完全なロゴがタブ サイズで詳細を失う場合は、簡略化されたシンボルの方が適しています。