여기에 이미지를 드롭하거나 클릭하여 찾아보기
PNG, JPG, SVG — 권장 512×512 px 이상
| Size | Filename | Use case |
|---|---|---|
| 16×16 | favicon-16x16.png | Browser tab (most common) |
| 32×32 | favicon-32x32.png | Browser tab (HiDPI), taskbar shortcut |
| 48×48 | favicon.ico (embedded) | Windows taskbar pinned sites |
| 57×57 | favicon-57x57.png | iOS non-retina home screen (legacy) |
| 72×72 | favicon-72x72.png | iPad non-retina (legacy) |
| 96×96 | favicon-96x96.png | Android, Google TV |
| 114×114 | favicon-114x114.png | iPhone retina (legacy) |
| 144×144 | favicon-144x144.png | iPad retina, Windows 8 tile |
| 152×152 | favicon-152x152.png | iPad retina (iOS 7+) |
| 180×180 | apple-touch-icon.png | iPhone / iPad modern (iOS 8+) |
| 192×192 | android-chrome-192x192.png | Android Chrome, PWA manifest |
| 512×512 | android-chrome-512x512.png | PWA splash screen, maskable icon |
<link rel="icon" type="image/x-icon" href="/favicon.ico" /> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> <link rel="manifest" href="/site.webmanifest" />
최신 브라우저에는 다음이 필요합니다: 16×16 및 32×32(브라우저 탭/바로가기), 48×48(Windows 작업 표시줄), 57×57 및 72×72(iOS 비-레티나), 96×96(Android Chrome), 114×114 및 144×144(iOS/Android 레티나), 152×152 및 180×180(iOS 홈 화면), 192×192 및 512×512(PWA 스플래시/마스커블).
최상의 결과를 위해 512×512 px 이상의 정사각형 PNG 또는 SVG를 사용하세요. 원형/둥근 형식에서 잘릴 수 있으므로 가장자리 근처에 중요한 세부 사항이 있는 이미지는 피하세요. SVG는 품질 손실 없이 확장되므로 이상적입니다.
네, 사이트를 Progressive Web App(PWA)으로 설치 가능하게 만들려면 필요합니다. webmanifest에는 앱 시작 화면의 이름, 아이콘 경로, 배경색이 포함됩니다.
생성된 모든 파일을 사이트 루트에 배치하고 HTML head에 이 태그들을 추가하세요: '<'link rel='icon' href='/favicon.ico'>, '<'link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>, '<'link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>, '<'link rel='manifest' href='/site.webmanifest'>.