Generador de favicon

¿Qué es un favicon?

Es el pequeño icono que representa una web en la pestaña del navegador, los favoritos, el historial, los resultados de búsqueda en el móvil y la pantalla de inicio de un teléfono cuando se ancla la web. Sin favicon, el navegador muestra un icono genérico, lo que da a la web un aire de inacabada.

Crear tu favicon

Elige una imagen, idealmente cuadrada, de al menos 512 × 512 píxeles. Toolo genera:

• un archivo favicon.ico, el formato histórico reconocido en todas partes;
• un paquete de PNG en los tamaños modernos, descargable en ZIP.

Instalar los archivos

Coloca favicon.ico en la raíz de tu web: los navegadores lo buscan automáticamente en /favicon.ico. Añade después en el <head> de tus páginas las etiquetas correspondientes, por ejemplo:

• <link rel="icon" href="/favicon.ico" sizes="any">
• <link rel="apple-touch-icon" href="/apple-touch-icon.png">

Para una aplicación web instalable, declara los iconos 192 y 512 en tu archivo manifest.webmanifest.

Conseguir un icono diminuto que funcione

• Simplifica: a 16 píxeles, un logotipo detallado se convierte en una mancha. Una letra, un símbolo o una forma sencilla funcionan mejor.
• Busca contraste: el icono debe seguir siendo legible tanto en una pestaña clara como en una oscura.
• Ocupa la superficie: deja poco margen alrededor del motivo.

Mi nuevo favicon no aparece

Los navegadores guardan los favicons en caché durante mucho tiempo. Recarga la página forzando la actualización, abre la web en una ventana privada o añade un parámetro de versión a la dirección, como /favicon.ico?v=2.

Cómo crear un favicon paso a paso

1. Prepara la imagen de origen: un cuadrado de al menos 512 × 512 píxeles, a ser posible un PNG transparente. Un logotipo sencillo o una sola letra se sigue leyendo a 16 píxeles.
2. Genera los archivos: suelta la imagen más arriba y descarga el favicon.ico (16, 32 y 48 px en un solo archivo) y el pack PNG en ZIP, que incluye desde favicon-16x16.png hasta favicon-512x512.png.
3. Súbelos a la raíz de tu web: favicon.ico, favicon-32x32.png, favicon-192x192.png, favicon-512x512.png y favicon-180x180.png con el nombre apple-touch-icon.png.
4. Decláralos en el <head> de cada página.

Las etiquetas HTML para copiar

• <link rel="icon" href="/favicon.ico" sizes="any">
• <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
• <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
• <link rel="manifest" href="/manifest.webmanifest">, solo si tu web tiene un manifiesto, donde se indican los PNG de 192 y 512 para Android.

WordPress y Shopify: el ajuste «icono del sitio»

En un CMS no hace falta tocar el código. En WordPress, el icono del sitio está en Apariencia > Personalizar > Identidad del sitio, o en el bloque Logo del sitio si usas un tema de bloques: sube el PNG de 512 px y WordPress añade las etiquetas. En Shopify, entra en Tienda online > Temas > Personalizar y luego en la configuración del tema, apartado Logo o Favicon según el tema.

Por qué sigue apareciendo el favicon antiguo

Además de la caché del navegador, un plugin de caché o una CDN pueden seguir sirviendo el archivo antiguo: vacíala después del cambio. En los resultados de Google, el favicon solo se actualiza cuando Google vuelve a rastrear tu página de inicio, lo que puede tardar varios días.

Preguntas frecuentes

¿La imagen tiene que ser cuadrada?

Idealmente sí. Una imagen no cuadrada se adaptará, lo que puede deformarla un poco. Recórtala antes en cuadrado con la herramienta Recortar imagen.

¿Se envía mi imagen a un servidor?

No. Los iconos se generan en tu navegador; la imagen no sale de tu dispositivo.

¿Se conserva la transparencia de un PNG?

Sí. La transparencia se mantiene tanto en el archivo ICO como en los PNG.

¿De verdad hacen falta todos los tamaños?

El favicon.ico basta para las pestañas. Los PNG de 180, 192 y 512 mejoran la presentación en la pantalla de inicio de los móviles y en las aplicaciones web.

¿Qué etiquetas HTML necesita un favicon?

Como mínimo <link rel="icon" href="/favicon.ico" sizes="any"> y <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Añade el PNG de 32 px y un manifiesto si quieres cubrir también Android y las aplicaciones web.

¿Qué tamaño debe tener el icono del sitio en WordPress?

WordPress pide una imagen cuadrada de al menos 512 × 512 píxeles: usa el archivo favicon-512x512.png del pack.

¿El pack incluye un archivo manifest?

No, el ZIP contiene solo las imágenes PNG. Si tu web necesita un manifiesto, crea el archivo manifest.webmanifest e indica en él los PNG de 192 y 512 px.