Convierte imágenes en iconos y favicons
Elige una imagen y generamos un juego de iconos completo: un favicon.ico con seis tamaños dentro, más iconos PNG para cada medida que piden los navegadores y los sistemas operativos.
Cómo se usa
- 1
Elige una imagen — preferiblemente un PNG cuadrado con fondo transparente.
- 2
Escoge el modo de ajuste y los tamaños que quieras.
- 3
Revisa cada tamaño antes de descargar.
- 4
Descarga solo el favicon.ico, o el paquete completo con los iconos PNG y el manifiesto.
Por qué no basta con una sola imagen
Los navegadores piden 16 y 32 píxeles para la pestaña, iOS pide 180 para la pantalla de inicio y Android pide 192 y 512 para el manifiesto. Entregar una sola imagen grande deja que cada dispositivo la reduzca por su cuenta, y a tamaños pequeños el resultado se ve sucio, así que generamos cada medida por separado con un suavizado de alta calidad.
Qué es un archivo ICO
Un único archivo que contiene varias imágenes en distintos tamaños, de las que el sistema toma la que encaja en cada sitio. Dentro ponemos 16, 32, 48, 64, 128 y 256 píxeles, la cobertura que necesitan entre navegadores y Windows.
¿Imagen completa o rellenar y recortar?
Los iconos son cuadrados y tu imagen normalmente no lo es. «Imagen completa» la conserva entera y añade márgenes transparentes, lo que va bien para logotipos. «Rellenar y recortar» ocupa todo el cuadrado y recorta los bordes, lo que va bien para fotografías.
Preguntas frecuentes
- ¿Qué diferencia hay entre favicon.ico y los iconos PNG?
- El ICO reúne varios tamaños y lo entiende cualquier navegador, incluso los antiguos. Los PNG sueltos son los que necesitan iOS, Android y el manifiesto web. El paquete completo te da ambos.
- ¿Dónde coloco los archivos?
- En la raíz de tu sitio, y después añade las etiquetas que aparecen bajo la herramienta dentro del head de tus páginas.
- ¿Cuál es una buena imagen de partida?
- Una imagen cuadrada con fondo transparente de 512 píxeles o más. Los logotipos sencillos se leen mucho mejor a 16 píxeles que un dibujo lleno de detalle.
- ¿Se conserva la transparencia?
- Sí. Todos los tamaños se generan en PNG, dentro y fuera del ICO, y PNG admite transparencia por completo.
- ¿Se admite SVG?
- Sí, y es la mejor fuente posible: se dibuja al tamaño exacto de cada icono, así que el resultado sale perfectamente nítido.
- ¿Qué tamaño tiene el icono de iOS?
- 180 píxeles, para la etiqueta apple-touch-icon. Viene marcado por defecto en la lista de tamaños.
- ¿Se sube mi imagen a un servidor?
- No. Todo se genera en tu navegador, y el propio archivo ICO se construye byte a byte en la página.
- ¿Qué es site.webmanifest?
- Un archivo que indica a Android qué iconos usar cuando alguien añade tu sitio a la pantalla de inicio. Lo generamos ya listo dentro del paquete.