Skip to content

Generador de Favicon online

En el navegador — sin subida
Última verificación mayo 2026 — corre en tu navegador

Generador de Favicon — favicon.ico + 8 Tamaños PNG vía Lanczos3 + Encoder ICONDIR del Codebase

Suelta una imagen cuadrada y obtén un set favicon íntegro en un clic: un favicon.ico multi-resolución real (contenedor ICO de Microsoft empaquetando tamaños 16/32/48/64/128/256 vía el encoder ICONDIR + ICONDIRENTRY del codebase src/lib/ico-encoder.ts) + ocho variantes PNG independientes (16, 32, 48, 64, 128, 180, 192, 512 píxeles) cubriendo cada superficie moderna — pestañas de navegador escritorio (16/32 según la convención favicon de IE 5 1999), iconos de tipo de archivo del Explorador de Windows (48 según el tamaño icono-grande de Microsoft Windows), Apple touch icon (180 según la Safari Web Content Guide iOS 8+), Android Chrome pantalla inicio (192 según la spec W3C Web App Manifest), y splash screen del manifest PWA (512 según el mínimo W3C Web App Manifest). Cada tamaño se reduce vía la implementación Lanczos3 del codebase (src/lib/lanczos.ts — reformulación de Duchon 1979 del filtro sinc con ventana, más nítido que el bilineal/bicúbico por defecto de Canvas drawImage a tamaños icon-grade). La salida es un bundle ZIP descargable (favicon.ico + 8 archivos favicon-NxN.png) listo para dejar en la raíz de tu sitio + referenciar vía las declaraciones HTML head `<link>` estándar. Los archivos nunca salen del dispositivo.

Relacionado: PNG a ICO Redimensionar Imagen Redimensionar Redes PNG a JPG JPG a PNG WebP a JPG

Cómo generar el set favicon

  1. Arrastra una imagen cuadrada a la herramienta (512x512 PNG con fondo transparente es ideal). Las imágenes no cuadradas se centran-recortan al cuadrado mayor posible automáticamente.
  2. La herramienta genera 8 variantes PNG (16/32/48/64/128/180/192/512) Y un favicon.ico multi-resolución real (empaquetando 16/32/48/64/128/256 según la spec ICONDIR de Microsoft). Todos los tamaños usan downscale Lanczos3 para nitidez icon-grade.
  3. Descarga archivos individuales vía los botones por tamaño, o lleva el set entero como bundle ZIP (favicon.ico + 8 favicon-NxN.png).
  4. Deja los archivos en la raíz de tu sitio y cablea el HTML head: `<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>` + `<link rel='apple-touch-icon' sizes='180x180' href='/favicon-180x180.png'>` + un site.webmanifest apuntando a los PNG 192 + 512 para instalación PWA + `<link rel='icon' href='/favicon.ico' sizes='any'>` como respaldo heredado.
  5. Verifica el stack favicon con caniuse, el favicon checker de RealFaviconGenerator, o la pestaña Application → Manifest del DevTools de tu navegador.

Casos de uso comunes

  • Producir el set favicon íntegro para el lanzamiento de una web nueva — cubre cada superficie de navegador (pestañas escritorio, Apple touch icon, pantalla inicio Android Chrome, instalación PWA) en una pasada.
  • Regenerar el stack favicon tras un rebranding para que cada plataforma tome el nuevo logo limpio sin reescalado uno-a-uno.
  • Generar el set de iconos PWA-ready (192 + 512 para el manifest, 180 Apple touch icon) para una Progressive Web App que necesita arte de prompt-de-instalación en Android + iOS.
  • Producir el respaldo /favicon.ico heredado emparejado con favicons PNG declarados modernos vía `<link rel='icon' sizes='WxH' type='image/png'>` para maximizar cobertura de navegador + Explorador de Windows.
  • Construir variantes de icono para una extensión de navegador o herramienta de desarrollador que requiere varias resoluciones cuadradas en un único ZIP empaquetado.

Preguntas frecuentes

¿La salida incluye un favicon.ico real?

