Generador de favicon
Una sola imagen se convierte en favicon.ico y en los iconos PNG que necesita un sitio, con las etiquetas para pegar.
Suelta una imagen para empezar
Funciona en tu navegador. No se sube nada.
Un favicon ya no es un solo archivo. Los navegadores siguen pidiendo `/favicon.ico` lo declares o no, iOS quiere un PNG de 180 píxeles para un acceso directo en la pantalla de inicio, y un manifiesto de aplicación web pide 192 y 512. Aquí se escriben todos a partir de una única imagen de origen, así que el conjunto es coherente en vez de haberse ido juntando durante tres años con lo que hubiera a mano.
El `.ico` guarda las versiones de 16, 32 y 48 píxeles en un mismo archivo, que es justo para lo que sirve ese formato: el navegador elige el tamaño que necesita para la pestaña, la barra de marcadores o el acceso directo del escritorio sin otra petición. Aquí se escribe byte a byte en vez de pedírselo a un servicio, y cada versión se dibuja desde el original a resolución completa, no reduciendo la de encima.
El recorte es el cuadrado central, porque todos los sitios donde aparece un icono son cuadrados. Un logo ancho perderá los extremos, así que lo que conviene darle es un símbolo y no un logotipo: a 16 píxeles un nombre es ilegible de todas formas. La transparencia se conserva salvo que pongas un color detrás, cosa que merece la pena con un logo oscuro que si no desaparecería en un tema oscuro del navegador.
Paso a paso
- 1Suelta aquí un logo o una imagen más o menos cuadrada.
- 2Elige qué va detrás: transparente, blanco o negro.
- 3Descarga el conjunto y copia las tres etiquetas link en tu head.
Preguntas
¿Qué tamaños necesito de verdad?
Un favicon.ico con 16, 32 y 48 dentro, un apple-touch-icon de 180 píxeles para iOS, y PNG de 192 y 512 para el manifiesto. Ese es el conjunto que se escribe aquí, y cubre los navegadores y teléfonos actuales.
¿Dónde van los archivos?
En la raíz de tu sitio, junto a index.html, y luego las tres etiquetas link van en el head. favicon.ico se encuentra incluso sin etiqueta, los demás hay que declararlos.
¿Puedo usar una foto?
Puedes, pero a 16 píxeles será un borrón. Solo un símbolo sencillo, con mucho contraste y pocos detalles, sobrevive al tamaño más pequeño.
Mi logo es ancho, ¿qué pasa?
Se recorta a su cuadrado central, así que los extremos se pierden. Prepara una versión cuadrada, o usa el símbolo del logo en vez del bloque completo.