Favicon generator

Favicon Generator

Turn one image into a complete favicon package — favicon.ico, all PNG sizes, apple-touch-icon, Android icons, a manifest, and the HTML — in a single zip.

favicon.ico + PNGs100% freeNo sign-upPNG · JPG · WebP · SVG

Faviconを作成する画像をドロップ

ドラッグ&ドロップ、貼り付け、またはファイルを選択

PNG · JPG · WebP · SVG — アイコンはお使いのデバイスで生成

One image in, a full favicon set out

A modern favicon is not a single file — browsers, iOS, Android, and installable PWAs each want their own sizes and formats. This generator takes one square-ish image and produces the whole set: a favicon.ico with 16, 32, and 48 px, standalone PNG favicons up to 512 px, a 180 px apple-touch-icon, 192 and 512 px Android icons, a site.webmanifest, and a copy-paste HTML snippet.

Everything is rendered on your device with the canvas API, then bundled into a zip you download. Add a background color, padding, or rounded corners if your artwork needs a little breathing room inside the icon frame.

How to generate a favicon

  1. Add your image — drag & drop, paste, or choose a PNG, JPG, WebP, or SVG.
  2. Adjust the look — keep it transparent or pick a background, and tweak padding and corner rounding.
  3. Preview every size — check the live 16–512 px previews so nothing looks muddy when small.
  4. Download the zip — get favicon.ico, the PNGs, the manifest, and the HTML, then paste the snippet into your <head>.

Tip: design for the smallest size

At 16×16 a detailed logo turns to mush. Use a bold, simple mark with strong contrast, and add a little padding so the artwork is not clipped by rounded tab corners.

完全なファビコンセット: sizes and where each is used

現代のファビコンは 1 つのファイルではなく小さなセットです。ブラウザ、iOS、Android、インストール可能な PWA がそれぞれ異なるサイズと形式を探すためです。生成されるものと各パーツの使われ方を正確に示します。

Size File Where it's used
16 × 16 px favicon.ico + favicon-16x16.png 標準(1×)の画面密度でのブラウザタブとアドレスバーのアイコン。最も小さく、最も多く見られるサイズです。
32 × 32 px favicon.ico + favicon-32x32.png 高 DPI(Retina)ディスプレイでのタブとブックマークのアイコン、および Windows タスクバーのショートカット。
48 × 48 px favicon.ico + favicon-48x48.png より大きなサイズを選ぶデスクトップショートカットや Windows サイトタイル向けに favicon.ico に同梱されます。
180 × 180 px apple-touch-icon.png サイトを iPhone や iPad のホーム画面に追加したときに iOS Safari が表示するアイコン。
192 × 192 px android-chrome-192x192.png インストール済み PWA の Android ホーム画面/ランチャーアイコンで、ウェブマニフェストに記載されます。
512 × 512 px android-chrome-512x512.png PWA のスプラッシュ画面と高解像度アプリアイコン。マニフェストのマスカブルアイコンとしても使われます。

Format & container

重要な 3 つの形式がすべて揃います。レガシーと Windows 向けのマルチサイズ .ico、最新ブラウザ向けの鮮明な PNG、PWA インストール向けのマニフェストアイコン。だから 1 回のアップロードですべてをカバーできます。

How it's wired into your page

                <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">
              

Tip

まず 16 × 16 を前提に設計しましょう。細かいロゴはこのサイズではつぶれてしまうので、強いコントラストと少しの余白を備えた大胆でシンプルなマークを使い、大きいサイズは高解像度の元データから縮小させましょう。

すべてのFavicon・アイコンツール

よくある質問

What sizes does the favicon.ico include?

The generated favicon.ico packs 16, 32, and 48 px — the sizes browsers pick from for tabs, bookmarks, and the address bar. Larger displays use the standalone PNG icons.

Where are my icons generated?

Everything happens in your browser, so the files are created on your own device. How any data associated with the tool is handled is described in our privacy policy.

Do I need the web manifest?

If you want your site to be installable on Android or as a PWA, yes — site.webmanifest points to the 192 and 512 px icons. Otherwise it's harmless to include and future-proofs your setup.

What image format should I upload?

An SVG or a large PNG gives the crispest small icons because there is more detail to downscale from. JPG and WebP also work; just use the highest resolution you have.

他の画像ツール