Configuración moderna de favicon e iconos PWA
Genera favicon, Apple touch icon y tamaños PNG para PWA en local, luego conecta las etiquetas link HTML y los iconos del manifest sin subir tu logo.
Publicar un sitio o PWA sigue implicando publicar un pequeño conjunto de archivos de icono que navegadores y pantallas de inicio esperan. Puedes generar esos tamaños PNG en local y copiar los fragmentos HTML / manifest que los referencian.
Qué suele necesitarse
| Asset | Tamaño habitual | Nombre de archivo |
|---|---|---|
| Favicon | 16 / 32 / 48 | favicon-16x16.png, etc. |
| Apple touch | 180×180 | apple-touch-icon.png |
| PWA | 192 / 512 | icon-192.png, icon-512.png |
Los navegadores modernos aceptan favicons PNG mediante <link rel="icon" type="image/png" …>. Un .ico legacy único es opcional cuando hay enlaces PNG presentes.
Flujo de trabajo local
- Parte de un logo PNG cuadrado o de alta resolución.
- Abre Favicon Generator.
- Elige Cover para marcas cuadradas a sangre, o Contain para logos anchos que necesitan padding.
- Activa un color de fondo solo cuando quieras rellenar el padding o aplanar la transparencia.
- Haz clic en Generate icons y descarga el zip (incluye
manifest.webmanifest). - Copia el fragmento de enlaces HTML en
<head>y pega losiconsdel manifest en tu manifest PWA.
Cover vs contain
- Cover recorta a un cuadrado — bueno cuando la marca debe llenar el tile del icono.
- Contain mantiene visible todo el logo con padding — bueno para wordmarks y logos anchos.
No para gráficos de listado en app store
Las capturas de App Store y Google Play usan presets y checklists distintos. Usa App Market Image Resizer para assets de tienda; el generador de favicon es solo para publicación web / PWA.
Herramientas relacionadas
- Responsive Image Generator — imágenes de página multi-ancho y fragmentos
srcset. - Image Cropper — ajusta el encuadre del logo antes de exportar iconos.