Generador de favicon
Diseña el icono de tu web a partir de unas letras, un emoji o una imagen y descarga todos los formatos necesarios: favicon.ico, PNG de 16 a 512 px, apple-touch-icon y site.webmanifest, con el código HTML para pegarlo en tu página.
Vista previa a tamaño real
Los iconos se generan en tu navegador; tu logotipo no se sube a ningún servidor.
Cómo crear tu favicon
- Elige el origen: escribe una o dos letras (las iniciales de tu marca) o un emoji, o sube tu logotipo. Para imágenes, lo ideal es un PNG o SVG cuadrado de al menos 512 px y con fondo transparente.
- Ajusta el diseño: colores, forma, tipografía y tamaño. Fíjate sobre todo en la vista previa de 16 px: es la que verá la mayoría de tus visitantes en la pestaña.
- Descarga el ZIP con todos los archivos, o solo los que necesites.
- Súbelos a la raíz de tu sitio y pega el código HTML dentro del
<head>.
Qué archivos se generan y para qué sirve cada uno
| Archivo | Tamaño | Dónde se usa |
|---|---|---|
| favicon.ico | 16, 32, 48 | Compatibilidad universal; se pide automáticamente en /favicon.ico |
| favicon-16x16.png | 16 × 16 | Pestañas en pantallas normales |
| favicon-32x32.png | 32 × 32 | Pestañas en pantallas de alta densidad, barra de tareas |
| favicon-48x48.png | 48 × 48 | Accesos directos y resultados de búsqueda |
| apple-touch-icon.png | 180 × 180 | Pantalla de inicio de iPhone y iPad |
| android-chrome-192x192.png | 192 × 192 | Pantalla de inicio de Android |
| android-chrome-512x512.png | 512 × 512 | Pantalla de bienvenida de aplicaciones web instalables (PWA) |
| site.webmanifest | — | Declara los iconos, el nombre y los colores de la aplicación web |
Cada tamaño se dibuja desde cero (no se reduce a partir del grande), así las letras quedan más nítidas en 16 y 32 px. El archivo ICO es un contenedor: guarda varias imágenes PNG en un mismo fichero, con una cabecera que indica el tamaño y la posición de cada una, y el navegador elige la que mejor encaja.
El icono de Apple siempre se genera con fondo opaco y esquinas rectas, porque iOS aplica su propia máscara redondeada y rellena de negro las zonas transparentes. Si eliges fondo transparente, ese icono usará fondo blanco.
Consejos de diseño
- Simplifica: un logotipo con texto pequeño se convierte en una mancha a 16 px. Usa solo el símbolo o la inicial.
- Contraste: el icono debe distinguirse en pestañas claras y oscuras. Un fondo de color sólido funciona en ambos modos; si dudas, revisa los colores con el comprobador de contraste.
- Colores de marca: toma el código exacto de tu logotipo con el selector de color.
- Imagen de partida: si tu logotipo no es cuadrado o pesa mucho, prepáralo antes con redimensionar imagen o cambia su formato con convertir imagen.
- Resto del <head>: aprovecha para revisar el título, la descripción y las etiquetas sociales con el generador de meta tags.
Google muestra el favicon junto a tus resultados de búsqueda. Para que lo use, el icono debe ser cuadrado, estar declarado con <link rel="icon"> en la página de inicio y ser accesible para su rastreador; Google recomienda que mida más de 48 × 48 px.
Preguntas frecuentes
¿Qué tamaño debe tener un favicon?
El navegador usa 16 y 32 px en pestañas y marcadores, 48 px en algunos accesos directos de Windows, 180 px para la pantalla de inicio de iPhone y 192 y 512 px para Android y las aplicaciones web instalables.
¿Sigue siendo necesario el archivo favicon.ico?
Conviene incluirlo: muchos navegadores, lectores RSS y herramientas piden /favicon.ico automáticamente aunque no lo declares. Los navegadores modernos usan además los PNG o un SVG indicados con <link rel="icon">.
¿Dónde pongo los archivos del favicon?
En la raíz de tu dominio (la misma carpeta que index.html) y el fragmento HTML dentro del <head> de todas las páginas. En WordPress puedes subir el icono de 512 px en Apariencia › Personalizar › Identidad del sitio.
¿Por qué no se actualiza mi favicon?
Los navegadores lo guardan en caché de forma agresiva. Prueba a abrir /favicon.ico directamente y recargar, usa una ventana privada o añade un parámetro de versión, como favicon.ico?v=2.
¿Puedo usar un emoji como favicon?
Sí. Escribe el emoji en el campo de texto y se dibujará con la fuente de emojis de tu sistema, así que su aspecto será el de Apple, Google o Microsoft según el equipo con el que lo generes.