Generador de favicon
Cree un favicon.ico a partir de cualquier imagen, con todos los tamaños que pide un navegador dentro de un único archivo.
Crear un favicon sin subir nada
Un favicon es la imagen pequeña que el navegador muestra en la pestaña, en los marcadores y junto a un acceso directo. El archivo clásico para eso es favicon.ico, que en realidad no es una sola imagen: el contenedor ICO guarda varios marcos cuadrados y el navegador elige el tamaño que necesita. Esta página abre el conversor de imágenes con salida ICO y los cuatro marcos habituales ya marcados, así que puede soltar un logotipo y recuperar ese archivo al momento.
Todo ocurre en su navegador. Los marcos se dibujan en un lienzo y el contenedor se monta byte a byte dentro de la página, de modo que su logotipo nunca sale del equipo, algo que conviene saber si el diseño todavía no es público.
Qué contiene el archivo
| Marco | Dónde lo usa el navegador |
|---|---|
| 16 px | La pestaña y la lista de marcadores |
| 32 px | Pantallas de alta densidad, la barra de direcciones, las pestañas fijadas |
| 48 px | Accesos directos de Windows y algunos contextos de escritorio |
| 256 px | Iconos de acceso directo grandes y todo lo que amplíe el icono |
El menú Tamaños del icono ofrece además el clásico juego de tres, «16, 32 y 48 px», o bien «Solo 256 px» y «Solo 32 px» cuando ya sabe exactamente qué necesita. Como los marcos son cuadrados fijos, aquí no se aplican ni Calidad ni Redimensionar, y la página los oculta.
Empiece con la imagen adecuada
- Mejor cuadrada que apaisada. Una imagen no cuadrada se encaja dentro del cuadrado con relleno transparente, así que un logotipo ancho acaba pequeño en el centro. Recórtelo antes a un cuadrado, o use solo el símbolo en lugar del logotipo con texto.
- Mejor sencilla que detallada. A 16 px una línea de texto es una mancha gris. Los favicons más reconocibles son una letra, una forma o una silueta.
- Dele contraste. El icono se apoya en el fondo del propio navegador, que es claro en un tema y oscuro en el otro. Una forma que solo funciona sobre blanco desaparece en modo oscuro.
- Parta de algo grande. Aporte al menos una imagen de 256 px para que el marco mayor no se amplíe; los marcos pequeños se obtienen reduciendo, que es donde el detalle se pierde con elegancia.
Ponerlo en su sitio web
Dejar favicon.ico en la raíz del sitio basta para cualquier navegador, porque todos lo buscan ahí por defecto. Para declararlo de forma explícita, o para servir además un PNG, añada una etiqueta link en el head de la página: <link rel="icon" href="/favicon.ico" sizes="any">. Muchos sitios acompañan el .ico con un PNG de 180 px para apple-touch-icon, que también puede generar aquí volviendo a poner la salida en PNG y redimensionando.
Si tras reemplazar el archivo sigue apareciendo el icono antiguo, es cosa de la caché y no de un archivo defectuoso: los navegadores guardan los favicons mucho tiempo. Una recarga forzada, o añadir ?v=2 a la etiqueta link, lo resuelve.
Otros formatos con la misma herramienta
El conversor también escribe PNG, JPG y WebP, y puede comprimir hasta un tamaño objetivo en KB. Si ha venido por una conversión normal y no por un icono, PNG a JPG y PNG a WebP arrancan directamente en esos formatos.