Generador de favicon

Cómo se usa

1. Elige Letra o emoji, escribe hasta tres caracteres y escoge colores y forma. O elige Mi imagen y suelta una imagen.
2. Revisa la vista previa de cada tamaño.
3. Pulsa Descargar todos los archivos, o descarga un solo tamaño o solo el ICO.
4. Copia el código HTML dentro del <head> de tu web.

Cómo funciona

Cada tamaño se dibuja desde cero en su propio canvas, en lugar de reducir una imagen grande, para que los iconos pequeños queden nítidos. Una imagen se recorta al cuadrado centrado más grande: de una foto de 800 × 600 se usan los 600 × 600 píxeles del centro. El archivo ICO se construye en tu navegador con los PNG de 16, 32 y 48 píxeles.

Ejemplo

De entrada verás una «N» blanca sobre fondo azul en un cuadrado redondeado. El tamaño de la letra depende de cuántos caracteres escribas: uno ocupa 0,7 del lado, dos 0,5 y tres 0,36. En el icono de 32 × 32, una sola letra se dibuja a 32 × 0,7 ≈ 22 píxeles y «TD» a 32 × 0,5 = 16 píxeles. El radio del redondeado es 0,2 del lado, 102,4 píxeles en el icono de 512 × 512; el círculo usa la mitad del lado.

Nombres de archivo

• favicon.ico – 16, 32, 48
• favicon-16x16.png, favicon-32x32.png, favicon-48x48.png
• apple-touch-icon.png – 180 × 180
• android-chrome-192x192.png, android-chrome-512x512.png

Consejos

• Una sola letra en negrita se lee mejor a 16 px que una imagen con mucho detalle.
• Usa un contraste fuerte entre el fondo y el texto.
• La «Ñ» y las letras con tilde funcionan igual que cualquier otra, por si tu marca empieza por una de ellas.