선택한 레이어는 너비와 높이가 같은 정사각형 비율이어야 해요(예: 512x512픽셀). 정사각형이 아닌 레이어를 선택하면 Favvy가 알려 줘요.

Export Favicons 버튼은 정사각형 레이어 하나를 선택하기 전까지, 그리고 Favvy가 현재 파비콘 패키지를 생성하는 동안에는 사용할 수 없어요. 버튼에 마우스를 올리면 사용할 수 없는 이유를 확인할 수 있으며, 생성이 끝날 때까지 기다린 다음 다시 내보내세요.

Export Favicons 버튼을 클릭하면 HTML code for your website's <head> tag 창이 표시돼요. Figma에서 컴퓨터로 .zip 파일을 다운로드하려면 Favvy 플러그인에서 Download favicons .zip file 버튼을 클릭하세요.

Figma에서 다운로드한 파일 저장하기 Figma 데스크톱 앱을 사용한다면 파일을 다운로드하라는 창이 나타나요. 하지만 웹 브라우저에서 Figma를 사용한다면 기본적으로 파일이 컴퓨터에 자동으로 다운로드돼요(보통 컴퓨터의 Downloads 폴더에 저장돼요).

내보낸 Favvy .zip 파일에는 무엇이 들어 있나요?

선택한 내보내기 형식에 따라, Favvy에서 내보낸 .zip 파일에 포함될 수 있는 파일 전체 목록은 다음과 같아요.

• android-chrome-192x192.png
• android-chrome-512x512.png
• apple-touch-icon.png
• favicon.ico
• favicon.svg
• head.html
• site.webmanifest

기타 Favvy 내보내기 옵션

파비콘을 내보내기 전에 웹사이트 이름과 테마 색상을 선택적으로 지정할 수 있어요. Favvy는 Figma 파일마다 웹사이트 이름, 테마 색상, 플랫폼 스위치를 기억해요.

웹사이트 이름

Website Name 입력 필드에 웹사이트 이름을 입력하면, 내보낸 site.webmanifest 파일의 name과 short_name 필드에 자동으로 추가돼요.

site.webmanifest 파일은 프로그레시브 웹 앱(PWA)에서 사용돼요. 관심이 있다면 MDN 웹 문서에서 웹 앱 매니페스트에 대해 자세히 알아보세요.

테마 색상

Theme Colour 입력 필드에 HEX 색상 코드를 입력하면(또는 색상 선택기를 사용하면), <head></head> 태그용으로 생성된 코드의 theme-color 필드에 자동으로 추가되고 iOS 스플래시 화면 배경에도 사용돼요.

크기 및 플랫폼

Default (Required)는 항상 포함돼요. iOS (Icons) 옵션과 Android (PWA Icons) 옵션은 기본으로 켜져 있으며, 필요 없다면 끌 수 있어요. iOS 스플래시 화면을 추가하려면 iOS (PWA Splash Screen) 옵션을 켜세요. 이 옵션을 쓰려면 iOS (Icons) 옵션이 켜져 있어야 해요.