ファビコン生成
ロゴや画像から完全なファビコン一式を作成します。旧ブラウザ向けfavicon.ico、16〜512pxのPNGアイコン、apple-touch-icon、Webアプリマニ
ここに画像ファイルをドロップ
またはクリックしてファイルを選択
ロゴや任意の正方形の画像から、現代的なWebサイトに必要なアイコン一式を作成します。旧ブラウザ向けのfavicon.ico、16〜512ピクセルのPNGアイコン、iOSのホーム画面用apple-touch-icon、Webアプリマニフェスト、そしてそれらすべてを参照するHTMLスニペットが含まれます。
ファイルとマークアップが一度に手に入るので、どのサイズを書き出すべきか、どのlinkタグを書くべきかを覚えておく必要はありません。元の画像は端末内で処理されるため、まだ公開していないロゴでも安心です。
ファビコン一式を生成する方法
正方形のロゴまたは画像を選択します
アイコン一式を生成します
ファイルをダウンロードし、HTMLスニペットをコピーします
よくある質問
どのサイズが生成されますか？
ブラウザのタブ用に16×16と32×32、ショートカット用に96×96、apple-touch-iconとして180×180、AndroidとPWAのインストール用に192×192と512×512、さらに旧ブラウザ向けの複数サイズを含むfavicon.icoです。
どのような画像から始めればよいですか？
512×512以上で描画した、背景が透明な正方形のPNGまたはSVGが適しています。横長のロゴは余白付きで縮小され、小さい画像やぼやけた画像からは512ピクセルでも甘いファビコンしかできません。
すべてのファイルが必要ですか？
現代的なサイトなら、.icoと192・512のPNG、そしてマニフェストがあればほとんどをカバーできます。最大限の互換性を求めるなら一式をアップロードしてください。数キロバイトにすぎません。
ファイルはどこに置きますか？
/favicon.icoと/icon-192.pngが解決できるように、サイトのルートへアップロードし、HTMLスニペットをすべてのページの<head>に貼り付けてください。マニフェストをリンクして残りを任せる方法でもかまいません。
WebアプリやPWAでも機能しますか？
はい。マニフェストと192・512のアイコンは、インストール可能なWebアプリにまさに必要なものです。Androidのアダプティブ形状でもロゴを保ちたい場合は、マスカブルアイコンを検討してください。
画像はアップロードされますか？
いいえ。すべてのアイコンはブラウザ内で生成されます。
概要
| 入力 | 画像 |
|---|---|
| 複数ファイル | いいえ |
| 実行場所 | ブラウザ内で実行 - ファイルはアップロードされません |
| オフラインでも動作 | はい — ページを読み込んだ後 |
| 料金 | 無料・登録不要・透かしなし |
JPG、PNG、WebP、AVIFの選び方
これらの形式はそれぞれ別の問題を解決するもので、選び方を誤ると画質かファイルサイズのどちらかを犠牲にすることになります。JPGは写真や、誰かに送る必要のあるものにとって最も安全な選択です。どの端末やソフトでも開けますが、非可逆形式で透過には対応していません。PNGは可逆形式で透過にも対応するため、ロゴ、スクリーンショット、図、輪郭や文字がはっきりしたものに適していますが、その代わりファイルはかなり大きくなります。WebPは同じ見た目の品質ならJPGより通常25〜35%小さく、透過にも対応しますが、一部の古いソフトでは今も開けません。AVIFは、特に低品質の設定でさらに圧縮できますが、エンコードは遅く、4つの中では対応が最も新しい形式です。実用的な指針はこうです。送るならJPG、編集するならPNG、自分のサイトならWebP、1キロバイトでも削りたいときはAVIF、ただし受け取る側が開けることを確認してからにしてください。
ファイルをサイズ上限内に収める
アップロードフォームでは「2 MB以下」「500 KB以下」といった条件が求められることがよくあります。そこへ最短で到達するには、正しい順序で作業します。不要な部分を切り取り、次に最終的な用途に必要な程度までピクセル数を減らし（全画面のWeb画像なら幅1920 pxで十分、ブログ記事なら1000 px）、最後に品質を下げます。アップロード先がWebPやAVIFを受け付けるなら、形式の変換が最も大きな削減になることがあります。メタデータの削除はサイズには悪影響を与えず、プライバシーの面では重要になることがあります。写真にはしばしばGPS座標、正確なカメラ機種、撮影日が含まれているためです。それでもフォームがファイルを受け付けない場合は、容量制限だけでなくピクセル数の上限が設けられていないか確認してください。実際のメガバイト数よりも、こちらのほうが人を戸惑わせます。