도구 › 디자인

파비콘·앱 아이콘 스튜디오

로고 하나로 favicon.ico, apple-touch-icon, Android 적응형·마스커블(maskable) 아이콘, iOS AppIcon 세트, site.webmanifest를 만듭니다.

포함된 파일

favicon.ico(16, 32, 48), PNG 파비콘, apple-touch-icon, Android Chrome 및 maskable 아이콘, site.webmanifest, Xcode용 iOS AppIcon 세트, 적응형 아이콘이 포함된 Android mipmap, 그리고 다음 HTML 스니펫:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#F39A3D">

사용 방법

  1. 로고를 크기별로 캔버스에 그리며, 마스커블·적응형 아이콘을 위한 안전 영역을 둡니다.
  2. favicon.ico에는 최신 브라우저가 모두 읽는 16, 32, 48 px PNG가 들어 있습니다.

자주 묻는 질문

어떤 원본이 가장 좋나요?

SVG, 또는 로고 주변에 여백이 조금 있는 512×512 이상의 정사각형 PNG가 좋습니다.