Generador de favicon (ICO · PNG)

Cómo usar

1. Elige una imagen o suéltala en el recuadro. Admite PNG, JPEG, WebP, GIF y SVG; una imagen cuadrada de al menos 512 × 512 px da el resultado más nítido.
2. Ajusta el margen y las esquinas redondeadas, y elige un fondo transparente o de color. La lista de abajo se actualiza con cada cambio.
3. Escribe un nombre de app si quieres incluirlo en site.webmanifest. Es el nombre que se muestra al añadir el sitio a la pantalla de inicio del móvil.
4. Pulsa «Descargar todo (ZIP)» o descarga los archivos uno a uno desde la lista.
5. Sube los archivos a la carpeta raíz de tu sitio y pega las etiquetas de «Etiquetas para <head>» dentro del <head> de tus páginas.

Preguntas frecuentes

¿Se sube mi imagen?

No. El cambio de tamaño y el empaquetado se hacen solo en tu navegador.

¿Qué archivos incluye?

favicon.ico (16·32·48), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180), android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest, favicon-head.html. El archivo HTML contiene las etiquetas para pegar.

¿Por qué apple-touch-icon.png tiene fondo si elegí transparente?

iOS rellena las zonas transparentes de negro y redondea las esquinas por su cuenta. Por eso este icono siempre lleva un fondo sólido (blanco si eliges transparente) y sin esquinas redondeadas.

Mi imagen no es cuadrada. ¿Qué pasa?

Se ajusta manteniendo la proporción y se centra, dejando espacio vacío en los lados más cortos. Recórtala en cuadrado antes si quieres que llene el icono.

El icono se ve borroso a 16 px.

A 16 × 16 px los detalles finos y el texto pequeño desaparecen. Usa una forma sencilla o una o dos letras, y reduce el margen.

El navegador sigue mostrando el icono antiguo.

Los navegadores guardan el favicon en caché durante mucho tiempo. Recarga vaciando la caché o añade una versión al enlace, por ejemplo /favicon.ico?v=2.