Generador de favicon

Funciones

• favicon.ico con 16, 32 y 48 empaquetados en un ICO estándar
• apple-touch-icon.png (180), icon-192.png e icon-512.png
• Un juego completo opcional que añade 24, 64, 96, 128 y 256
• Las imágenes no cuadradas se recortan al centro, nunca se deforman
• Aplanado sobre blanco opcional (algunas plataformas pintan la transparencia como un bloque negro)
• Un aviso claro cuando la fuente es pequeña y los iconos se ampliaron
• No se sube nada: los iconos se generan en el navegador

Cómo se usa

1. Arrastra una imagen (cuadrada o casi)
2. Elige el conjunto de tamaños y si quieres el ICO y el aplanado sobre blanco
3. El juego entero aparece de una vez
4. Descárgalos uno a uno, o usa Descargar todo

Preguntas frecuentes

¿Dónde van estos archivos?

A la raíz del sitio, referenciados desde el `<head>`: `<link rel="icon" href="/favicon.ico" sizes="any">`, `<link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png">`, `<link rel="apple-touch-icon" href="/apple-touch-icon.png">`. El ICO en la raíz no es opcional: cuando una página no declara icono, los navegadores piden `/favicon.ico` de todos modos.

¿Por qué el icono tiene que ser cuadrado?

Porque todas las plataformas lo colocan en una ranura cuadrada. Una imagen no cuadrada metida ahí se estira; por eso esta herramienta recorta al centro la mayor región cuadrada. Eso pierde los lados (o arriba y abajo), pero mantiene la proporción del dibujo.

¿Cuándo conviene activar el aplanado sobre blanco?

Cuando el icono tiene fondo transparente y se va a mostrar en una plataforma que no maneja la transparencia. El PNG transparente funciona en la mayoría de los navegadores, pero algunos sistemas (en particular ciertos lanzadores de Android y iOS antiguo) pintan la zona transparente como un bloque negro. Aplanar da resultados consistentes a cambio de no fundirse con fondos arbitrarios.

¿Se sube la imagen?

No. Los iconos se generan escalando con el canvas del propio navegador: la imagen no sale de este equipo y funciona sin conexión.