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

この無料ファビコンジェネレーターは、JPG、PNG、WebP、SVGの1枚の画像から、favicon.ico、Apple touch icon、16×16から512×512までのPNGアイコンを作成します。画像はお使いのデバイスから外に出ません。

ここに画像をドロップしてください

またはクリックして選択。JPG、PNG、WebP、SVGに対応

画像を選択

ファビコン作成ツールの活用シーン

ウェブサイトを公開する際に、ファビコン一式が必要な開発者やデザイナーの方に役立ちます。

ウェブサイトの公開

公開日の前にファビコンを追加しましょう。ロゴをアップロードし、ファイルをサイトのルートフォルダに置いて、HTMLスニペットを各ページのheadに貼り付けるだけです。

ブラウザのタブやブックマーク用のfavicon.ico
ページのheadにそのまま貼り付けられる7つのlinkタグ
スニペットのファイルパスはZIPのファイル名と一致

PWAとアプリのアイコン

ウェブアプリに必要なアイコンサイズを用意できます。icon-192x192.pngとicon-512x512.pngをマニフェストに追加すれば、iPhoneのホーム画面用にはapple-touch-icon.pngが対応します。

ウェブアプリのマニフェスト用の192pxと512pxのPNG
iOSのホーム画面用の180×180のApple touchアイコン
サイトアイコン用の512×512のPNG

ブランドのリニューアル

ロゴが新しくなったら、新しいファイルからファビコンのセットを作り直し、古いファイルと置き換えましょう。ファイル名は変わらないので、サイトにあるタグはそのまま使えます。

更新したSVGロゴからすべてのサイズを作り直せます
同じ名前で新しいfavicon.icoに差し替えられます
新しいマークの背景を白、黒、透過から試せます

このファビコンジェネレーターで作れるもの

1枚の画像から1つのfavicons.zipを作成。favicon.ico、7種類のサイズのPNG、HTMLスニペットが入ります。最初に透過か単色の背景を選んでください。

1枚の画像からfavicon.icoとPNGを作成

ロゴを1枚アップロードするだけで、16、32、48 pxを収録したfavicon.icoと、16×16から512×512までの7つのPNGファイルを作成できます。すべてのファイルは1つのfavicons.zipにまとまります。

favicon.icoに16、32、48 pxを収録
16×16から512×512までの7種類のPNGアイコン
9個のファイルを1つのfavicons.zipに保存

今すぐ試す

透過または単色のファビコン背景

背景を透過のままにするか、白、黒、青、赤、緑で塗りつぶせます。正方形でないロゴは、切り抜かれずに正方形の中央に収まるよう調整されます。

背景はデフォルトで透過
5色の単色から選択可能
横長のロゴは切り抜かず中央に配置

今すぐ試す

Apple touchアイコンとPWAアイコン

ZIPには、iPhoneとiPadのホーム画面用の180×180のapple-touch-icon.pngに加えて、Androidやウェブアプリのマニフェスト用のicon-192x192.pngとicon-512x512.pngが入っています。

コピーしてすぐ使えるHTMLスニペット

「HTMLをコピー」をクリックすると、ページのhead用の7つのlinkタグを取得できます。同じタグはsnippet.htmlとしてZIPにも保存され、サイトのルートにあるファイルを指しています。

SVGロゴにも対応

SVGロゴのほか、PNG、JPG、WebPファイルもアップロードできます。512×512のアイコンを最もくっきり仕上げるには、幅512ピクセル以上の正方形の画像、または幅と高さが設定されたSVGを用意してください。

無料、登録不要、透かしなし

アカウントも透かしも1日の制限もなく、必要なだけファビコンのセットを作成できます。ロゴはブラウザ内でリサイズされ、画像が当社に送信されることはありません。

3ステップでファビコンを作成する方法

ロゴをアップロードします。

JPG、PNG、WebP、SVGのいずれか1つのファイルをボックスにドロップするか、クリックして選択してください。幅512ピクセル以上の正方形の画像なら、最もくっきり仕上がります。

プレビューを確認します。

