Generador de favicon

Qué incluye favicons.zip

Sube una imagen y el generador crea, en tu navegador, todos los archivos que necesita una web actual:

Archivo	Tamaño	Lo usa
favicon.ico	16, 32 y 48 px en un solo archivo	Pestañas, marcadores, Windows y cualquier herramienta que pida /favicon.ico
favicon-16x16.png	16×16	Pestañas en pantallas normales
favicon-32x32.png	32×32	Pestañas en pantallas de alta densidad, accesos directos
favicon-48x48.png	48×48	Resultados de Google, accesos directos de escritorio
apple-touch-icon.png	180×180	"Añadir a pantalla de inicio" en iPhone y iPad
android-chrome-192x192.png	192×192	Pantalla de inicio de Android
android-chrome-512x512.png	512×512	Webs instaladas como app (PWA) y su pantalla de carga
site.webmanifest	—	Indica a Android/Chrome dónde están los dos iconos grandes
README-favicon.html	—	Las etiquetas HTML para pegar

Qué imagen de partida funciona mejor

• Cuadrada, simple y contundente. A 16 px tienes 256 píxeles en total. Un logo completo con eslogan se convierte en una mancha; una letra o un símbolo sigue siendo legible. Muchas marcas usan una versión simplificada solo para el favicon.
• Al menos 512×512. El icono más grande mide 512 px, así que una imagen más pequeña se amplía y se ve borrosa. Un logo en SVG es ideal: se renderiza a alta resolución antes de reducirlo.
• PNG transparente o SVG. La transparencia se conserva en el .ico y en los PNG pequeños, así el icono queda bien en temas claros y oscuros del navegador.
• ¿No es cuadrada? La imagen se encaja dentro del cuadrado sin recortar, con espacio transparente a los lados. Si prefieres llenar el cuadrado, recórtala antes o crea una versión redonda con Recorte circular.

El fondo del icono Apple touch

iOS no admite transparencia en los iconos de la pantalla de inicio: las zonas transparentes se vuelven negras. Por eso apple-touch-icon.png (180×180) siempre lleva un fondo sólido. Es blanco por defecto; usa el campo de color junto a la zona de subida para poner el color de tu marca (el selector de color puede sacarlo de tu logo). Los demás tamaños siguen siendo transparentes.

Dónde poner los archivos

1. Descomprime y sube todos los archivos a la raíz de tu web, de modo que https://tusitio.com/favicon.ico abra el icono.
2. Pega las etiquetas de README-favicon.html en el <head> de cada página (o en la plantilla de cabecera de tu tema):

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

3. Si tu web está en una subcarpeta, ajusta las rutas.

En WordPress, Apariencia → Personalizar → Identidad del sitio → Icono del sitio lo hace por ti con una sola imagen de 512×512: usa android-chrome-512x512.png. Shopify, Wix y Squarespace tienen un campo de "favicon" parecido.

El site.webmanifest incluido solo enumera los iconos. Si quieres que los visitantes puedan instalar tu web como app, añade name, short_name, theme_color, background_color y "display": "standalone".

"He cambiado el favicon y sigo viendo el antiguo"

Los navegadores guardan en caché los favicons con más insistencia que casi cualquier otra cosa.

• Abre https://tusitio.com/favicon.ico directamente y recarga forzando (Ctrl + F5, o Cmd + Mayús + R en Mac).
• Añade una versión a los enlaces, por ejemplo href="/favicon.ico?v=2", para que el navegador lo trate como un archivo nuevo.
• Vacía la caché de tu CDN o plugin de caché si usas uno.
• Los marcadores y accesos directos de la pantalla de inicio conservan el icono antiguo hasta que se vuelven a crear.
• Google actualiza el icono en los resultados solo después de volver a rastrear tu página de inicio, lo que puede tardar días o semanas. Google pide un icono cuadrado de un múltiplo de 48 px: el PNG de 48×48 y el .ico lo cumplen.

Herramientas relacionadas

• Quita el fondo de una foto antes de convertirla en icono: Eliminar fondo.
• ¿Tienes el logo en WebP? Pásalo a PNG si tu editor no lo abre.
• ¿Necesitas una imagen simple de 512×512 para una tienda o perfil? Redimensionar a 512×512.