ファビコンジェネレーター
1つのPNG、JPG、またはSVGから、favicon.icoおよびサイトに必要なすべてのサイズのアイコンを生成し、ZIPにまとめてダウンロードできます。
画像全体が表示され、周囲に余白が追加されて中央に配置されます。
ブラウザのタブには「透明」が適していますが、iPhoneのホーム画面アイコンには背景色を設定した方が安全です。
生成されたファビコンとアイコンパックがここに表示されます。
これらのファイルをサイトのルートフォルダに配置し、各ページの <head> に以下の行を追加してください。
画像はブラウザ内でアイコンに変換されます。BroBroGoにアップロードされることはありません。
よくある質問
アイコンパックにはどのようなファイルが含まれていますか？
16、32、48ピクセル版を内包した favicon.ico、16、32、180、192、512ピクセルのPNGアイコン、そして大きなアイコンを定義する site.webmanifest ファイルが含まれます。SVGから開始した場合は、ベクターファイル自体も含まれます。これらすべてが1つのZIPファイルにまとめられます。
元の画像の推奨サイズはどのくらいですか？
SVG形式が理想的です。すべてのアイコンがベクターデータから描画されるため、16ピクセルなどの小さなサイズでも鮮明に表示されます。PNGやJPGを使用する場合は、少なくとも 512 × 512 ピクセル以上の画像を使用してください。それより小さい画像は拡大処理されるため、ぼやけて見えることがあります。
背景は透明にするべきですか、それとも色を付けるべきですか？
ブラウザのタブ用アイコンは透明のままで問題ありません。ただし、iPhoneやiPadのホーム画面では、透明な部分が黒く塗りつぶされてしまいます。ユーザーがサイトをホーム画面に追加する可能性がある場合は、背景色を設定することをお勧めします。
正方形ではない画像を使用するとどうなりますか？
アイコンは正方形ですが、元の画像が引き伸ばされることはありません。デフォルトでは、余白を設けて中央に配置されます。「全体に合わせる（切り抜き）」に切り替えると、長辺の端を切り取って正方形に収めることができます。
ファイルはサイトのどこに配置すればよいですか？
生成されたファイルをサイトのルートディレクトリにアップロードし、/favicon.ico としてアクセスできるようにします。その後、生成されたHTMLコードを各ページの <head> タグ内に貼り付けてください。ブラウザが自動的に最適なサイズを選択して読み込みます。