Cómo crear un favicon
Para crear un favicon, añade tu logo arriba (o escribe una letra o un emoji), ajusta el aspecto y descarga el ZIP. Las vistas previas muestran el ícono en cada tamaño real y en una pestaña del navegador, en modo claro y oscuro.
- Elige el origen. Un logo en PNG o SVG funciona mejor; cualquier otra imagen se ajusta dentro de un cuadrado. ¿No tienes logo? Usa una letra o un emoji sobre un fondo de color.
- Define el aspecto. Color de fondo o transparente, la forma (cuadrado redondeado, cuadrado o círculo) y cuánto margen rodea la imagen.
- Descarga. Descargar todos los íconos te da el paquete completo; Solo favicon.ico te da únicamente ese archivo.
Qué incluye el paquete de favicon
| Archivo | Tamaño | Quién lo usa |
|---|---|---|
favicon.ico | 16, 32 y 48 px | Todos los navegadores, Windows, resultados de búsqueda |
favicon-16x16.png, favicon-32x32.png | 16 y 32 px | Pestañas del navegador y marcadores |
apple-touch-icon.png | 180 px | Pantalla de inicio de iPhone y iPad |
android-chrome-192x192.png, -512x512.png | 192 y 512 px | Pantalla de inicio de Android, aplicaciones web instaladas |
site.webmanifest | - | Indica los nombres de los íconos y los colores para Android y aplicaciones web |
favicon-html.txt | - | Las etiquetas para pegar en tus páginas |
El ícono de Apple siempre lleva un fondo sólido y esquinas cuadradas: los iPhone redondean las esquinas por sí mismos y muestran las zonas transparentes en negro.
Añade el favicon a tu sitio web
- Descomprime el paquete y sube los archivos a la carpeta raíz de tu sitio web, junto a tu página
de inicio, para que
yoursite.com/favicon.icoabra el ícono. - Pega las etiquetas HTML (que se muestran arriba y están en
favicon-html.txt) en el<head>de tus páginas. - Recarga con la caché borrada. Los navegadores conservan los favicons antiguos, así que una ventana privada es la forma más rápida de comprobarlo.
En WordPress puedes, en cambio, establecer el ícono de 512 px como Icono del sitio en el Personalizador, y este crea los demás tamaños por sí mismo.
Consejos para un favicon claro
- Simplifica. A 16 píxeles un logo con muchos detalles se vuelve borroso. Usa el símbolo de tu logo, o su primera letra, en lugar del logo completo con texto.
- Usa contraste. Las pestañas son claras u oscuras según el tema del navegador: revisa ambas vistas previas.
- Cuida el margen. Menos margen hace que el ícono se vea más grande en la pestaña; un poco más se ve mejor en las pantallas de inicio de los teléfonos.
¿Necesitas un solo archivo .ico de otro tamaño? El conversor de imágenes guarda cualquier imagen como ICO.
Preguntas frecuentes
¿Cómo hago un favicon?
Añade tu logo o cualquier imagen cuadrada en el cuadro de esta página, o escribe una letra o un emoji. Ajusta el fondo, el margen y la forma, y descarga el ZIP con todos los tamaños de ícono y el HTML para pegar en tu sitio.
¿Qué tamaños necesita un favicon?
Un favicon.ico con versiones de 16, 32 y 48 píxeles cubre los navegadores y Windows; un apple-touch-icon de 180 píxeles cubre iPhone y iPad; los íconos de 192 y 512 píxeles cubren Android y las aplicaciones web instaladas. El paquete incluye todos.
¿Cómo añado el favicon a mi sitio web?
Sube los archivos del ZIP a la carpeta raíz de tu sitio, de modo que favicon.ico se abra en tusitio.com/favicon.ico. Luego pega las etiquetas HTML en la sección head de tus páginas.
¿Por qué no aparece mi nuevo favicon?
Los navegadores guardan los favicons en caché durante mucho tiempo. Abre directamente la dirección del favicon, recárgala o prueba con una ventana privada. Los resultados de búsqueda pueden tardar semanas en actualizarse.
¿Puedo crear un favicon a partir de texto o un emoji?
Sí. Elige "Letra o emoji", escribe uno o dos caracteres y selecciona los colores. Es una forma rápida de obtener un ícono limpio sin tener un logo.
¿Se sube mi imagen?
No. Todos los íconos se crean en tu navegador y tu imagen nunca sale de tu dispositivo.