ファビコン作成ツール
ロゴをアップロードするだけで、サイトに必要なアイコンが ZIP 1つにそろいます。16、32、48ピクセルを収めた favicon.ico、Google 用の48ピクセル PNG、iPhone 用で背景が不透明な Apple Touch Icon、Android 用の192・512ピクセルのアイコン、セーフゾーンを考慮したマスカブルアイコン、そして site.webmanifest です。SVG をアップロードした場合は icon.svg も入ります。タブ、Google の検索結果、ホーム画面でのプレビューを確認しながら、そのまま使える <head> のコードをコピーできます。処理はすべてブラウザー内で行われます。
- 無料・登録不要
- ファイルはお使いのデバイスから出ません
- 1ファイル50 MBまで
ロゴやアイコンの画像を追加してください。PNG、SVG、JPG、WebP に対応しています。正方形で512 × 512ピクセル以上の画像だときれいに仕上がります。
ファイルはお使いのデバイスから出ません。画像はブラウザー内で処理されます。出力に EXIF や位置情報は含まれません。
ファビコンを作る方法
ロゴを追加
PNG、SVG、JPG、WebP のロゴをアップロードします。正方形で512 × 512ピクセル以上の画像がおすすめです。SVG でも構いません。
名前、色、余白を設定
サイト名と短い名前を入力し、テーマカラーと背景色を選び、必要なら余白を加えます。プレビューで、タブ、Google、ホーム画面での見え方を確認できます。
パッケージをダウンロードして設置
ZIP をダウンロードし、ファイルをサイトのルートフォルダーにアップロードして、表示された <head> のコードをページに追加します。
何が保持されますか？
保持されるもの
- ロゴの縦横比：正方形でない画像は、引き伸ばさずに正方形の中に収められます
- 透明（標準のアイコンでは。背景色を選んだ場合はその色で塗られます）
- SVG をアップロードした場合は、icon.svg がそのまま含まれます
変わるもの
- 各アイコンは、それぞれのサイズに高品質で縮小されます
- Apple Touch Icon とマスカブルアイコンは常に背景が不透明です。選んだ色が使われ、「透明」の場合は白になります
- マスカブルアイコンでは、内容が80%のセーフゾーンに収まります
引き継がれないもの
- PNG や JPG から、ベクター（SVG）は作られません。icon.svg は SVG を入力したときだけ含まれます
- EXIF などのメタデータは、アイコンに含まれません
こんなときに便利
新しいサイトに、アイコン一式をそろえる
favicon.ico 1つだけでは、もう足りません。iPhone のホーム画面、Android、Google の検索結果が、それぞれ別のファイルを求めるからです。1回のアップロードで、正しい名前とサイズの一式が手に入ります。
Google の検索結果にアイコンを出す
Google は、48ピクセルの倍数の正方形のファイルを、検索結果のサイトアイコンとして表示します。このファイルはクロールできる必要があります。パッケージには、そのファイルと <head> のリンクが含まれます。
アプリのように追加できるサイト（PWA）に
サイトをホーム画面に追加できるようにするには、マニフェストと192・512ピクセルのアイコンが必要です。マスカブルアイコンなら、Android がアイコンを円や角丸に切り抜いても、ロゴが欠けません。
知っておきたい制限事項
- 正方形で512 × 512ピクセル以上の画像がおすすめです。それより小さい元画像から作った大きなアイコンは、ぼやけて見えます。
- 16と32ピクセルのアイコンでは、細い線や小さな文字は読めなくなります。太くてコントラストの高いロゴのほうがきれいに出ます。
- テーマカラーが反映されるのはモバイルブラウザーのアドレスバーだけで、ブラウザーの設定にも左右されます。
- Google の検索結果のアイコンが更新されるまでには、数日から数週間かかることがあります。ブラウザーもアイコンをキャッシュします。
よくある質問
ウェブサイトにはどのファビコンのファイルが必要ですか？
今の標準は、ルートフォルダーの favicon.ico、Google 用の48ピクセル PNG、できれば icon.svg、iPhone 用の180ピクセルの apple-touch-icon.png、Android 用の192・512ピクセルのアイコン、そして site.webmanifest です。このツールはすべて作成し、<head> のリンクも用意します。
マスカブルアイコンとは何ですか？
内容をセーフゾーンの中に収め、背景を隙間なく塗りつぶしたアイコンです。Android が端末に合わせて円や角丸などに切り抜けるようになっています。ここでは、512ピクセルの画像の中央80%の領域に内容を配置します。
Apple Touch Icon が、角丸でなく不透明なのはなぜですか？
iOS は、透明な部分を黒で表示し、角は自分で丸めるからです。そのため、角丸にせず、選んだ背景色（透明を選んだ場合は白）で隙間なく塗りつぶして作ります。
Google の検索結果にアイコンが出ないのはなぜですか？
アイコンのファイルが robots.txt でブロックされておらず、トップページの <head> からリンクされていて、48ピクセルの倍数の正方形である必要があります。直したあとは、Search Console でトップページの再インデックスをリクエストできます。反映には数日から数週間かかることもあります。
正方形でない画像をアップロードすると、どうなりますか？
アイコンはゆがめずに正方形の中に収められ、左右や上下に余白ができます。枠いっぱいに表示したいときは、先にトリミングツールで1:1に切り抜いてください。
PNG から SVG のファビコンも作れますか？
いいえ。ピクセルを自動でベクターにすると、アイコンの見た目がひそかに変わってしまうおそれがあるため、icon.svg は自分で SVG をアップロードしたときだけ含まれます。
このツールは無料ですか？
はい、完全に無料です。アカウント、サブスクリプション、透かしはありません。
ファイルはどこかにアップロードされますか？
いいえ。画像はブラウザー内で処理され、お使いのデバイスから出ることはありません。出力に EXIF や位置情報は含まれません。