La capa seleccionada tiene que ser cuadrada, con el mismo ancho y alto (por ejemplo, 512x512 píxeles). Favvy te avisará si has seleccionado una capa que no es cuadrada.
El botón Export Favicons no está disponible hasta que seleccionas una sola capa cuadrada, ni mientras Favvy genera el paquete de favicons actual. Pasa el cursor por encima del botón para ver por qué no está disponible, y espera a que termine la generación antes de empezar otra exportación.
Después de hacer clic en el botón Export Favicons, verás la ventana HTML code for your website's <head> tag. Para descargar el archivo .zip desde Figma a tu ordenador, haz clic en el botón Download favicons .zip file del plugin Favvy.
Guardar archivos descargados desde Figma Si usas la aplicación de escritorio de Figma, verás un aviso para descargar el archivo. En cambio, si usas Figma en un navegador web, el archivo se descargará automáticamente en tu ordenador (normalmente en la carpeta Descargas).
¿Qué contiene el archivo .zip que exporta Favvy?
Según los formatos de exportación que selecciones, estos son todos los archivos que puede incluir el .zip que exporta Favvy:
android-chrome-192x192.pngandroid-chrome-512x512.pngapple-touch-icon.pngfavicon.icofavicon.svghead.htmlsite.webmanifest
Otras opciones de exportación de Favvy
Antes de exportar tus favicons, puedes indicar, si quieres, el nombre de tu web y un color de tema. Favvy recuerda el nombre de la web, el color de tema y los interruptores de plataforma de cada archivo de Figma.
Website Name
Si escribes el nombre de tu web en el campo Website Name, se añadirá automáticamente a los campos name y short_name del archivo site.webmanifest exportado.
El archivo site.webmanifest se usa en las aplicaciones web progresivas (PWA) y, si te interesa, puedes leer más sobre el manifiesto de aplicaciones web en MDN Web Docs.
Theme Colour
Si escribes un código de color HEX en el campo Theme Colour (o usas el selector de color), se añadirá automáticamente a los campos theme-color del código generado para tu etiqueta <head></head>, y también se usará como fondo de las pantallas de inicio de iOS.
Sizes & Platforms
Default (Required) se incluye siempre. iOS (Icons) y Android (PWA Icons) están activados por defecto y puedes desactivarlos si no los necesitas. Activa iOS (PWA Splash Screen) para añadir una pantalla de inicio de iOS; para ello, iOS (Icons) tiene que estar activado.