Paso a paso: Generador de favicon
- Sube tu logoArrastra un SVG, PNG, JPG o WebP. Lo ideal es un SVG o un PNG cuadrado de 512 px o más.
- Ajusta el aspectoAñade margen, un color de fondo o esquinas redondeadas, y mira cómo queda en la pestaña del navegador.
- Completa los datos de la appEscribe el nombre y el color del tema para el site.webmanifest.
- Descarga e instalaDescarga el ZIP, sube los archivos a tu web y pega el código en el <head>.
Qué archivos necesita hoy un favicon
Ya no hacen falta veinte tamaños distintos. Con estos archivos cubres todos los navegadores y dispositivos actuales:
- favicon.ico (16, 32 y 48 px): el que buscan los navegadores en la raíz de la web y el que usan programas como lectores RSS.
- favicon.svg: los navegadores modernos lo prefieren porque se ve nítido en cualquier pantalla. Solo se genera si subes un SVG.
- apple-touch-icon.png (180 px): el icono que aparece al añadir tu web a la pantalla de inicio de un iPhone o iPad.
- icon-192.png e icon-512.png: los iconos que declara el manifest para Android y para instalar la web como aplicación.
- icon-maskable-512.png: versión con margen de seguridad para que Android pueda recortarla en círculo o con otra forma sin cortar tu logo.
Cómo instalar el favicon en tu web
Sube los archivos a la raíz de tu dominio (o a la carpeta que indiques en los ajustes) y pega el código generado dentro de la etiqueta <head> de todas tus páginas. En WordPress puedes usar el campo «Icono del sitio» del personalizador o añadir el código con un plugin de cabeceras.
Los navegadores guardan el favicon en caché durante mucho tiempo. Si no ves el cambio, abre la web en una ventana privada o fuerza la recarga.
Consejos para un buen favicon
A 16 px solo se distinguen formas simples. Si tu logo tiene texto, usa solo el símbolo o la inicial. Un fondo de color con el símbolo en blanco suele leerse mejor que un logo transparente sobre pestañas claras y oscuras.
Características
ICO real con varios tamaños
El favicon.ico incluye imágenes de 16, 32 y 48 px, cada una escalada por separado para que no quede borrosa.
SVG limpio y seguro
Si subes un SVG, se eliminan scripts y datos de editores antes de crear el favicon.svg.
Listo para instalar como app
Genera el site.webmanifest con nombre, colores e iconos, incluido el icono maskable.
Sin subir tu logo
Todo se crea en tu navegador. Tu imagen no sale de tu dispositivo.
Preguntas frecuentes
¿Qué tamaño debe tener la imagen original?
Lo mejor es un SVG, porque se ve nítido a cualquier tamaño. Si usas PNG o JPG, que sea cuadrado y de al menos 512 × 512 px. Si la imagen es más pequeña, la herramienta te avisa porque los iconos grandes se verán borrosos.
¿Sigue haciendo falta el favicon.ico?
Sí. Aunque los navegadores modernos usan el SVG o el PNG, muchos programas y servicios siguen pidiendo /favicon.ico directamente. Tenerlo evita errores 404 en tus registros.
¿Por qué el apple-touch-icon no tiene transparencia?
iOS rellena las zonas transparentes con negro y redondea las esquinas por su cuenta. Por eso se genera siempre cuadrado y con el color de fondo que elijas.
¿Qué es un icono maskable?
Es una versión del icono con margen alrededor que Android puede recortar con la forma del sistema (círculo, cuadrado redondeado, etc.). Tu logo se coloca en la zona central para que nunca quede cortado.
¿Mi logo se sube a algún servidor?
No. Los iconos se dibujan en tu navegador y se descargan directamente. Puedes comprobarlo desconectando internet después de cargar la página.
Actualizado: · Equipo de INNOZONA