イニシャル・絵文字のファビコン生成ツール
画像を用意しなくても、シンプルで見分けやすいファビコンを作れます。1〜2文字のイニシャルを入力するか、絵文字を1個選び、形と背景色を調整してください。文字デザインでは文字色とフォントスタイルも選べますが、絵文字はブラウザ本来の見た目を保ちます。512 pxのプレビューはブラウザ内で更新され、完成したダウンロードには、Webサイトへの設置に必要な小型ブラウザアイコン、モバイル向けアイコン、設定ファイルが含まれます。デザインはアップロードされず、AIも使用しません。
ファビコンの作り方
-
1
アイコンの内容を決める
コンパクトな文字マークにするならイニシャルを1〜2文字入力し、絵文字を使うなら1個選びます。
-
2
デザインを整える
正方形、角丸正方形、円形から形と背景を選びます。文字では文字色とフォントも選べますが、絵文字は本来の見た目を保ちます。
-
3
プレビューを確認する
512 pxのプレビューを確認しつつ、16 pxのブラウザタブ用アイコンまで縮小しても判別できるかを意識してください。
-
4
ダウンロードして設置する
ブラウザ内で作られたファビコン一式をダウンロードし、サイトに追加して、同梱のhead用コードを貼り付けるか環境に合わせて調整します。
ファビコン一式に含まれるファイル
1つのファビコンデザインは、小さなブラウザタブからモバイルのホーム画面まで、さまざまな場所で使われます。このツールは同じデザインを実用的な各サイズで描画し、ブラウザ内でファイルをまとめます。
| ファイル | サイズまたは内容 | 主な用途 |
|---|---|---|
favicon.ico |
16、32、48 pxのフレーム | ブラウザタブ、ブックマーク、ICOを要求するソフトウェア |
favicon-16x16.png |
16 × 16 px | 小さいブラウザ用ファビコン |
favicon-32x32.png |
32 × 32 px | 標準的なブラウザ用ファビコン |
apple-touch-icon.png |
180 × 180 px | Appleのタッチアイコン |
android-chrome-192x192.png |
192 × 192 px | 小さいAndroid向けWebアプリアイコン |
android-chrome-512x512.png |
512 × 512 px | 大きいWebアプリアイコン |
mstile-150x150.png |
150 × 150 px | Microsoftタイル用画像 |
site.webmanifest |
JSONマニフェスト | Webアプリマニフェストを利用するブラウザ向けにAndroid用アイコンを指定 |
browserconfig.xml |
XML設定 | Microsoftタイル画像と色を指定 |
favicon-head.html |
HTMLコード | アイコン、マニフェスト、ブラウザ設定への参照をコピーして使うためのコード |
16 pxでも判別できるファビコンにする
ファビコンはポスターの縮小版ではありません。細かな装飾、長い文字列、わずかな色の差は、ブラウザタブのサイズではすぐ見えなくなります。太いイニシャル1文字、短い2文字のマーク、シンプルな絵文字のほうが、複雑な構成より見分けやすいことが多いです。
- 前景色と背景色には十分なコントラストを付けます。
- OS側のマスクで窮屈に見えないよう、文字や絵文字の周囲に余白を残します。
- 正方形、角丸正方形、円形を比較し、最も形が分かりやすいものを選びます。
- 512 pxのプレビューだけでなく、書き出された小さいアイコンも確認します。大きく表示すると整っていても、16 pxでは判別しにくいことがあります。
- 設置後は複数のブラウザで、明るい色と暗い色のブラウザ表示の両方に対して確認します。
生成したファイルをサイトに追加する
生成されたファイル名を保ち、同梱のhead用コードが参照する場所に配置します。一般的にはサイトのルートです。各ページのテンプレートにある<head>へコードを貼り付けてください。フレームワークが静的ファイルを別のディレクトリやCDNから配信する場合は、公開前にコード、マニフェスト、ブラウザ設定内のパスを変更します。
同梱ファイルはアイコンの参照を用意しますが、それだけでWebサイトがPWAとしてインストール可能になるわけではありません。インストールには、追加のマニフェスト項目、安全な配信、ブラウザ固有の条件が必要になる場合があります。
よくある質問
はい。イニシャルを1〜2文字入力し、形、背景色、文字色、フォントスタイルを選べます。短い文字に限定しているのは、小さいファビコンでも読みやすくするためです。
はい。絵文字を1個選び、周囲の形と背景色を設定できます。絵文字はブラウザ本来の見た目を保つため、OSやブラウザによって表示が異なる場合があります。ダウンロード前にプレビューを確認してください。複雑な絵文字はブラウザによって利用できないことがあります。
はい。16、32、48 pxのフレームを収めたfavicon.icoのほか、16 pxと32 pxのPNGファビコン、Apple、Android、Microsoft向けの大きいアイコンが含まれます。
ファビコン生成ツールは、イニシャル、短い文字、絵文字1個から新しいデザインを作ります。ファビコン変換ツールは、既存のPNG、JPEG、WebP画像をファビコン用ファイルへ変換する別のツールです。
いいえ。文字または絵文字、プレビューの描画、ファイル一式の生成はブラウザ内で行われます。このツールはデザインをアップロードせず、Webサイトを取得することもありません。
いいえ。選択した設定を適用するだけで、AIは使用しません。また、イニシャル、絵文字、配色、完成したデザインが商標や第三者の権利に抵触するかどうかは判断できません。商用利用の前に権利を確認してください。
ブラウザはファビコンを長くキャッシュすることがあります。生成したファイルとhead内の参照が想定した場所に公開されているか確認し、キャッシュを消すかプライベートウィンドウで試してください。検索エンジンや各種サービスは、それぞれのタイミングでアイコンを更新します。
関連ツール
PNGからSVGへのベクター変換
PNGのラスター画像をブラウザ内でSVGパスに変換します。ロゴ、アイコン、線画に最適です。しきい値、色数、スムージングを調整できます。
GIFメーカー
連番画像や短い動画をアニメーションGIFに変換します。書き出し前にフレームレート、ループ回数、サイズを調整できます。
画像アップスケーラー
AI超解像または従来の補間処理で、低解像度画像を2×、3×、4×に拡大しながら重要なディテールを保ちます。
QRコード生成ツール
テキストまたはURLから、ブラウザ内でQRコードを作成してPNGとしてダウンロードできます。
バーコードジェネレーター
Code 128、Code 39、EAN-13、UPC-A、ITF-14、Codabarで読み取り可能な1Dバーコードを作成します。印刷用にPNG、SVG、PDFで書き出せます。
SVGをPNGに変換
SVGファイルやSVGマークアップをブラウザ内でPNGに変換し、倍率を選びながら透明なエッジをシャープに保ちます。