이게 뭔가요?
이미지나 글자·이모지로 파비콘을 만듭니다. 필요한 크기를 한 번에 만들어 각각 내려받을 수 있고, HTML에 붙일 코드도 함께 줍니다.
어떤 크기가 필요한가
| 크기 | 쓰이는 곳 | 파일명 |
|---|---|---|
| 16×16 | 브라우저 탭 | favicon-16.png |
| 32×32 | 탭·즐겨찾기·바로가기 | favicon-32.png |
| 180×180 | iOS 홈 화면 | apple-touch-icon.png |
| 192×192 | 안드로이드 홈 화면 | icon-192.png |
| 512×512 | PWA 설치 화면·스플래시 | icon-512.png |
.ico를 만들지 않는 이유
예전에는 favicon.ico가 필수였습니다. 지금은 아닙니다.
요즘 브라우저는 PNG 파비콘을 모두 이해합니다. HTML에 <link rel="icon" type="image/png">로 지정하면 됩니다. .ico는 여러 크기를 한 파일에 담는 낡은 포맷이라, 굳이 인코더를 넣어 파일을 늘릴 이유가 없습니다.
.ico가 여전히 필요한 경우는 아주 오래된 브라우저를 지원해야 할 때 정도입니다.
HTML에 넣기
만든 PNG를 사이트 루트(public/)에 넣고 <head>에 이렇게 씁니다.
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">192·512px은 PWA 매니페스트(site.webmanifest)에 넣습니다.
{
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}작게 보인다는 걸 잊지 마세요
파비콘은 대부분 16px로 표시됩니다. 손톱보다 작습니다.
- 글자는 한 자만 — 두 자만 넣어도 뭉개져 읽히지 않습니다.
- 그림은 단순한 형태로 — 로고를 그대로 줄이면 대개 알아볼 수 없게 됩니다. 상징이 되는 부분만 잘라 쓰는 편이 낫습니다.
- 배경과 대비를 크게 — 브라우저 탭 배경이 밝을 수도 어두울 수도 있습니다.
- 얇은 선은 사라집니다 — 1px 선은 16px에서 보이지 않습니다.
이 도구의 미리보기는 실제 크기로 보여주니, 16px 미리보기에서 알아볼 수 있는지 꼭 확인하세요.
모양 고르기
- 정사각형 — 꽉 찬 느낌. 배경색이 확실히 보입니다.
- 둥근 모서리 — 요즘 앱 아이콘 느낌. 대부분 무난합니다.
- 원형 — 프로필 아이콘 느낌.
iOS는 apple-touch-icon에 자동으로 둥근 모서리를 입히므로, 원본은 정사각형으로 두는 편이 안전합니다.
알아두면 좋은 것
- 이미지는 서버로 올라가지 않습니다. 브라우저 안에서 canvas로 처리합니다.
- 이미지를 넣으면 짧은 변에 맞춰 꽉 채우고 가운데를 남깁니다(cover). 가장자리가 잘릴 수 있으니 여백이 있는 이미지를 쓰세요.
- 파비콘을 바꿔도 브라우저가 예전 것을 오래 기억합니다. 캐시를 지우거나
?v=2같은 쿼리를 붙여 확인하세요.