Generador de favicon
Los navegadores esperan múltiples tamaños de íconos: favicon.ico clásico de 16×16, íconos de pestañas de 32×32, ícono táctil de Apple de 180×180 e íconos PWA de 192×192.
¿Cómo generar favicons
1. Cargue un PNG o JPG cuadrado (se recomienda 512 × 512 o más grande).
2. Vista previa de los tamaños generados.
3. Descargue el paquete de íconos o archivos individuales.
4. Agregue etiquetas de enlace a su Encabezado HTML y coloque archivos en /public o raíz del sitio.
Ejemplos de configuración de Favicon
Nuevo sitio estático
Genera favicon.ico más PNG 32×32 y agregue etiquetas de enlace estándar rel="icon" a layout.html.
Manifiesto PWA
Exportar 192×192 y PNG de 512 × 512 para la matriz de íconos manifest.json.
Cambio de marca
Reemplace un logotipo maestro y regenere todos los tamaños para que las pestañas y los accesos directos de la pantalla de inicio coincidan.
¿Cuándo usar un generador de favicon
• Cuando inicia un sitio y necesitas todos los tamaños de íconos estándar a la vez.
• Cuando tiene un logotipo rasterizado pero no un archivo .ico de varios tamaños.
• Cuando quieres generación local sin cargar activos de marca.
Etiquetas de enlace HTML lista de verificación
Incluya rel="icon" para tamaños PNG, rel="apple-touch-icon" para iOS y, opcionalmente, manifest.json para PWA. Coloque los archivos en rutas predecibles (/favicon.ico todavía ayuda a los rastreadores antiguos).
Preguntas frecuentes
¿Qué tamaño ¿Debería ser la imagen de origen?
Al menos 512×512 px cuadrados. Los masters más grandes reducen la escala mejor que los logotipos pequeños.
¿ICO vs PNG favicon?
Los navegadores modernos aceptan PNG; .ico incluye varios tamaños para pestañas heredadas de Windows.
¿tamaño del icono táctil de Apple?
180×180 px para accesos directos a la pantalla de inicio de iOS: use PNG sin transparencia para obtener mejores resultados.
¿Fondo transparente?
Funciona para pestañas PNG; Los íconos de inicio de iOS pueden tener un color blanco mate: pruébelo en el dispositivo.
¿Fuente SVG?
Convierta SVG a PNG primero en alta resolución, luego genere favicons.