Sí — el ZIP de salida incluye un favicon.ico multi-resolución real empaquetando los tamaños estándar 16/32/48/64/128/256 vía el encoder ICONDIR + ICONDIRENTRY del codebase src/lib/ico-encoder.ts (PNG-en-ICO 32bpp ARGB, formato Vista RTM 8 de noviembre de 2006). El .ico se construye del lado navegador, junto con las 8 variantes PNG independientes. Puedes usar el favicon.ico como el respaldo /favicon.ico heredado (solicitado automáticamente por cada navegador cuando ninguna declaración `<link rel='icon'>` coincide, además de requerido por IE 8 y anteriores + Explorador de Windows + iconos de acceso directo de escritorio) y usar los PNG independientes para el mecanismo declarado moderno `<link rel='icon' sizes='WxH' type='image/png'>` según WHATWG HTML.

¿Qué tamaño usar para la fuente?

Usa un PNG de 512x512 con fondo transparente. El tamaño 512x512 del PWA manifest es la mayor salida que la herramienta genera; si tu fuente es menor de 512, el PNG 512 quedará suave porque Lanczos3 no puede recuperar detalle que no estaba en la fuente. Fuentes mayores (1024x1024, 2048x2048) funcionan bien — se reducen Lanczos3 a cada tamaño objetivo en una sola pasada. Cuadrada es requerida (las fuentes no cuadradas se centran-recortan al cuadrado mayor posible).

¿Cómo cableo el HTML head?

Deja favicon.ico + favicon-32x32.png + favicon-16x16.png + favicon-180x180.png + favicon-192x192.png + favicon-512x512.png en la raíz del sitio, después en `<head>`: `<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='/favicon-180x180.png'>` + `<link rel='manifest' href='/site.webmanifest'>` + `<link rel='icon' href='/favicon.ico' sizes='any'>`. El site.webmanifest es un archivo JSON que la herramienta NO genera — escríbelo a mano o vía un generador de webmanifest referenciando los PNG 192 + 512 con `"purpose": "any maskable"` para iconos adaptativos de Android.

¿Y los favicons SVG?

Los navegadores modernos soportan favicons SVG declarados vía `<link rel='icon' href='/icon.svg' type='image/svg+xml'>` — Chrome 80+ (lanzado 4 de febrero de 2020), Firefox 41+ (lanzado 22 de septiembre de 2015), y macOS Safari 15.6+ (lanzado 20 de julio de 2022). El favicon SVG escala sin pérdida a cualquier resolución, lo cual es la práctica recomendada moderna para navegadores de escritorio. Esta herramienta genera ráster (PNG + ICO) únicamente — para el favicon SVG, redáctalo a mano o expórtalo desde una herramienta de diseño vectorial (Figma, Illustrator, Inkscape) y añade la declaración `<link rel='icon' type='image/svg+xml'>` junto a las declaraciones PNG + ICO que la salida de esta herramienta soporta.

¿Por qué downscale Lanczos3 en lugar del valor predeterminado de Canvas?

El imageSmoothingQuality por defecto de Canvas (predeterminado del navegador; ajustable a 'low' / 'medium' / 'high') usa un filtro bilineal o bicúbico — adecuado para downscaling de imagen general pero produce bordes notablemente más suaves a tamaños icon-grade (16x16, 32x32) donde cada píxel importa. Lanczos3 (reformulación de Duchon 1979 del filtro sinc con ventana) preserva la nitidez a tamaños pequeños usando un kernel más amplio de 6 taps que aproxima mejor la respuesta sinc ideal. El helper del codebase src/lib/lanczos.ts es lo que ImageGridSplitter, png-to-ico y esta herramienta usan para downscales icon-precisos. El coste CPU es aproximadamente 2-3× el bilineal, irrelevante para los 8 tamaños PNG + 6 tamaños ICO (sub-200ms total).

¿Se suben mis archivos?

No. La decodificación + downscale Lanczos3 por tamaño + codificación PNG + empaquetado del contenedor ICO + bundling ZIP corren todos del lado cliente vía WHATWG Canvas drawImage + los helpers Lanczos y ICO-encoder del codebase + la librería client-zip. La pestaña Network de DevTools muestra cero peticiones de subida durante la conversión.

Qué genera esta herramienta y cómo cablearlo en tu HTML

