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. Cargue un logotipo cuadrado y descargue un conjunto completo, generado localmente sin enviar los activos de su marca a un servidor.
¿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.
¿Cuándo crear íconos a mano
• Cuando su logotipo es detallado: simplifique a una marca de letra para una legibilidad de 16×16.
• Cuando los favicons SVG son suficientes para audiencias modernas únicamente.
• Cuando las tiendas de plataforma requieren fuentes PSD en capas estrictamente especificadas.
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).
Diseño para 16×16
Los detalles finos desaparecen en el tamaño del favicon. Utilice formas atrevidas, alto contraste y evite trazos finos. Muchas marcas utilizan variantes de monogramas para tamaños pequeños.
Eliminación de caché al cambiar de marca
Los navegadores almacenan en caché los favicons de manera agresiva. Cambie el nombre de los archivos o agregue la consulta ?v=2 al actualizar los íconos para que los usuarios vean la nueva marca.
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.
¿Se cargan los logotipos a un servidor?
No, el cambio de tamaño usa el lienzo localmente.
¿Fuente SVG?
Convierta SVG a PNG primero en alta resolución, luego genere favicons.