⭐ Generador de favicon

Arrastra PNG o SVG, genera todos los tamanos, descarga ZIP y copia el snippet HTML.

100% Gratis Sin registro Solo navegador 5 idiomas Modo oscuro

🔒 Sobre la privacidad

・Todo el procesamiento ocurre en tu navegador
・Los datos de imagen nunca se envían a ningún servidor
・Sin registros, sin historial, sin base de datos
・Sin registro, sin inicio de sesión, sin pago

📂

Arrastra PNG o SVG cuadrado (512x512 o mayor)

📖 Dónde se suele tropezar

Convierte un PNG o SVG cuadrado en todos los tamaños que necesitas, los empaqueta en un ZIP y genera el fragmento HTML para tu <head>. Todo se ejecuta en el navegador. Producir los archivos y que de verdad aparezcan son dos problemas distintos: navegadores, sistemas operativos y buscadores piden el favicon con reglas propias, y la caché es inusualmente agresiva, así que si tu procedimiento no incluye cómo verificar, acabarás atrapado.

Caso	Qué ocurre	Qué hacer
Sigue apareciendo el icono viejo tras reemplazarlo	Un favicon va a una caché distinta de la del HTML y una recarga normal no lo vuelve a pedir. Chrome mantiene una base de datos dedicada a favicons, y ni siquiera una recarga forzada (Ctrl+Mayús+R) la limpia siempre. La barra de marcadores, la pestaña, el historial y los accesos directos del sistema se refrescan cada uno por su cuenta, así que tener el icono nuevo en la pestaña y el viejo en marcadores es de lo más normal. Si hay una CDN delante, también conserva una copia obsoleta.	Cambiar el nombre del archivo o añadir una cadena de consulta es lo fiable: apunta a `<link rel="icon" href="/favicon-v2.png">` o, como mínimo, añade `?v=2`. Verifica en una ventana privada: recargar la normal una y otra vez sólo relee la misma caché rancia y te consume la tarde. Si en privado sigue saliendo el viejo, el problema probablemente no sea la caché sino una ruta equivocada en el `<link>`, así que mira la pestaña de red y comprueba si el archivo llega a pedirse; un 404 salta a la vista.
A 16px el logotipo se vuelve una mancha	Lo que aparece en la pestaña es 16 por 16 en la práctica (32 por 32 en pantallas de alta densidad). Reduce el logotipo tal cual y cualquier trazo por debajo de un píxel desaparece, mientras que la tipografía fina se convierte en una papilla gris. Un logotipo con más de un par de caracteres no tiene salvación: de un vistazo se lee como un cuadrado gris. No es un problema de calidad de exportación sino un límite físico de cuánta información cabe: 16 por 16 son 256 píxeles, apenas suficientes para dibujar un carácter.	Diseña el de 16px y el de 32px por separado. Usa una sola inicial grande, recorta sólo el símbolo o engrosa todos los trazos a 2px como mínimo: por eso los favicons de los grandes servicios son todos extremadamente simples. Combinar un favicon SVG (`<link rel="icon" type="image/svg+xml">`) con PNG permite mostrar el diseño completo en tamaños grandes y sustituir sólo el pequeño (dentro del SVG no puedes usar `@media (max-width: 16px)`, así que en la práctica aportas PNG aparte y los repartes con el atributo `sizes`). Juzga siempre a tamaño real: evaluar una vista previa ampliada es justo como sale mal.
Al añadir a la pantalla de inicio de iOS el fondo sale negro	Si le pasas a `apple-touch-icon` un PNG transparente, iOS rellena la transparencia de negro (blanco en algunos contextos). Aunque el diseño pretenda no tener fondo, el sistema impone un cuadrado opaco. Por la misma lógica, si redondeas tú las esquinas, se redondean dos veces y quedan recortadas. Casi todos los casos de icono feo en la pantalla de inicio son uno de estos dos.	Activa aquí la opción de color de fondo y exporta una imagen opaca pintada hasta los bordes del cuadrado. No redondees las esquinas y deja alrededor de un diez por ciento del lienzo como margen seguro, porque el redondeo del sistema recorta cualquier diseño que llegue al borde. Con 180 por 180 cubres los iPhone e iPad actuales. Si omites del todo `<link rel="apple-touch-icon">`, iOS usa una captura de la página como icono: esa es la explicación cuando alguien se encuentra miniaturas de páginas en su pantalla de inicio.

<link rel="icon"> y el array icons de site.webmanifest son cosas distintas y necesitas ambas. La primera es para las pestañas del navegador; el segundo, para la pantalla de inicio de Android y las PWA, y actualizar sólo una es la forma habitual de acabar con el icono viejo únicamente en Android. Los resultados de búsqueda tienen sus propias reglas: Google mira la raíz del sitio, así que coloca siempre un /favicon.ico, y prefiere múltiplos de 48 (48, 96, 144, etc.); si sólo aportas 16 por 16, en los resultados saldrá escalado y borroso. Lo que más se olvida es no bloquear el directorio de iconos en robots.txt: una regla amplia como Disallow: /assets/ hace que sólo el favicon no pueda recuperarse y los resultados muestren el globo terráqueo por defecto. Los cambios tardan de días a semanas en verse, así que no lo juzgues justo después de publicar.

📖 Cómo usar

1

Cargar imagen

Cuadrado de 512x512 o mayor recomendado.
2

Todos los tamanos automaticos

Vista previa de 16 a 512 px.
3

Obten ZIP y snippet

Descarga ZIP y pega el snippet en <head>.

❓ Preguntas frecuentes

¿Se sube la imagen?

No. Todo en el navegador.

¿Se ve borroso el SVG?

SVG es vectorial, nitido en todo tamano.

¿Se genera .ico?

Los navegadores modernos soportan PNG. Renombra el de 32x32 si necesitas .ico.

🔗 Herramientas relacionadas

🐛 ¿Encontró un problema con esta herramienta?

Gratis, sin registro. Incluso solo los pasos para reproducir ayudan. Los informes van directamente al operador y se usan para corregir.