Toolonit
  1. ホーム
  2. 画像
  3. ファビコン作成

ファビコンジェネレーター

1枚の画像から、あらゆるサイズのファビコンを作成します。

ロゴをドロップするか、クリックして選択

PNG・SVG・JPG・WebP・ICO。 512 × 512px以上の正方形のロゴが最適です。 ファイルはブラウザ内で処理され、アップロードされません。 削除するまで、このブラウザに保存されます。

Ctrl+O選択Ctrl+V貼り付け

ファビコンは、ブラウザのタブやブックマークに表示される小さなアイコンです。サイトをホーム画面に追加すると、スマホではより大きなサイズが使われます。ロゴを1枚ドロップするだけで、favicon.ico、PNGのファビコン、Apple Touchアイコン、Androidアイコン、Webマニフェストなど、Webサイトに必要なファイルをすべて作成します。プレビューを見ながら調整でき、ページに貼り付けるHTMLも用意されます。処理はブラウザ内で行われるためロゴが端末の外に出ることはなく、無料で登録も不要です。

ファビコンを作る方法

  1. ロゴ（PNG・SVG・JPG・WebP）をページのどこかにドロップするか、Ctrl+Vで貼り付けるか、クリックして選びます。ほかの画像ツールで追加した画像は、そこで残した状態のまま最初からリストにあるので、サムネイルをクリックすれば使えます。サンプルのロゴを使えば、ファイルがなくても試せます。
  2. ロゴは自動で枠に収められます。横長のロゴならマーク部分、それ以外は余白を除いたロゴです。ロゴの上の正方形をドラッグして範囲を変えるか、「ロゴ全体」を選びます。背景（ロゴ自体の色が先頭に並びます）、余白、形を選ぶと、プレビューがすぐに更新されます。
  3. 「すべてダウンロード（ZIP）」をクリックしてファイルをサイトのルートフォルダーに置き、「HTMLをコピー」をクリックしてタグをページの<head>に貼り付けます。

主な機能

  • 16・32・48pxのアイコン入りのfavicon.icoと、16・32pxのPNGファビコン
  • apple-touch-icon.png（180px）とAndroid Chrome用アイコン（192・512px）
  • アプリ名とテーマカラー入りのsite.webmanifestと、<head>用のHTMLタグ
  • 横長のロゴのマーク部分を自動で検出。正方形をドラッグして別の部分を使うことも、ロゴ全体を収めることも可能
  • 背景は透明・ロゴ自体の色・任意の色、余白は0〜30%、形は正方形・角丸・円
  • 全サイズ、ブラウザのタブ、ホーム画面のプレビューをライト・ダークの両方で表示
  • PNG・SVG・JPG・WebP・ICOから作成し、すべてのファイルを1つのZIPに

プライバシーは守られますか？

はい。アイコンはブラウザ内のWebAssembly画像エンジンで作成され、ロゴも作成したファイルも端末の外に出ることはありません。ロゴはリストから削除するまでこのブラウザに残ります。

よくある質問

ファビコンはどのサイズが必要ですか？

ほとんどの用途は4種類のファイルで足ります。ブラウザのタブ・ブックマーク・Windowsのショートカット用に16・32・48pxを含むfavicon.ico、iPhoneとiPadのホーム画面用に180pxのapple-touch-icon.png、そしてAndroidとインストール可能なWebアプリ用に、site.webmanifestに記載する192pxと512pxのPNGです。ZIPにはこれらすべてと、PNGを好むブラウザ向けの16pxと32pxのPNGが入っています。

ファビコンをHTMLに追加するには？

/favicon.icoで開けるようにファイルをサイトのルートフォルダーに置き、「HTMLをコピー」をクリックして、すべてのページの<head>にタグを貼り付けます。ブラウザはタグがなくても/favicon.icoを探しますが、タグを入れるとPNGの各サイズ、Appleのアイコン、マニフェストも使われるようになります。

apple-touch-icon.pngに背景が付くのはなぜですか？

iPhoneとiPadは透明なピクセルを黒で表示し、角は自動で丸めるため、Apple用のアイコンは常に不透明な正方形にしているからです。背景は選んだ色で、背景が透明なら白になります。ほかのアイコンは透明と形をそのまま保ちます。

SVGのロゴも使えますか？

はい。SVGはブラウザ内で元のサイズ（1024pxより小さい場合は1024px）で描画され、そこからすべてのアイコンが作られます。ほかのファイル（画像・フォント・スタイルシート）を参照しているSVGは画像として完全には描画できないため、不完全なアイコンを作る代わりにその旨を表示します。先にPNGで書き出すか、画像を埋め込んでください。

ファビコンを差し替えたのに古いものが表示されるのはなぜですか？

ブラウザがファビコンを長期間キャッシュするためです。Ctrl+F5（MacではCmd+Shift+R）でページを再読み込みするか、プライベートウィンドウでサイトを開くと、新しいアイコンが表示されます。

関連ツール