Generador de favicon

El favicon aparece en pestañas y marcadores; refuerza marca y aspecto profesional.

Beneficios

• Marca: Icono reconocible.
• Tamaños: 16, 32, 48 px y más.
• Formatos: ICO y PNG.
• Fácil: Subir y descargar.
• Calidad: Buen maestro = buen icono.

1. 1
   Aporte su motivo: Suelte un logotipo: PNG, JPG, WebP, AVIF, GIF, BMP o SVG. Sin logotipo, cambie a Texto y escriba una o dos letras, o elija un emoji.
2. 2
   Elija cómo se encuadra: Ajustar conserva todo el logotipo y rellena el resto, Rellenar recorta hasta los bordes, Estirar ignora la forma. Añada margen si Android va a recortar su icono, y redondee las esquinas si las quiere redondas.
3. 3
   Defina los fondos: Deje el icono transparente o dele un color. El fondo de iPhone se define aparte: iOS no admite transparencia ahí y muestra un icono translúcido sobre negro.
4. 4
   Nombre el sitio: El nombre, el nombre corto y el color del tema van a site.webmanifest y a la etiqueta theme-color, que es lo que lee un aviso de instalación.
5. 5
   Descargue e instale: Una pulsación le da un ZIP. Ponga todos los archivos en la raíz de su sitio y pegue en el head las etiquetas link copiadas.

Su logotipo se reduce a cada tamaño de icono en su dispositivo y luego se escribe en favicon.ico, el conjunto PNG, site.webmanifest y el HTML que los referencia.

Proceso

• Carga: El archivo se decodifica una vez y se conserva, así que cambiar un ajuste nunca vuelve a leerlo.
• Encuadre: El logotipo se ajusta, rellena o estira en un cuadrado, con su margen y su redondeo.
• Reducción: Cada tamaño sale del original, nunca del tamaño superior, de modo que ninguno hereda la falta de nitidez de otro.
• Placas de plataforma: El icono de iPhone recibe un fondo opaco, porque iOS muestra uno transparente sobre negro.
• Empaquetado: favicon.ico toma las entradas de 16, 32 y 48; los PNG, el manifiesto y el marcado se escriben al lado.
• Salida: Un ZIP con todos los archivos, cada uno con el nombre que esperan los pasos de instalación.

• Tamaños de icono: Favicons PNG de 16, 32, 48 y 96 px, un icono de iPhone de 180 px e iconos de app de 192 y 512 px.
• favicon.ico: Un archivo con entradas de 16, 32 y 48 px, escrito para que lo lean tanto los navegadores de escritorio como Windows.
• site.webmanifest: El manifiesto y los dos tamaños de icono sin los cuales no aparece el aviso de instalación.
• Marcado: Las etiquetas link para pegar en su head, listas para copiar con una pulsación.
• Paquetes de plataforma: Mosaicos de Windows, densidades de Android y paso de vector con Pro.

Nuevo sitio, rediseño o PWA.

Casos

• Desarrollo web: Publique favicon.ico junto a index.html.
• Consistencia de marca: Alinee el icono de pestaña con su logo.
• Móvil: Genere apple-touch-icon y tamaños de launcher.
• Windows: Cree imágenes de mosaico para sitios fijados.
• Trabajo con clientes: Entregue un set completo en una sola pasada.

Use imagen cuadrada grande (512+ px) para claridad al reducir.

Notas

• 16x16 y 32x32 son los tamaños de favicon más usados.
• ICO puede incluir varios mapas de bits en un solo archivo.
• PNG es flexible, pero requiere un archivo por tamaño salvo que use ZIP.
• El favicon aparece en pestañas, historial y marcadores.
• Una fuente de alta calidad reduce la pérdida al redimensionar.

Formas simples, alto contraste, probar en pestañas reales.

Calidad

• Use una imagen maestra nítida y cuadrada.
• Evite texto pequeño o detalles finos que se pierdan a baja resolución.
• Pruebe en pantallas normales y Retina/HiDPI.
• Mantenga colores de marca consistentes con su sitio.

Límites

• Fotos muy detalladas que se vuelven borrosas a 16x16.
• Imágenes de origen de muy baja resolución.
• Diseños que dependen de degradados muy finos.
• Casos donde necesita entrega solo vectorial/SVG.

Impulsado por algoritmos optimizados de procesamiento de imagen.

• Escalador de imágenes
• Visor de metadatos
• Convertidor de imágenes
• Compresor de imágenes