El ZIP de salida contiene nueve archivos: un favicon.ico multi-resolución real (construido vía el encoder src/lib/ico-encoder.ts del codebase según la spec ICONDIR + ICONDIRENTRY de Microsoft — la cabecera de 6 bytes + entrada de 16 bytes por tamaño + bloques de datos PNG-en-ICO 32bpp ARGB concatenados; formato PNG-en-ICO de Microsoft Vista RTM 8 de noviembre de 2006) más ocho variantes PNG independientes a 16, 32, 48, 64, 128, 180, 192 y 512 píxeles. El cableado HTML head estándar según WHATWG HTML Living Standard + Apple Safari Web Content Guide + spec W3C Web App Manifest: deja favicon.ico + favicon-32x32.png + favicon-16x16.png + favicon-180x180.png + favicon-192x192.png + favicon-512x512.png en la raíz del sitio, después declara `<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='/favicon-180x180.png'>` + `<link rel='manifest' href='/site.webmanifest'>` (el JSON manifest declara los PNG 192 + 512 para instalación PWA) + `<link rel='icon' href='/favicon.ico' sizes='any'>` como respaldo heredado. Los navegadores modernos (Chrome 4+, Firefox 3+, Safari 4+, Edge 12+) prefieren los recursos PNG declarados vía `<link>`; el favicon.ico se solicita automáticamente como respaldo cuando ninguna declaración `<link>` coincide con el contexto solicitado (Explorador de Windows, iconos de acceso directo de escritorio, IE 8 y anteriores — origen IE 5 vía Bharat Shyam en Microsoft, lanzamiento IE 5 18 de marzo de 1999 — también necesitan el .ico). El downscale Lanczos3 del codebase es lo que da nitidez icon-grade a los tamaños 16x16 y 32x32 donde cada píxel importa; el bilineal/bicúbico (smoothing por defecto de Canvas drawImage) produce bordes notablemente más suaves a esas escalas. El Apple touch icon de 180px es el tamaño único especificado por la Safari Web Content Guide desde iOS 8 (auto-reducido por Safari para variantes iPad mini Retina + iPhone más antiguas). Los tamaños 192 + 512 del manifest PWA son la recomendación mínima del W3C Web App Manifest; algunas plataformas (iconos adaptativos maskable de Android Chrome) prefieren un 512x512 con declaración `purpose: 'maskable'` donde el arte se sitúa dentro de la zona segura central del 80% (círculo 409x409) para que el SO pueda recortar a formas círculo / squircle / cuadrado redondeado sin clipping. Los archivos nunca salen del dispositivo — Lanczos3 + codificación ICO + bundling ZIP corren todos del lado cliente.

  • Bundle ZIP de salida: 1 favicon.ico multi-resolución + 8 variantes PNG independientes (favicon-NxN.png)
  • favicon.ico empaqueta tamaños 16/32/48/64/128/256 según la spec ICONDIR + ICONDIRENTRY de Microsoft vía el codebase src/lib/ico-encoder.ts (PNG-en-ICO 32bpp ARGB, formato Vista RTM 8 de noviembre de 2006)
  • Variantes PNG 16/32/48/64/128/180/192/512 cubren cada superficie favicon moderna: pestaña escritorio + Explorador de Windows + Apple touch icon + Android Chrome + PWA manifest
  • Apple touch icon 180x180 según Apple Safari Web Content Guide iOS 8+ (tamaño único auto-reducido por Safari)
  • Tamaños PWA manifest 192 + 512 según el mínimo W3C Web App Manifest (pantalla inicio Android Chrome + splash screen)
  • Downscale Lanczos3 por tamaño para nitidez icon-grade vía el codebase src/lib/lanczos.ts (más nítido que el valor por defecto de Canvas drawImage a tamaños pequeños)
  • En el navegador vía WHATWG Canvas drawImage + Lanczos3 + encoder ICO del codebase + bundling ZIP con client-zip — sin subida
  • Opera en sRGB (IEC 61966-2-1:1999); las imágenes origen sin perfil ICC embebido se interpretan como sRGB

Gratis. Sin registro. Sin subidas. Anuncios mediante AdSense (con consentimiento).