すべてのサイズが一度に作成されます。16、32、48、96、180 pxのアイコンを実寸で確認してから、透過か単色の背景を選んでください。

ZIPをダウンロードします。

「ZIPをダウンロード」をクリックしてfavicons.zipを保存してください。ファイルをサイトのルートフォルダに置き、HTMLスニペットを各ページのheadに貼り付けます。

よくある質問

ファビコンのサイズ、ファイル形式、背景、サイトへのアイコンの追加方法に関する回答です。

画像からファビコンを作るにはどうすればよいですか?

このページでJPG、PNG、WebP、SVGのいずれかをアップロードすると、ファビコンジェネレーターがすべてのサイズをすぐに作成します。背景色が必要な場合は選択し、「ZIPをダウンロード」をクリックしてください。favicon.ico、7つのPNGアイコン、HTMLスニペットが1つのファイルにまとまっています。

ファビコンのサイズはどれくらいにすべきですか?

多くのサイトでは、ブラウザのタブ用に16×16と32×32、Apple端末用に180×180、Androidやウェブアプリ用に192×192と512×512が必要です。このツールはそれらをすべて作成し、さらに48×48と96×96も追加して、16、32、48をfavicon.icoにまとめます。

favicon.icoは今でも必要ですか?

最近のブラウザはlinkタグで指定したPNGのファビコンを表示するため、必須ではありません。ただ、多くのブラウザやアプリは今でもデフォルトでサイトのルートにある/favicon.icoを取得しにくるので、用意しておくとログにアイコン欠落のエラーが出なくなります。ZIPには16、32、48 pxを収録したfavicon.icoが含まれています。

PNGファイルをファビコンとして使えますか?

はい。ページからrel="icon"タグでリンクすれば、ブラウザはPNGのファビコンを表示します。ZIPには16、32、48、96、180、192、512ピクセルのPNGが入っており、スニペットはそのうち6つとfavicon.icoをリンクしているので、そのまま貼り付けて使えます。

ウェブサイトにファビコンを追加するにはどうすればよいですか?

favicons.zipを解凍し、サイトのルートフォルダ(トップページと同じ場所)に置いてください。次に、snippet.htmlのタグを各ページのhead内に貼り付けます。タグには/favicon.icoのようなパスが使われているため、ファイルはサブフォルダではなくルートに置く必要があります。

Apple端末には別のファビコンが必要ですか?

はい。iPhoneやiPadでは、サイトがホーム画面に追加されるときに180×180のapple-touch-icon.pngが使われます。このジェネレーターはそのファイルをZIPに含めており、スニペットではrel="apple-touch-icon"でリンクされているため、Safariが自動的に見つけます。

SVGからファビコンを作れますか?

はい。SVGに幅と高さが設定されていれば作成できます。ページにドロップすると、favicon.icoとすべてのサイズのPNGになります。viewBoxだけのSVGは、空白になったりつぶれて表示されたりすることがあるため、先にサイズを指定してください。SVG内でリンクしているフォントや画像は読み込まれない場合があるので、テキストはパスに変換してください。

背景なしのファビコンを作るにはどうすればよいですか?

背景はデフォルトの「透過」のままにしてください。背景が透けているPNGやSVGなら、どのサイズでも透過が保たれます。JPGは透過に対応していないため、元の背景が残ります。先に背景削除ツールで背景を消してから、PNGとして保存してください。

ロゴが正方形でない場合はどうなりますか?

ロゴ全体が正方形に収まるように縮小され、中央に配置されるため、切り取られたり引き伸ばされたりすることはありません。上下または左右にできる余白は、透明のままか、選択した背景色になります。正方形いっぱいに表示したい場合は、先に画像トリミングツールでロゴを切り抜いてください。

PWA用のウェブマニフェストも作成されますか?

いいえ。ZIPにはマニフェストで使うicon-192x192.pngとicon-512x512.pngが入っていますが、site.webmanifestファイルは含まれません。この2つを、お使いのマニフェストのiconsリストに、sizesを192x192と512x512、typeをimage/pngとして追加してください。