Sobre Creador de favicons
El generador de favicons de Zyff convierte una imagen en el juego de iconos que una web necesita de verdad hoy: un favicon.ico multirresolución, PNG en múltiplos de 48 px para los resultados de Google, un apple-touch-icon de 180 px, iconos de PWA de 192 y 512 px, una variante enmascarable para el recorte de Android, un manifiesto web y las etiquetas del head que lo referencian todo. Cada tamaño sale de un único render cuadrado de alta resolución en vez de remuestrearse por separado, y la vista previa muestra los iconos de 16, 32, 48 y 64 px a su tamaño real, porque un logotipo que se convierte en papilla en una pestaña del navegador es el único problema que no arregla ningún ajuste de exportación. Suelta un PNG, JPG, WebP, AVIF o SVG y descarga el lote en un ZIP. La generación ocurre en los servidores de Zyff, en memoria y durante esa única petición, así que no se guarda ninguna copia de tu logotipo. Gratis, sin registro y sin marca de agua.
Cómo crear un favicon para tu web
Sube una imagen cuadrada
Suelta un PNG cuadrado, un SVG o un logotipo de alta resolución, idealmente de 512 px o más. Lo que no sea cuadrado se rellena para que quepa por defecto, o se recorta si cambias a Rellenar. Un SVG se rasteriza a plena resolución y no al tamaño que declare, y además se pasa tal cual como icon.svg.
Revisa los tamaños pequeños
La vista previa dibuja 16, 32, 48 y 64 px a su tamaño real, no reducidos desde uno grande. Casi todos los logotipos necesitan una marca simplificada, trazos más gruesos o un fondo sólido para seguir siendo legibles a 16 px, y si ahí no se lee, no habrá ajuste de exportación que lo salve.
Fija el margen del enmascarable
Android recorta los iconos con un círculo o un cuadrado redondeado que elige él, así que la versión enmascarable necesita su dibujo dentro de la zona segura sobre un fondo relleno. La vista previa dibuja esa zona segura como un círculo de puntos y muestra el resultado recortado junto al cuadrado completo.
Descarga el juego de iconos
Un botón exporta todo el conjunto en un ZIP: favicon.ico, los PNG en múltiplos de 48 px, el apple-touch-icon, los iconos de PWA de 192 y 512 px, la variante enmascarable y site.webmanifest. Los archivos sueltos se pueden descargar uno a uno desde la lista.
Pega las etiquetas HTML
Copia las etiquetas link y de manifiesto generadas en tu head, sube los archivos a la raíz de tu sitio y fuerza una recarga. Los navegadores guardan los favicons con mucha insistencia, así que un icono antiguo puede quedarse. Fija antes una ruta de publicación si los archivos no van a estar en la raíz.
Qué hace Creador de favicons
El juego de iconos moderno completo
Una sola subida produce favicon.ico, iconos PNG en múltiplos de 48 px, el apple-touch-icon, los iconos de PWA de 192 y 512 px que espera un manifiesto web, y el propio site.webmanifest, todo en un ZIP.
Tamaño para el resultado de búsqueda de Google
Google solo usa un favicon que sea cuadrado y múltiplo de 48 px, así que la exportación cubre 48, 96 y 144 px junto a los tamaños heredados de 16 y 32 px que piden los navegadores. Los tamaños elegibles se señalan en la lista de archivos.
Icono enmascarable de Android
Una exportación enmascarable aparte mantiene el dibujo dentro de la zona segura sobre un fondo relleno, así que el recorte en círculo o cuadrado redondeado de Android se lleva el margen y no tu logotipo. La vista previa muestra el recorte antes de descargar.
Vista previa a tamaño real de 16 px
Los tamaños pequeños se generan a escala 1:1, no reducidos desde uno grande. Es la única forma honesta de ver si tu marca sobrevive a una pestaña del navegador, y es la comprobación que se salta la mayoría de los generadores.
Color y margen por plataforma
iOS pinta de negro un icono transparente en la pantalla de inicio y aplica su propio cuadrado redondeado, así que el icono de Apple recibe su propio fondo y margen y se exporta sin redondear. Los iconos de navegador conservan su transparencia.
Etiquetas HTML para copiar y pegar
Recibes las etiquetas link y de manifiesto exactas para pegar en tu head, generadas a partir de los archivos que hay de verdad en tu descarga, así que nada apunta a un archivo que no exportaste. Elige el conjunto moderno mínimo o el listado completo.
Archivo ICO multirresolución
El .ico agrupa los fotogramas que elijas — 16, 32 y 48 px por defecto — en un solo archivo, que es lo que siguen pidiendo desde la raíz de tu sitio los navegadores antiguos, los accesos directos de Windows y algunos lectores de feeds.
El vector se pasa tal cual
Sube un SVG y se publica como icon.svg junto a los PNG, sin modificar. Los navegadores modernos lo prefieren y se mantiene nítido a cualquier tamaño, incluidas pantallas que aún no existen.
At a glance
| Formatos de entrada | PNG, JPG, WebP, AVIF, SVG, TIFF, GIF, HEIC |
|---|---|
| Archivos de salida | favicon.ico, iconos PNG, apple-touch-icon, iconos de PWA y enmascarable, icon.svg, site.webmanifest y browserconfig.xml, todo en un ZIP |
| Tamaños ICO | 16, 24, 32, 48, 64, 128 y 256 px (16, 32 y 48 por defecto) |
| Tamaños de icono PNG | De 16 a 512 px, incluidos los múltiplos de 48, 96 y 144 px que exige Google |
| Tamaños de iOS | 120, 152, 167 y 180 px (180 por defecto, que es todo lo que necesita el iOS actual) |
| Tamaños de PWA | De 48 a 512 px, más una variante enmascarable de 512 px |
| Tamaño máximo de archivo | 25 MB, hasta 100 megapíxeles |
| Generación | Todos los tamaños derivados de un maestro cuadrado de 1024 px, con lanczos3 y PNG sin pérdida |
Frequently asked questions
¿Qué tamaños de favicon necesita de verdad una web?
Muchos menos de lo que sugieren las viejas listas de veinte archivos. Un conjunto actual es un favicon.ico que agrupa 16, 32 y 48 px, un icono SVG o PNG para los navegadores modernos, un apple-touch-icon de 180x180 para las pantallas de inicio de iOS, y PNG de 192x192 y 512x512 referenciados desde un manifiesto web para Android y las instalaciones de PWA, con una variante enmascarable de 512 px para el recorte de Android.
¿Por qué no aparece mi favicon en los resultados de Google?
Google aplica sus propias reglas: el icono tiene que ser cuadrado, múltiplo de 48 px, rastreable y no bloqueado en robots.txt, coherente en todo el sitio, y referenciado con un valor de rel que reconozca, como icon o apple-touch-icon. Y aun cuando eso esté arreglado, Google solo actualiza el icono cuando vuelve a rastrear tu página de inicio, lo que puede tardar días o semanas.
¿Sigue haciendo falta favicon.ico?
Sigue mereciendo la pena publicarlo. Los navegadores modernos prefieren un icono SVG o PNG declarado en tu HTML, pero un favicon.ico en la raíz del sitio es el respaldo que piden por defecto varios clientes, incluidos navegadores antiguos, algunos rastreadores y algunos lectores de feeds. Mantenerlo cuesta unos pocos kilobytes.
¿Qué es un icono enmascarable?
Un icono enmascarable es un icono de PWA diseñado para sobrevivir a un recorte. Android aplica una forma de la plataforma, normalmente un círculo o un cuadrado redondeado, así que el icono necesita un fondo a sangre con lo importante dentro de una zona segura centrada de en torno al 80 por ciento del ancho. Se declara en el manifiesto con purpose fijado en maskable.
¿Dónde van los archivos de favicon en una web?
El .ico va tradicionalmente en la raíz como /favicon.ico, porque los navegadores piden esa ruta exacta aunque ninguna etiqueta HTML apunte a ella. Los demás archivos pueden vivir en cualquier sitio al que puedas referenciar, aunque la raíz o una carpeta /icons/ de primer nivel mantienen las rutas cortas. Referencia cada uno con una etiqueta link y enumera los tamaños de PWA en tu manifiesto.
¿De qué tamaño debe ser un apple-touch-icon?
180x180 píxeles es el que hay que publicar. iOS reduce ese único PNG para los dispositivos más pequeños, así que la larga lista de archivos apple-touch-icon por dispositivo ya no hace falta. Usa una imagen cuadrada y sin transparencia, ya que iOS compone el icono sobre un mosaico sólido y las zonas transparentes pueden salir negras.
¿Qué imagen debo subir para hacer un favicon?
Una imagen cuadrada de al menos 512 px, para que todos los tamaños sean una reducción y no una ampliación. Un SVG es todavía mejor: se rasteriza a plena resolución sea cual sea el ancho que declare, y además se publica como icon.svg. Una imagen no cuadrada se rellena para que quepa por defecto, o se recorta si cambias a Rellenar. Las fotografías rara vez funcionan: un favicon mide 16 px en casi todas las pantallas, y una marca simplificada se lee ahí donde una detallada no.
¿Zyff conserva el logotipo que subo?
No. La imagen se mantiene en memoria durante la única petición que genera tus iconos y se descarta al enviar la respuesta. No se escribe nada en disco, así que no hay ninguna copia que borrar después ni ningún historial que limpiar. El generador es gratis y no necesita cuenta.