Cómo se usa
Elige una de las dos formas de crear el favicon.
- Desde una imagen: arrastra tu logotipo, haz clic para elegir un archivo o pega una imagen copiada con Ctrl+V (⌘+V en Mac). Se admiten archivos PNG, JPG, WebP y SVG de hasta 10 MB. Si la imagen no es cuadrada, elige «Ajustar con margen» para conservarla entera o «Recortar el centro» para usar solo la parte central. El margen y las zonas transparentes pueden quedarse transparentes o rellenarse con el color que quieras.
- Desde texto o emoji: escribe 1–2 caracteres y elige el color de fondo, el color del texto y la forma (cuadrado, redondeado o círculo). Se usa la fuente del sistema de tu dispositivo, así que los emojis pueden verse un poco distintos según el dispositivo.
En el resultado verás los iconos de 16, 32, 48 y 180 px a tamaño real, y los de 16, 32 y 48 px también ampliados, además de cómo queda el icono en una pestaña del navegador con tema claro y oscuro. Puedes descargar cada archivo por separado o todos a la vez con «Descargar todo (ZIP)».
Se recomienda una imagen original de 512 px o más. Si es más pequeña, los iconos mayores que la imagen original se amplían y pueden verse borrosos, por lo que aparecerá un aviso. Qué lado cuenta para el aviso depende del ajuste «Hacerla cuadrada»: el más largo con «Ajustar con margen» y el más corto con «Recortar el centro». Por ejemplo, una imagen de 800 × 400 px no recibe ningún aviso con «Ajustar con margen», pero con «Recortar el centro» la referencia pasa a ser 400 px y el aviso aparece. En ese caso solo se amplía el icono de 512 px; los otros cinco tamaños se reducen a partir de los 400 px. Un SVG se dibuja de nuevo en cada tamaño, así que con él no aparece el aviso. Eso sí, si tu SVG carga fuentes o imágenes externas, esas partes pueden faltar en los archivos ICO y PNG, así que compruébalo en la «Vista previa». Las imágenes grandes se reducen por pasos, a la mitad cada vez, para que los tamaños pequeños no queden pixelados.
Los SVG se dibujan mediante un elemento img, por lo que no se ejecutan los scripts incluidos en ellos.
Opciones de forma en los modos de imagen y texto: El ajuste «Forma» (Cuadrado, Redondeado, Círculo) solo existe en «Desde texto o emoji». «Desde una imagen» se limita a encajar la imagen en un cuadrado y no recorta las esquinas. Si necesitas un icono redondo, sube una imagen en la que las esquinas que quedan fuera de la forma redonda sean transparentes y deja «Fondo del margen y la transparencia» en «Transparente». Las partes transparentes de tu imagen se conservan en favicon.ico, icon-192.png e icon-512.png.
Archivos y tamaños que obtienes
| Archivo | Tamaño | Para qué sirve |
|---|---|---|
favicon.ico |
16, 32 y 48 px | Pestañas del navegador |
favicon.svg |
Original | Pestañas del navegador (solo si subes un SVG) |
apple-touch-icon.png |
180 × 180 px | Pantalla de inicio del iPhone y el iPad |
icon-192.png, icon-512.png |
192 y 512 px | Manifiesto de aplicación web (pantalla de inicio de Android, etc.) |
site.webmanifest |
— | Archivo de manifiesto de aplicación web |
La documentación de Microsoft sobre el formato ICO cita 16, 32 y 48 px como tamaños de icono habituales, así que favicon.ico incluye esos tres. Esos tres iconos no se exportan como PNG sueltos y solo están dentro de favicon.ico. La documentación de Apple pone 180 × 180 px como ejemplo de tamaño del apple-touch-icon en pantallas Retina de iPhone y explica que, si no hay <link>, se buscan en la raíz del sitio archivos con nombres como apple-touch-icon.png. Según web.dev, los navegadores basados en Chromium necesitan en el manifiesto de aplicación web al menos un icono de 192 × 192 px y otro de 512 × 512 px, y el archivo de manifiesto usa la extensión .webmanifest que sugiere la especificación.
El apple-touch-icon va en la pantalla de inicio, así que se crea sin transparencia y con el fondo relleno. Si para una imagen elegiste «Transparente» en «Fondo del margen y la transparencia», se rellena de blanco. Con texto o emoji, se rellena todo el cuadrado con el color de fondo, sea cual sea la forma elegida.
Cómo guarda PNG un archivo ICO
Un archivo ICO reúne imágenes de varios tamaños en un solo archivo. Empieza con una cabecera de 6 bytes (ICONDIR) que contiene un valor reservado 0, el tipo 1 (icono) y el número de imágenes. Después viene una entrada de 16 bytes (ICONDIRENTRY) por imagen con su ancho, alto, longitud de datos y la posición donde empiezan sus datos. Por eso todos los archivos ICO empiezan con los bytes 00 00 01 00.
Al principio los ICO contenían datos de mapa de bits, pero desde Windows Vista cada imagen también puede ser un archivo PNG completo. En ese caso los datos son una imagen PNG ARGB de 32 bits que empieza con la firma PNG, y la transparencia sale del canal alfa del PNG. Esta herramienta crea favicon.ico de esta forma a partir de PNG de 16, 32 y 48 px. Escribe la estructura del archivo por sí misma en el navegador, sin ninguna biblioteca adicional.
El ZIP de «Descargar todo» también se crea en el navegador. Los PNG y el ICO ya están comprimidos, así que no se vuelven a comprimir: se empaquetan con el método sin compresión (store) y sumas de comprobación CRC-32 de la especificación ZIP de PKWARE.
Cómo añadirlo a tu HTML
- Sube los archivos descargados a la carpeta principal (raíz) de tu web.
- Copia el «Código para el
<head>del HTML» del resultado y pégalo dentro del<head>de cada página.
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Si subiste un SVG, se añade <link rel="icon" href="/favicon.svg" type="image/svg+xml"> en la línea siguiente a favicon.ico. Según MDN, cuando hay varios enlaces rel="icon", el navegador elige el más adecuado según type, sizes y media, y si varios son igual de adecuados, usa el último. Los navegadores que no admiten SVG usan favicon.ico. El archivo favicon.svg es el que subiste, tal cual: el recorte y el fondo («Recortar el centro», «Rellenar con color») se aplican solo a los archivos ICO y PNG, nunca a favicon.svg. Para que todos los iconos se vean igual, borra la línea de favicon.svg del código HTML y no subas ese archivo.
Este código enlaza únicamente dos archivos con rel="icon": favicon.ico y (solo tras subir un SVG) favicon.svg. Por eso, si creaste el favicon desde texto, un emoji o una imagen PNG, JPG o WebP y borras del código HTML la línea de favicon.ico, no queda ninguna línea con rel="icon". El archivo apple-touch-icon.png solo se enlaza mediante rel="apple-touch-icon", e icon-192.png e icon-512.png solo mediante site.webmanifest.
El estándar HTML indica que, si una página no tiene un enlace rel="icon", el navegador puede pedir /favicon.ico en su lugar. Aunque pongas los enlaces, lo más seguro es dejar favicon.ico en la raíz. Si ya tienes un manifiesto de aplicación web, copia en él solo la parte icons del resultado en lugar de usar el archivo nuevo.