Generador de favicon

Convierte un solo logotipo en todo el conjunto de favicons: todos los tamaños PNG, un ICO con varios tamaños, un manifest y las etiquetas HTML para pegar en el head.

Suelta tus archivos aquí

.png, .jpg, .jpeg, .webp, .svg · hasta 20 MB

Elige archivos

Cómo generar un favicon

1
Añade tu logotipo
PNG, JPG, WebP o SVG, hasta 20 MB. Una imagen cuadrada funciona mejor, pero se admite cualquier forma.
2
Elige cómo encaja en un cuadrado
Recorta un cuadrado desde el centro o ajusta toda la imagen y rellena los lados con el color que elijas.
3
Descarga el conjunto de iconos en ZIP
Ocho archivos, o nueve con el icono Android maskable: el ICO, cuatro tamaños PNG, el manifest y un fragmento de head ya preparado.

Qué hay en el archivo y para qué sirve cada elemento

favicon.ico contiene tres imágenes en un solo contenedor, de 16, 32 y 48 píxeles, y es lo que los navegadores siguen pidiendo en la raíz del sitio. icon-16.png e icon-32.png son los equivalentes modernos, se enlazan de forma explícita para que los navegadores que prefieren PNG no tengan que abrir el ICO. apple-touch-icon.png de 180 píxeles es lo que usa iOS cuando alguien añade tu sitio a la pantalla de inicio. icon-192.png e icon-512.png son los dos tamaños que un manifest de aplicación web progresiva tiene que listar. manifest.json vincula estos dos iconos con el nombre de tu app y el color de tema, y head-snippet.html es el bloque exacto de etiquetas link y meta que debes pegar en tu página, sin adivinar nombres de atributos ni rutas de archivos.

Por qué apple-touch-icon nunca mantiene la transparencia

iOS no compone un icono de pantalla de inicio transparente sobre un fondo razonable. Rellena los huecos en negro y convierte un logotipo limpio en un mosaico oscuro. Por eso ese archivo siempre tiene su canal alfa aplanado, sobre el color de fondo que escogiste o sobre blanco si dejaste el fondo transparente. Todos los demás tamaños mantienen la transparencia cuando la imagen de origen la tiene y la pediste, porque en una pestaña del navegador o un acceso directo de escritorio es justo lo que interesa. Si defines un color de fondo, se aplica por igual a todos los tamaños para que el conjunto se mantenga coherente.

Vector de entrada, nitidez de salida

Cuando la imagen de origen es un SVG, cada tamaño se genera directamente desde el vector en lugar de reducir una sola imagen de mapa de bits grande. Eso se nota sobre todo a 16 píxeles, donde un logotipo remuestreado se vuelve borroso y uno recién renderizado mantiene los trazos. Los SVG se limpian antes de renderizar: se eliminan scripts, controladores de eventos y cualquier referencia a un servidor externo, igual que hace nuestra herramienta para convertir SVG a PNG. Una imagen de mapa de bits se hace cuadrada primero y luego se remuestrea con un filtro Lanczos, que es la opción más nítida y práctica para reducir ilustraciones.

Tu logotipo se queda en tu dispositivo

La decodificación, el cambio de tamaño, la codificación PNG, el contenedor ICO y el ZIP se generan dentro de esta pestaña del navegador. Nada se sube, lo cual es importante para una marca aún no lanzada. La mayoría de generadores de favicon en línea hacen una copia de tu logotipo en sus servidores antes de devolverte nada.

Preguntas frecuentes

¿Qué tamaños incluye el conjunto?

16, 32, 180, 192 y 512 píxeles como archivos PNG, más un favicon.ico que contiene 16, 32 y 48 en un solo archivo. La versión de 48 píxeles solo existe dentro del ICO, donde Windows la usa para vistas de accesos directos más grandes; no se entrega como PNG separado porque nada en la web la pide.

¿Por qué apple-touch-icon no tiene transparencia?

Porque iOS representa las zonas transparentes del icono de pantalla de inicio en negro. Aplanarlo aquí, sobre tu color de fondo o sobre blanco si mantuviste la transparencia, hace que el icono se vea como lo diseñaste en lugar de quedar en un recuadro oscuro. Es el único archivo donde esta decisión se toma por ti.

¿Qué es un icono maskable?

Android recorta los iconos de apps a una forma que elige el dispositivo: un círculo, un «squircle», un cuadrado redondeado. Un icono maskable mantiene todo su contenido dentro del 80 % central para que nada importante se corte sea cual sea la forma aplicada. Si activas la opción, obtienes icon-512-maskable.png y una tercera entrada en el manifest con purpose "maskable".

¿Necesito el manifest.json?

Solo si quieres que tu sitio se pueda instalar como aplicación web progresiva o controlar el color de la interfaz del navegador en Android. Supone un archivo y una etiqueta link, y no hace daño si nunca usas esas funciones, así que se incluye por defecto con el nombre de tu app y el color de tema ya rellenados.

¿Puedo partir de un SVG?

Sí, y da el mejor resultado. Cada tamaño se genera desde el vector a su propia resolución en lugar de remuestrear un único mapa de bits, así que los tamaños pequeños siguen siendo legibles. El SVG se limpia antes: se eliminan scripts, controladores de eventos y referencias externas antes de renderizarlo.

¿Dónde van las etiquetas generadas?

Dentro del elemento head de tus páginas, y los archivos PNG, ICO y el manifest van en la raíz de tu sitio para que las rutas del fragmento funcionen. Si los sirves desde una subcarpeta, edita los valores href en head-snippet.html para que coincidan.

¿Por qué mi icono se ve borroso?

Casi siempre porque la imagen de origen es pequeña. Todo se crea a partir de un maestro de 512 píxeles, así que una imagen por debajo de unos 260 píxeles tiene que ampliarse para llegar ahí y los tamaños grandes se ven suaves. Empieza con al menos 512×512, o con un SVG, y todo el conjunto saldrá nítido. Una imagen por debajo de 32 píxeles se rechaza directamente porque no hay con qué trabajar.

¿El logotipo se sube a algún servidor?

No. La imagen nunca sale de tu navegador: se decodifica, redimensiona, codifica, se empaqueta en el ICO y se comprime en ZIP de forma local, y el archivo se te entrega directamente desde la memoria.