無料ファビコン生成
ロゴからファビコン一式を作り、先に 16～512px でプレビュー確認。極小サイズ向けのデザインのコツと公開すべき PNG も紹介。
画像の端を切り取らずに標準アイコンサイズを作成します。
またはこのページのどこにでも画像を1つドロップ
favicon.ico には 16、32、48、64、256 px のフレームが含まれます。PNG は表示サイズで保存され、180 px は apple-touch-icon.png として保存されます。
ICO と PNG のファビコンを作成
知っておきたいこと
ジェネレーター画面は、書き出しと同じくらいデザインのための画面です。画像を読み込むとすぐ、16、32、48、64、180、192、256、512px の 8 つのプレビュータイルが表示され、ダウンロードと同じ 512px の正方形から描かれます。まず 16px のタイルを見てください。ブラウザーのタブが通常表示するサイズで、多くのロゴがここで失敗します。
小さなサイズではシンプルさが報われます。太い 1 文字、単純な図形、コントラストの強い記号は 16px でも残りますが、ワードマーク、細い輪郭線、写真は潰れてしまいます。フルロゴが複雑なら、アイコン用の別バージョンを作って読み込ませてください。画像は切り取りなしで収められ、タブ側で余白が加わることもないため、正方形の内側に 6～10% 程度の余白を残して、マークが端に触れないようにします。
透明な背景は PNG のダウンロードで維持されるので、明るいテーマと暗いテーマのどちらのタブにも合いますが、透明の上の暗いロゴは暗いタブで見えなくなることがあります。16px と 32px のタイルを暗い背景に置いた場合を想像するか、マークに単色の下地図形を敷いてください。180px の出力は iOS のホーム画面用で、そこでは透明部分がたいてい黒で塗られるため、単色の背景のほうがきれいに見えます。
公開するファイルの短いリストは、favicon.ico、apple-touch-icon.png、マニフェスト用の 192・512px のファイルです。16、32、48、64、256px の PNG は ICO の材料なので、link タグでサイズを個別に参照する場合にのみ保管すれば十分です。
作業別ツール 6
関連ツール 13
無料ファビコン生成の使い方
- 簡略化したアイコンの素材を読み込みます。例として余白 8% の 512px 正方形 PNG です。
- 16px と 32px のプレビュータイルで判読性を確認します。
- 16px のタイルがにじんで見えたら、よりシンプルな画像に差し替えて再比較します。
- favicon.ico をダウンロードし、続けて 180、192、512px の PNG もダウンロードします。
よくある質問
16px のタイルでロゴがぼやけて見えるのはなぜですか。
16 ピクセルには細部がほとんど入らず、細い線や小さな文字が潰れるためです。マークをよりシンプルで太くしたアイコン版を使ってください。
透明な背景はファビコンで問題ありませんか。
ブラウザーでは動作しますが、透明の上の暗いロゴは暗いタブで見えなくなることがあります。特に 180px の iOS アイコンは単色の下地図形が安全です。
正方形の内側にどれくらい余白を残すべきですか。
6～10% 程度が適しています。画像は切り取りなしで収められるため、デザインに入れた余白がそのまま残ります。
8 種類の PNG サイズがすべて必要ですか。
いいえ。ほとんどのサイトでは、favicon.ico、180px のファイル、192・512px のファイルで十分です。