🚀などの絵文字を数秒でファビコンにできます。背景色と、円・角丸・四角の形を選び、ICO、PNG、SVG、Appleタッチアイコンをダウンロード。個人開発や試作品、社内ツールにちょうどいい手軽さです。
使い方
- 1〜2文字や絵文字を入力するか、「画像」に切り替えてロゴをドロップします（SVGが最もきれい）。
- 背景色・文字色・形・余白を選ぶと、プレビューが更新されます。
- ZIPでまとめてダウンロードするか、ファイルをタップして個別に保存します。
- HTMLをページの<head>に貼り付け、ファイルをサイトのルートフォルダに置けば完了です。
- favicon.icoには16・32・48pxのPNGアイコンが入っていて、どのブラウザでも表示できます。favicon.svgはどのサイズでもくっきり。
- iOSは自動で角を丸めるため、apple-touch-icon.pngは四角く不透明にしています。
- マスカブルアイコンはロゴを安全領域に収めるので、Androidでどんな形に切り抜かれても欠けません。
- すべてブラウザ内で生成され、画像がアップロードされることはありません。
今どきのファビコン一式
favicon.icoには16・32・48pxの画像が入っており、今も多くのブラウザやツールがサイト直下にこのファイルを探しに来ます。favicon.svgはどのサイズでもくっきり表示され、最近のブラウザで使われます。apple-touch-icon.png（180×180）はiPhoneのホーム画面にサイトを追加したときに表示されます。android-chrome-192x192と512x512、512pxのマスカブルアイコンは、Androidやインストール可能なWebアプリ向けにsite.webmanifestに記載します。
HTMLのスニペットがこれらをすべて読み込むので、headに貼り付けてファイルをルートフォルダに置くだけです。
16pxでも読めるデザイン
ブラウザのタブでは、ファビコンはわずか16×16ピクセルで表示されます。文字入りのロゴ全体より、太い1〜2文字やシンプルな記号、ロゴのシンボル部分だけのほうがずっと見やすくなります。背景と図柄のコントラストを強くすると、ライトテーマでもダークテーマでも見やすくなります。保存前に、ライトとダークのタブ表示プレビューで確認しましょう。
Apple用とマスカブルアイコン
iOSは角を自動で丸め、透過もうまく扱えないため、Appleタッチアイコンは不透明な正方形で作ります。Androidはマスカブルアイコンを円などの形に切り抜くことがあるので、大事な部分が切れないよう、デザインをセーフゾーンの内側に収めています。
よくある質問
ファビコンのサイズはいくつ？
複数用意するのが基本です。favicon.ico内に16・32・48px、どのサイズにも対応するSVG、Apple端末用に180×180、Android用に192pxと512px。このツールならすべて一度に作れます。
favicon.icoは今も必要ですか？
必要です。一部のブラウザやフィードリーダーなどのツールは今もサイト直下の/favicon.icoを探すため、置いておけばアイコンの欠けや404エラーを防げます。
サイトにファビコンを設定するには？
ZIP内のファイルをサイトのルートフォルダにアップロードし、HTMLスニペットを各ページのheadに貼り付けます。キャッシュを消して再読み込みすると新しいアイコンが表示されます。
新しいファビコンが表示されないのはなぜ？
ブラウザはファビコンを長くキャッシュします。アイコンのURLを直接開く、スーパーリロードする、プライベートウィンドウで確認するなどを試してください。検索結果への反映には時間がかかることがあります。
絵文字をファビコンにできますか？
できます。絵文字を入力し、背景と形を選べばアイコンになります。絵文字はOSごとに見た目が少し違い、保存したファイルは作成した端末での見た目になります。
ロゴはアップロードされますか？
いいえ。アイコンの描画もZIPへのまとめもブラウザ内で行うため、ロゴは端末の外に出ません。