ファビコン生成
画像1枚からファビコン一式をアップロードせずに作成。
🔒 ファイルはブラウザ内でローカル処理され、サーバーにアップロードされません。
選択したファイル
完了
このコードを <head> に貼り付けてください
このツールについて
ファビコン生成ツールは、画像1枚からウェブサイトに必要なアイコンファイルを一式作成します。複数サイズを含むfavicon.ico、ブラウザタブ用PNG、Appleタッチアイコン、Androidホーム画面用アイコン、ウェブマニフェストに加え、<head>に貼り付けるタグも用意します。処理はすべてブラウザ内で行われ、ロゴがアップロードされることはありません。
使い方
- 正方形の画像をドロップします — 512×512以上が最も鮮明です。
- 必要ならマニフェスト用のサイト名を入力し、透過ではなく背景色を使うか選びます。
- 「ファビコン一式を生成」を押します。
- ファイルをサイトのルートフォルダに置き、スニペットを<head>に貼り付けます。
補足
- すべてローカルで処理され、ロゴが端末外に出ることはありません。
- 正方形でない画像は中央を基準に切り抜かれます。
- 16×16では、細かいロゴより単純でコントラストの強い形の方がよく見えます。
よくある質問
ファイルはどこに置きますか?
サイトのルートフォルダに置き、/favicon.ico や /apple-touch-icon.png のパスになるようにします。スニペットのパスと一致し、ブラウザはタグがなくてもルートのfavicon.icoを探します。
PNGがあればfavicon.icoは不要ですか?
入れておく方が安全です。一部のブラウザやツールはHTMLを読まずに /favicon.ico を直接要求するため、無いと余計な404が発生しアイコンが表示されないことがあります。
元画像はどのくらいのサイズが必要ですか?
正方形で最低512×512、図柄の周囲に少し余白を取ることをおすすめします。すべての出力がこの1枚から縮小されるため、大きく始めるほど大きなAndroidアイコンまで鮮明になります。
透過は維持すべきですか?
ブラウザタブ用には維持するのがおすすめです。明るいテーマにも暗いテーマにも自然に馴染みます。ただしiOSはホーム画面アイコンの透過部分を黒で塗るため、ホーム画面に追加されるアイコンなら背景色を指定した方が見栄えがよくなります。
細かいロゴが小さいサイズで潰れます。
16×16にはディテールを入れる余地がほとんどありません。文字入りのフルロゴではなく、一文字や単純な図形のようにコントラストの強いシンボルを使ってください。