Generador de favicons

Suelta un logotipo, míralo en todos los tamaños reales y llévate favicon.ico, el juego PNG y el HTML.

PNG / JPEG / WebP / GIF / SVG, o suelta una en esta tarjeta

Añade una imagen (o cambia a letras) y todos los tamaños aparecerán aquí: no hay botón «generar».favicon.ico 16/32/48 · PNG 16 · 32 · 48 · 180 · 192 · 512 · site.webmanifest · HTML

Cómo se usa

  1. Elige una imagen o arrastra una a la tarjeta: todos los tamaños aparecen a la vez. No hay botón de generar: lo que ves es lo que se descarga.
  2. ¿Aún no tienes logotipo? Cambia a «Letra / emoji» y escribe uno o dos caracteres. El selector de color fija el fondo y la letra se vuelve negra o blanca según el contraste.
  3. Descarga el paquete, descomprímelo en la raíz de tu sitio, pega las etiquetas <link> copiadas en el <head> y recarga tu sitio: el icono de la pestaña debería estar ahí.

Ejemplo

Origen

logo.png · 512×512, forma «Redondeado»

Paquete (9 archivos)

favicon.ico (16/32/48)
favicon-16x16.png
favicon-32x32.png
favicon-48x48.png
apple-touch-icon.png (180)
android-chrome-192x192.png
android-chrome-512x512.png
site.webmanifest
snippet.html

El mismo origen con las mismas opciones produce PNG idénticos byte a byte y un ZIP idéntico byte a byte (la marca de tiempo del archivo se fija en 1980-01-01), así que el paquete se puede versionar y comparar con diff. Cambiar la forma solo recorta las esquinas; nunca redibuja la ilustración.

Alcance, límites y preguntas frecuentes

  • Sin exportación SVG. Un SVG que sobreviva a 16 px necesita trazados simplificados a mano; envolver el mapa de bits en SVG o dibujar texto con fuentes del sistema solo parecería arte vectorial. Conserva tu propio .svg junto a este juego PNG si lo quieres.
  • Las imágenes se ajustan, nunca se recortan. Un logotipo no cuadrado conserva márgenes transparentes: recórtalo o compónlo antes (el redimensionador y el convertidor de imágenes de este sitio pueden ayudarte).
  • Los iconos transparentes reciben un fondo de la plataforma: iOS pinta uno detrás de apple-touch-icon y algunos lanzadores de Android también. Para controlar el fondo, usa «Letra / emoji» o añade el fondo a la imagen de origen.
  • site.webmanifest solo enumera iconos, sin name ni short_name. Ese es el nombre de tu sitio, que esta herramienta no puede conocer; añade ambas claves después de descomprimir (name es opcional y los navegadores recurren al título de la página).
  • favicon.ico incluye 16, 32 y 48 px, no 64 ni 128. Eso cubre los navegadores modernos y Windows; añade más tamaños como PNG si los necesitas.
  • GIF / WebP animados: solo se usa el primer fotograma. Los favicons no se animan de todos modos.
  • Los iconos de letra se dibujan con la fuente de tu sistema, así que difieren entre macOS, Windows, Linux y móviles. El PNG congela lo que muestra tu dispositivo, y por eso tampoco hay selector de fuentes.
  • Sin consulta de URL ni comprobación en vivo: esta herramienta no acepta una dirección de sitio web y no puede verificar un favicon ya publicado. Tras publicar, abre tu sitio y mira la pestaña.
  • Límites: 20 MB por archivo y 8000 px por lado. Los orígenes de menos de 180 px se amplían para los iconos grandes y pueden verse borrosos.
  • Sin recorte, sin eliminación de fondo, sin lotes y sin historial: al recargar se parte de un estado vacío (no se guarda nada ni se escribe nada en la URL).

Lo que la gente suele necesitar después, una vez colocados los iconos.