Cómo se usa
- Elige «Texto / emoji» y escribe de uno a tres caracteres, o elige «Imagen» y sube tu logotipo (lo ideal es un SVG o un PNG cuadrado de al menos 512 px).
- Elige los colores y una forma: cuadrado, redondeado o círculo.
- Revisa la vista previa a 16, 32, 64 y 128 px; los tamaños pequeños muestran si el diseño sigue siendo legible.
- Descarga el ZIP, sube los archivos a la carpeta raíz de tu sitio y pega el HTML en el head.
Opciones explicadas
- favicon.ico
- Contiene versiones de 16, 32 y 48 px para navegadores, marcadores y accesos directos de Windows.
- apple-touch-icon.png
- 180 × 180 px con fondo sólido; se usa cuando alguien añade tu sitio a la pantalla de inicio de un iPhone o iPad.
- icon-192.png / icon-512.png
- Se referencian desde site.webmanifest para las pantallas de inicio de Android y las aplicaciones web instalables.
- icon.svg
- Un icono escalable para navegadores modernos; se incluye cuando el origen es texto o un archivo SVG.
El HTML
Después de subir los archivos a la raíz de tu sitio, añade esto al head de cada página:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Preguntas frecuentes
¿Qué archivos necesito de verdad?
Con favicon.ico en la raíz del sitio cubres todos los navegadores. Añade apple-touch-icon.png para iOS, y el manifest con los iconos de 192/512 si quieres un icono correcto cuando el sitio se instala o se fija en Android.
¿Por qué mi favicon se ve borroso a 16 px?
Los detalles finos desaparecen a 16 × 16 píxeles. Usa una letra gruesa o una versión simplificada del logotipo en lugar del logotipo completo con texto.
¿Por qué sigo viendo el favicon antiguo después de cambiarlo?
Los navegadores guardan los favicons en caché de forma muy agresiva. Recarga la página forzando la actualización, o añade un parámetro de versión como /favicon.ico?v=2 en las etiquetas link.
¿Puedo usar un emoji como favicon?
Sí. Los emojis se dibujan con la fuente de emojis de tu sistema, así que el resultado coincide con lo que ves en la vista previa.
Privacidad
Esta herramienta funciona por completo en tu navegador. Tus archivos y textos se procesan en tu dispositivo y nunca se suben a nuestros servidores.