Convierte un logotipo PNG, JPG o SVG en un favicon.ico real con varias resoluciones (16, 32 y 48 px), además de iconos PNG, táctil de Apple y Android. Parte de al menos 512 × 512 px o de un SVG para que los iconos grandes queden nítidos.
Cómo se usa
- Escribe una o dos letras o un emoji, o cambia a Imagen y suelta tu logo (SVG da el mejor resultado).
- Elige fondo, color del texto, forma y margen. Las vistas previas se actualizan al momento.
- Descarga todo en un ZIP o toca un archivo para descargarlo por separado.
- Copia el fragmento HTML en el <head> de tu página y sube los archivos a la carpeta raíz del sitio.
- favicon.ico incluye iconos de 16, 32 y 48 px en PNG para cualquier navegador; favicon.svg se ve nítido a cualquier tamaño.
- apple-touch-icon.png es cuadrado y opaco porque iOS redondea las esquinas por su cuenta.
- El icono «maskable» mantiene tu logo en la zona segura para que Android lo recorte con cualquier forma.
- Todo se genera en tu navegador; tu imagen nunca se sube.
Qué incluye un juego de favicon actual
favicon.ico contiene imágenes de 16, 32 y 48 px y muchos navegadores y herramientas aún lo piden en la raíz del sitio. favicon.svg se ve nítido a cualquier tamaño y lo usan los navegadores actuales. apple-touch-icon.png (180 × 180) aparece cuando alguien añade tu web a la pantalla de inicio del iPhone. android-chrome-192x192 y 512x512, más un icono maskable de 512 px, se declaran en site.webmanifest para Android y las aplicaciones web instalables.
El fragmento HTML los enlaza todos: solo tienes que pegarlo en el head y subir los archivos a la carpeta raíz.
Un icono que se lea a 16 px
En la pestaña del navegador, un favicon se ve a apenas 16 × 16 píxeles. Una o dos letras gruesas, un símbolo simple o el isotipo de tu marca funcionan mucho mejor que un logotipo completo con texto. Un buen contraste entre fondo y figura ayuda tanto en temas claros como oscuros. Revisa las vistas previas de pestaña en tema claro y oscuro antes de descargar.
Iconos de Apple y maskable
iOS redondea las esquinas por su cuenta y no trata bien la transparencia, por eso el icono táctil de Apple es cuadrado y opaco. Android puede recortar los iconos maskable en círculo u otras formas; el generador mantiene el diseño dentro de la zona segura para que no se corte nada importante.
Preguntas frecuentes
¿Qué tamaño debe tener un favicon?
Conviene tener varios: 16, 32 y 48 px dentro de favicon.ico, un SVG para cualquier tamaño, 180 × 180 para Apple y 192 y 512 px para Android. Este generador los crea todos a la vez.
¿Sigue haciendo falta favicon.ico?
Sí. Algunos navegadores, lectores de feeds y otras herramientas siguen buscando /favicon.ico en la raíz, así que tenerlo evita iconos vacíos y errores 404.
¿Cómo añado el favicon a mi web?
Sube los archivos del ZIP a la carpeta raíz del sitio y pega el fragmento HTML en el head de cada página. Después recarga vaciando la caché para ver el nuevo icono.
¿Por qué no aparece mi nuevo favicon?
Los navegadores guardan los favicons en caché durante mucho tiempo. Abre la URL del icono, fuerza la recarga o prueba en una ventana privada. Los resultados de búsqueda pueden tardar en mostrar el icono nuevo.
¿Puedo usar un emoji como favicon?
Sí. Escribe un emoji, elige fondo y forma y el icono se dibuja a partir de él. Los emojis se ven algo distintos en cada sistema, y los archivos guardan el aspecto del dispositivo donde los creaste.
¿Se sube mi logotipo?
No. Todos los iconos se dibujan y se empaquetan en el ZIP dentro de tu navegador, así que el logotipo no sale de tu dispositivo.