Fuentes (9)
  • Microsoft Corporation (1985). ICO Icon File Format — ICONDIR + ICONDIRENTRY container structure. learn.microsoft.com/en-us/previous-versions/ms997538(v=msdn.10) — target favicon.ico container format used for the legacy /favicon.ico fallback; the in-tree src/lib/ico-encoder.ts implementation writes the 6-byte ICONDIR header + 16-byte ICONDIRENTRY-per-size + concatenated PNG-in-ICO 32bpp ARGB data blocks per Microsoft's spec.
  • Microsoft Corporation (2006). ICO PNG-encoded image data (Windows Vista large icons). devblogs.microsoft.com/oldnewthing/20101022-00 (Raymond Chen, 22 October 2010) — Windows Vista (RTM 8 November 2006; general consumer availability 30 January 2007) introduced PNG-compressed image data inside the ICO container in 32bpp ARGB format; the in-tree encoder uses this format for every embedded ICO size since it preserves alpha cleanly + keeps file size small.
  • Apple Inc. (live). Safari Web Content Guide — Configuring Web Applications: apple-touch-icon. developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html — Apple touch icon mechanism: place an icon file in PNG format named apple-touch-icon.png in the root document folder OR declare via `<link rel='apple-touch-icon' sizes='180x180' href='...'>`; since iOS 8 the recommended size is 180x180 pixels (single size, auto-downscaled by Safari for older iPad mini Retina + iPhone variants).
  • W3C (live). Web App Manifest — Working Draft (icons + maskable purpose). w3.org/TR/appmanifest — standardised PWA install metadata; minimum recommendation per Chromium/web.dev guidance: 192x192 (Android Chrome home screen) + 512x512 (PWA splash screen + maskable adaptive icon). Maskable icon requires `"purpose": "any maskable"` declaration with artwork inside the centre 80% safe-zone (409x409 circle) per developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest/Reference/icons.
  • WHATWG (live). HTML Living Standard — link rel='icon' + sizes attribute + apple-touch-icon. html.spec.whatwg.org/multipage/links.html#rel-icon + html.spec.whatwg.org/multipage/semantics.html#attr-link-sizes — the modern declared favicon mechanism per browser auto-fetch ordering: declared `<link rel='icon' sizes='WxH' type='image/png'>` resources rank ahead of /favicon.ico when matching context, but /favicon.ico is auto-fetched as the fallback when no `<link>` declaration matches; supported across Chrome 4+, Firefox 3+, Safari 4+, Edge 12+.
  • Shyam, B. (Microsoft Corporation) (1999). favicon.ico convention introduced in Internet Explorer 5. thehistoryoftheweb.com/how-we-got-the-favicon — Bharat Shyam at Microsoft introduced the favicon convention shipped with Internet Explorer 5 (released 18 March 1999); /favicon.ico at site root is the legacy fallback every browser still auto-fetches today, and the only mechanism IE 8 and earlier (Windows Explorer + desktop-shortcut icons too) accepts.
  • Duchon, C. E. (1979). Lanczos Filtering in One and Two Dimensions. Journal of Applied Meteorology Vol. 18 No. 8 (August 1979) pp. 1016-1022 — Lanczos3 algorithm reformulation of the windowed sinc filter; the in-tree src/lib/lanczos.ts implementation uses the 6-tap kernel (a=3) for sharper icon-grade downscaling than Canvas drawImage's default bilinear/bicubic at small target sizes (16x16, 32x32). Cluster 12 OI png-to-ico + cluster 13 OI favicon-generator both use this helper.
  • International Electrotechnical Commission (IEC) (1999). Multimedia systems and equipment — Colour measurement and management — Part 2-1: Default RGB colour space — sRGB. IEC 61966-2-1:1999 — default 8-bit RGB colour space the Canvas 2D path operates in; source images without an embedded ICC profile are interpreted as sRGB by the browser decoder during the load step.
  • Cornell, T. (client-zip) (live). client-zip — Streaming ZIP creation in the browser. github.com/Touffy/client-zip (MIT license) v2.x — minimal-footprint ZIP creation library used by the tool to bundle the favicon.ico + 8 PNG variants into the downloadable favicons.zip; streams to the browser without loading the entire archive into memory.

Son las especificaciones del W3C, ISO/IEC, ITU-T e IETF que la herramienta implementa o sobre las que se apoya. Localízalas en w3.org, iso.org, itu.int o datatracker.ietf.org.

Patrocinado

Por ·