Generador de favicons — ICO, PNG y Apple Touch Icon
Convierte una imagen en un conjunto completo de favicons: favicon.ico, iconos PNG, un apple-touch-icon y un manifiesto de aplicación web.
El apple-touch-icon es siempre opaco. Cuando el nombre de la app está vacío, el manifiesto usa el nombre del archivo de imagen.
Vista previa
Archivos del ZIP
Cómo crear un favicon
- Elige una imagen cuadrada, idealmente de al menos 512 por 512 píxeles, en formato PNG, JPG, WebP o SVG.
- Elige cómo deben encajar las imágenes no cuadradas: contain las rellena con el color de fondo, cover las recorta por el centro.
- Configura los colores de fondo y del tema, el relleno y si los iconos pequeños mantienen un fondo transparente.
- Escribe el nombre y el nombre corto de la app que debe llevar el manifiesto de aplicación web, y revisa las vistas previas en vivo.
- Descarga el ZIP con todos los archivos, o coge favicon.ico y apple-touch-icon.png por separado, y copia el fragmento HTML.
Cuándo resulta útil
- Dar un favicon a una web nueva sin abrir un editor de imágenes.
- Sustituir un favicon ausente o borroso que aparece como icono en blanco en las pestañas.
- Añadir un apple-touch-icon para que una web se vea bien al guardarla en la pantalla de inicio de un iPhone.
- Preparar iconos de Android y un manifiesto para una aplicación web progresiva.
- Convertir un logotipo en un conjunto de iconos ordenado con el mismo relleno en todos los tamaños.
Preguntas frecuentes
¿Qué tamaños genera el generador?
Escribe favicon.ico con imágenes de 16, 32 y 48 píxeles dentro, archivos separados favicon-16x16.png y favicon-32x32.png, un apple-touch-icon.png de 180 por 180, e iconos de Android de 192 y 512 píxeles.
¿Por qué el apple-touch-icon es siempre opaco?
iOS no muestra transparencia en un icono de la pantalla de inicio, así que un PNG transparente saldría con un bloque negro o blanco detrás. El generador rellena ese archivo con tu color de fondo y deja transparentes los tamaños pequeños del favicon si quieres.
¿Qué debería poner en el manifiesto?
Usa el nombre completo del sitio o de la app y un nombre corto de unos doce caracteres, porque el nombre corto es lo que aparece bajo el icono en un móvil. El color del tema tiñe la barra del navegador y el color de fondo rellena la pantalla de inicio.
¿Puedo usar un logotipo SVG?
Sí. El SVG se rasteriza a 512 píxeles de ancho y su relación de aspecto se toma de los atributos de ancho y alto o del viewBox, así que un logotipo cuadrado sigue siendo cuadrado.
¿Dónde van los archivos en mi servidor?
Ponlos en la raíz del sitio junto a index.html, para que las rutas del fragmento como /favicon.ico y /site.webmanifest se resuelvan. Si los guardas en una subcarpeta, edita los valores href del fragmento para que coincidan.
¿Se sube mi imagen a algún sitio?
No. La imagen se decodifica y se dibuja en un lienzo dentro de tu navegador, y el ZIP se monta en memoria, así que no se envía nada a un servidor.