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

Suelta una imagen para crear un favicon

Arrastra y suelta, pega o elige un archivo

PNG · JPG · WebP · SVG — iconos creados en tu dispositivo

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.

el conjunto completo de favicons: sizes and where each is used

Un favicon moderno no es un solo archivo, sino un pequeño conjunto, porque los navegadores, iOS, Android y las PWA instalables buscan cada uno un tamaño y formato distinto. Esto es exactamente lo que se genera y dónde se usa cada pieza.

Size File Where it's used
16 × 16 px favicon.ico + favicon-16x16.png El icono de la pestaña del navegador y de la barra de direcciones con densidad de pantalla estándar (1×); el tamaño más pequeño y más visto.
32 × 32 px favicon.ico + favicon-32x32.png El icono de la pestaña y del marcador en pantallas de alta densidad (Retina), y el acceso directo de la barra de tareas de Windows.
48 × 48 px favicon.ico + favicon-48x48.png Incluido dentro de favicon.ico para accesos directos de escritorio y mosaicos de sitio de Windows que eligen un tamaño mayor.
180 × 180 px apple-touch-icon.png El icono que iOS Safari muestra cuando se añade un sitio a la pantalla de inicio del iPhone o iPad.
192 × 192 px android-chrome-192x192.png El icono de la pantalla de inicio / lanzador de Android para una PWA instalada, indicado en el manifiesto web.
512 × 512 px android-chrome-512x512.png La pantalla de bienvenida de la PWA y el icono de la app en alta resolución, también usado como icono enmascarable del manifiesto.

Format & container

Obtienes los tres formatos que importan: un .ico multitamaño para sistemas heredados y Windows, PNG nítidos para navegadores modernos y los iconos del manifiesto para instalaciones de PWA, de modo que una sola carga lo cubre todo.

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

Diseña primero para 16 × 16: un logotipo detallado se vuelve ilegible a ese tamaño, así que usa una marca sencilla y contundente con buen contraste y algo de margen, y deja que los tamaños mayores se reduzcan desde tu fuente en alta resolución.

Todas las herramientas de favicon e iconos

Preguntas frecuentes

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.

Más herramientas de imagen