Softonic

ファビコン変換ツール

1枚のラスター画像から、Webサイトにファビコンを追加するためのファイルを作成します。正方形キャンバスへの収め方と背景を指定すると、マルチサイズICO、7個のPNGアイコン、Webアプリmanifest、Windowsタイル設定、コピーして使えるhead用HTMLをまとめたZIPをダウンロードできます。画像変換とZIPの作成はブラウザ内でローカルに行われます。

画像をファビコン一式に変換する方法

  1. 1

    ラスター画像を選ぶ

    画面に表示されるファイルサイズと画像寸法の上限を満たすPNG、JPEG、WebPを選びます。SVG、GIF、AVIFは利用できません。

  2. 2

    画像の収め方を選ぶ

    「全面表示・切り抜き」では正方形全体を埋めて端を切り抜き、「全体表示・余白」では画像全体を残して周囲に余白を加えます。

  3. 3

    背景を設定する

    透過部分と「全体表示・余白」で生じる余白の背景色を選び、生成されるプレビューを確認します。

  4. 4

    ダウンロードして設置する

    ZIPをダウンロードし、アイコンと設定ファイルをサイトに配置して、用意されたlinkタグをHTML文書のhead内にコピーします。

ZIPの内容

ファイル 用途
favicon.ico 従来のファビコンパスを参照するブラウザやソフトウェア向けに、16、32、48、256 pxの画像を収めた1つのICOコンテナ
favicon-16x16.png ブラウザタブなどの小さな表示領域向けPNG
favicon-32x32.png 高密度のブラウザタブやブックマーク向けアイコン
favicon-48x48.png デスクトップやショートカット向けの追加サイズ
mstile-150x150.png Windowsタイル設定から参照される150 x 150のPNG
apple-touch-icon.png Apple端末のホーム画面リンク向け180 x 180のPNG
android-chrome-192x192.png Webアプリmanifestから参照される192 x 192のアプリアイコン
android-chrome-512x512.png Webアプリmanifestから参照される512 x 512のアプリアイコン
site.webmanifest 対応ブラウザに192 pxと512 pxのアイコンを示すJSONメタデータ
browserconfig.xml 生成したアイコンを参照するWindowsタイル設定
favicon-head.html ICO、PNG、Apple用アイコン、manifest、ブラウザ設定をページに関連付けるコピー用タグ

ICOとPNGは意図的に別ファイルにしています。ブラウザやOSによってアイコンの選び方が異なるため、一式を用意することで、従来の/favicon.icoリクエストと明示的な現行アイコン指定の両方に対応できます。

HTMLのhead用タグ

ダウンロードした一式には、次の形式のHTMLが含まれます。

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="msapplication-config" content="/browserconfig.xml">

ファイルをサブディレクトリや別のアセットホストに置く場合は、タグを<head>に貼り付ける前にパスを変更してください。site.webmanifestとbrowserconfig.xml内のファイル名やパスも、実際に配置するファイルと一致させます。

全面表示、全体表示、背景の選び方

  • 全面表示・切り抜きでは、すべての正方形出力を画像で埋めます。横長や縦長の画像は向かい合う端から均等に切り取られるため、重要な図柄は中央付近に置いてください。
  • 全体表示・余白では、元画像全体を表示します。使われない領域は、選択した背景色の余白になります。
  • 背景は透過のままにするか、任意の単色を指定できます。「全体表示・余白」では画像の周囲に付く余白にもこの設定が使われます。公開前に明るいページと暗いページの両方でプレビューを確認してください。

小さなアイコンを鮮明にするには、512 x 512ピクセル以上のシンプルな正方形画像を使うのがおすすめです。元画像が大きくても、細い文字や極細線、小さな装飾は16 px版で消える場合があります。

入力上限とファイルの配置

この変換ツールで利用できるのはPNG、JPEG、WebPのラスター画像だけです。画像のシグネチャを検査し、SVG、GIF、AVIFなど未対応の形式は拒否します。元ファイルは最大20 MiB、各辺は最大8,192ピクセル、総画素数は最大24メガピクセルです。寸法の上限は画像全体をデコードする前に検査されます。

ダウンロード後にZIPを展開し、生成ファイルをHTML内で指定したパスへアップロードします。/favicon.icoのようなルート相対パスは、現在のドメインのルートからファイルを取得できることが前提です。ブラウザは通常のページ資産より長くアイコンを保持することがあるため、既存のファビコンを交換したらサイトやCDNのキャッシュを消去してください。

付属のmanifestにはアイコンのメタデータが入っていますが、manifestとアイコン一式だけでサイトがインストール可能なPWAになるわけではありません。インストール可能かどうかは、ページの構成、通信の安全性、各ブラウザの要件にも左右されます。

よくある質問

PNG、JPEG、WebPを利用できます。ファイル名だけで判断せず、ファイルのシグネチャを検査し、SVG、GIF、AVIFなどの形式は拒否します。

「全面表示・切り抜き」は正方形全体が埋まるまで画像を拡大し、縦横比が正方形でない場合は両端を均等に切り取ります。「全体表示・余白」は画像全体を残し、正方形内の残りの領域を選んだ背景色で埋めます。

ICOは、複数の小さなアイコンサイズを従来型の1つのファビコンファイルに保存できるコンテナです。個別のPNGは、タブ、ホーム画面リンク、アプリアイコン向けに明確なサイズの素材をブラウザやプラットフォームへ提供します。両方を使うと実用上の対応範囲が広がります。

いいえ。manifestは生成したアプリアイコンと表示用メタデータを記述しますが、インストール可能かどうかは追加のブラウザ要件と、サイト自体の構築・配信方法によって決まります。

付属HTMLはルート相対パスを使うため、展開したファイルをドメインのルートに置くのが最も簡単です。別のフォルダやアセットホストを使う場合は、HTML、manifest、ブラウザ設定内のパスを同じ配置に合わせてください。

いいえ。画像処理とZIPの作成はブラウザ内で行われます。複数ステップ表示では、ステップ間で画像を引き継ぐため、このブラウザのIndexedDBに画像の下書きを最大30分間保存することがあります。このローカルな引き継ぎはサーバーへのアップロードではありません。

関連ツール

PNGからSVGへのベクター変換

PNGのラスター画像をブラウザ内でSVGパスに変換します。ロゴ、アイコン、線画に最適です。しきい値、色数、スムージングを調整できます。

GIFメーカー

連番画像や短い動画をアニメーションGIFに変換します。書き出し前にフレームレート、ループ回数、サイズを調整できます。

画像アップスケーラー

AI超解像または従来の補間処理で、低解像度画像を2×、3×、4×に拡大しながら重要なディテールを保ちます。

QRコード生成ツール

テキストまたはURLから、ブラウザ内でQRコードを作成してPNGとしてダウンロードできます。

バーコードジェネレーター

Code 128、Code 39、EAN-13、UPC-A、ITF-14、Codabarで読み取り可能な1Dバーコードを作成します。印刷用にPNG、SVG、PDFで書き出せます。

SVGをPNGに変換

SVGファイルやSVGマークアップをブラウザ内でPNGに変換し、倍率を選びながら透明なエッジをシャープに保ちます。