파비콘 크기 16·32·48·180px, 어디에 쓰이나
사이트에 새 로고를 올렸는데 브라우저 탭 아이콘은 그대로이거나, 아이폰 홈 화면에 추가해 보니 아이콘이 뭉개져 나오는 경우가 있습니다. 파비콘은 파일 하나로 끝나지 않고 쓰이는 자리마다 필요한 크기가 다르기 때문입니다.
이 글은 어떤 크기가 왜 필요한지, <head> 에 무엇을 적는지, 그리고 바꿨는데 안 바뀔 때 원인을 어떤 순서로 좁히는지를 정리합니다.
요약 ① 아이콘을 여러 개 선언해 두면 브라우저가
sizes를 보고 고릅니다. 이sizes값은 CSS 픽셀이 아니라 실제 픽셀입니다. ② iOS 홈 화면 아이콘은rel="apple-touch-icon"으로 따로 지정하며, 애플 문서가 든 아이폰 레티나 예시 크기가 180×180입니다. ③ 안 바뀔 때는 파일 → 태그 → 캐시 순서로 좁힙니다. 검색 결과의 아이콘은 다시 크롤될 때까지 며칠에서 몇 주가 걸릴 수 있습니다.
왜 크기가 여러 개 필요할까
HTML 표준은 파비콘을 이렇게 다룹니다. 아이콘을 여러 개 선언하면 브라우저가 type·media·sizes 속성을 보고 그 자리에 가장 적절한 것을 고릅니다.
여기서 sizes 의 단위가 핵심입니다. 표준은 sizes 키워드가 CSS 픽셀이 아니라 실제 픽셀을 뜻한다고 못 박고 있습니다. 표준이 직접 든 예시는, 화면 배율이 2배인 기기에서 CSS 픽셀 50 너비로 보일 아이콘은 실제 픽셀로 100 너비가 된다는 것입니다.
탭 아이콘이 오래 16px이었는데도 32px을 함께 넣는 이유가 여기 있습니다. 화면에서 차지하는 자리는 같아도 배율이 2배면 실제 픽셀은 두 배가 필요합니다.
크기별로 어디에 쓰이는지
| 크기 | 태그 | 쓰이는 자리 |
|---|---|---|
| 16×16 | rel="icon" | 탭·주소창처럼 가장 작은 자리 |
| 32×32 | rel="icon" | 같은 자리의 배율 2배 화면, 조금 더 큰 자리 |
| 48×48 | rel="icon" | 더 큰 자리를 위한 여유분 |
| 180×180 | rel="apple-touch-icon" | iOS 홈 화면에 추가했을 때 |
앞의 세 개는 같은 rel="icon" 이고 sizes 값만 다릅니다. 어느 것을 쓸지는 브라우저가 정하므로, 우리는 후보를 갖춰 두기만 하면 됩니다.
iOS 홈 화면 아이콘은 태그가 다릅니다
애플 문서는 사이트 전체에 쓸 아이콘이라면 PNG 파일을 루트 폴더에 apple-touch-icon.png 라는 이름으로 두거나, <link rel="apple-touch-icon" href="..."> 를 넣으라고 안내합니다. 기기별로 여러 개를 두려면 sizes 를 붙이며, 이때 아이폰 레티나 예시로 제시된 값이 sizes="180x180" 입니다.
180px 하나만 둬도 되는 근거도 같은 문서에 있습니다. 기기에 맞는 크기가 없으면 권장 크기보다 큰 것 중 가장 작은 것을 쓰고, 더 큰 것이 없으면 가장 큰 것을 쓴다고 규정합니다.
또 링크 태그가 하나도 없으면 루트에서 apple-touch-icon 으로 시작하는 파일명을 찾습니다. 그래서 파일명을 그대로 맞춰 올려두는 방식이 여전히 유효합니다.
검색 결과의 아이콘은 기준이 따로 있습니다
구글 검색 문서는 파비콘이 정사각형(1:1)이어야 하고 최소 8×8이며, 여러 화면에서 잘 보이도록 48×48보다 큰 것을 권장한다고 밝힙니다. 지원하는 rel 값은 icon, shortcut icon, apple-touch-icon, apple-touch-icon-precomposed 입니다.
또 사이트 하나(호스트 이름 기준)당 파비콘 하나만 지원하며, 홈페이지에 선언되어 있어야 한다고 안내합니다. 탭용 작은 크기만 갖추고 끝내지 말고, 더 큰 정사각형 파일을 하나 더 두는 편이 검색 결과에는 유리합니다.
도구 없이 파비콘 세트 만들기
순서는 네 단계입니다.
- 가능한 한 큰 정사각형 원본을 준비합니다. 작은 이미지를 키우면 흐려지므로 항상 큰 쪽에서 줄입니다.
- 이미지 편집기에서 16·32·48·180px로 각각 줄여 PNG로 저장합니다. macOS 미리보기는
도구 > 크기 조정, Windows 그림판은크기 조정메뉴입니다. - 저장한 PNG를 사이트 루트에 올립니다.
<head>에 링크 태그를 넣습니다.
<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="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
주의할 점이 두 가지 있습니다. 표준은 sizes 에 파일에 실제로 없는 크기를 적어서는 안 된다고 규정합니다. 32px 파일 하나를 두고 sizes="16x16 32x32" 처럼 적으면 브라우저의 선택이 어긋납니다.
다른 하나는 애플 터치 아이콘입니다. 투명 배경을 그대로 두면 iOS 홈 화면에서 투명한 부분이 검게 보일 수 있어, 배경색을 채워 두는 쪽이 안전합니다.
번거로운 지점은 같은 리사이즈를 네 번 반복해야 하고, 편집기마다 축소 알고리즘이 달라 16px 같은 작은 크기에서 특히 뭉개지기 쉽다는 점입니다.
저희 도구로 확인하기. 이미지 한 장을 올리면 16·32·48·180px PNG가 한 번에 만들어지고, 위와 같은 링크 태그도 같은 화면에서 복사할 수 있습니다. 화면의 투명 배경 유지 체크를 끄면 배경색을 골라 채운 채로 만들 수 있어, 애플 터치 아이콘도 같은 자리에서 해결됩니다.
설치·회원가입 없이 브라우저 안에서 바로 변환되며, 올린 이미지는 서버로 업로드되지 않습니다.
바꿨는데 안 바뀔 때 — 순서대로 좁히기
원인이 파일에 있는지, 태그에 있는지, 캐시에 있는지부터 갈라야 합니다. 순서를 지키면 대개 2~3단계 안에서 끝납니다.
1단계 — 파일이 실제로 바뀌었나
브라우저 주소창에 파비콘 파일 주소를 직접 입력해 엽니다(예: https://example.com/favicon-32x32.png). 이때도 캐시가 끼어들 수 있으니 시크릿 창에서 열거나 강력 새로고침으로 다시 받아 봅니다.
그렇게 열었는데도 옛 이미지가 그대로 나오면 배포나 CDN 쪽 문제이지 태그 문제가 아닙니다.
2단계 — 태그가 실제로 들어갔나
페이지 소스 보기에서 rel="icon" 을 검색합니다. 프레임워크가 자동으로 넣는 태그와 직접 넣은 태그가 겹치는 경우가 많습니다.
표준은 똑같이 적절한 아이콘이 여러 개면 문서에서 마지막에 선언된 것을 쓰도록 정하고 있습니다. 내가 넣은 태그 뒤에 기본 태그가 붙었다면 그쪽이 이깁니다.
3단계 — 루트에 남아 있는 옛 favicon.ico
표준은 icon 키워드를 가진 링크가 하나도 없을 때 브라우저가 /favicon.ico 를 요청할 수 있다고 정합니다. 태그가 제대로 들어간 페이지에서는 이 경로가 쓰이지 않지만, 태그가 빠진 페이지에서는 루트에 남은 옛 파일이 계속 보입니다.
4단계 — 브라우저 캐시
시크릿 창이나 다른 브라우저에서 같은 주소를 열어 봅니다. 거기서는 새 아이콘이 나온다면 캐시 문제로 좁혀집니다.
이때는 파일명을 바꾸거나 href="/favicon-32x32.png?v=2" 처럼 주소를 바꾸면 브라우저가 다른 리소스로 취급합니다. 다만 구글 문서는 파비콘 주소가 안정적이어야 한다고, 즉 자주 바꾸지 말라고 명시합니다. 배포마다 버전을 붙이지 말고 실제로 아이콘을 교체할 때만 바꿉니다.
5단계 — 검색 결과의 아이콘
검색 결과에 뜨는 아이콘은 브라우저 캐시와 별개입니다. 구글 문서는 Googlebot-Image가 파비콘 파일을, Googlebot이 홈페이지를 크롤할 수 있어야 한다고(robots.txt로 막으면 안 된다고) 안내합니다.
또 다시 크롤하기까지 며칠에서 몇 주가 걸릴 수 있다고 밝히고 있습니다. 1~4단계가 모두 정상인데 검색 결과만 옛 아이콘이라면, 남은 건 기다리는 일입니다.
자주 막히는 지점
| 증상 | 먼저 확인할 것 |
|---|---|
| 탭 아이콘만 안 바뀜 | 파일 주소 직접 열기 → 시크릿 창 |
| iOS 홈 화면 아이콘이 검게 나옴 | 투명 배경 여부, 배경색 채우기 |
| 작은 크기에서 뭉개짐 | 큰 원본에서 각 크기로 다시 만들었는지 |
| 검색 결과만 옛 아이콘 | 크롤 대기, robots.txt 차단 여부 |
sizes 를 적었는데 무시됨 | 파일에 실제로 없는 크기를 적었는지 |
정리
- 파비콘은 크기마다 쓰이는 자리가 달라, 16·32·48px과 iOS용 180px을 함께 갖추는 구성이 무난합니다.
sizes값은 CSS 픽셀이 아니라 실제 픽셀이라, 배율 2배 화면 때문에 32px이 필요합니다.- iOS 홈 화면 아이콘은
rel="apple-touch-icon"이며, 애플 문서의 아이폰 레티나 예시가 180×180입니다. - 구글 검색 결과용 파비콘은 정사각형에 최소 8×8, 48×48보다 큰 크기를 권장하고 사이트당 하나만 쓰입니다.
- 안 바뀔 때는 파일 → 태그 → 옛
/favicon.ico→ 캐시 → 크롤 대기 순서로 좁힙니다. sizes에는 파일에 실제로 있는 크기만 적습니다.
설치·회원가입 없이 브라우저 안에서 바로 변환되며, 올린 이미지는 서버로 업로드되지 않습니다.
자주 묻는 질문
.ico 파일을 꼭 만들어야 하나요?
HTML 표준은 icon 키워드에 기본 포맷을 정해 두지 않았고, 리소스를 이미지로 기대한다고만 규정합니다. 구글 검색 문서도 유효한 파비콘 포맷이면 지원한다고 밝히고 있습니다. 링크 태그를 제대로 넣었다면 PNG만으로도 됩니다. 다만 icon 링크가 하나도 없는 페이지에서는 브라우저가 /favicon.ico 를 요청할 수 있으므로, 옛 .ico 파일이 루트에 남아 있다면 그것이 보일 수 있습니다.
크기를 하나만 쓰면 안 되나요?
동작은 합니다. 표준은 여러 후보 중 가장 적절한 것을 고르라고 할 뿐, 반드시 여러 개를 두라고 하지는 않습니다. 다만 하나만 두면 그 파일이 모든 자리에서 늘어나거나 줄어들며 쓰이고, 특히 작게 줄어들 때 획이 뭉개지기 쉽습니다. 작은 크기를 따로 만들어 두면 그 자리에서 훨씬 또렷합니다.
SVG 파비콘도 쓸 수 있나요?
표준에는 sizes="any" 라는 키워드가 정의되어 있고, SVG처럼 확대·축소되는 아이콘을 뜻합니다. 실제 지원 여부는 사용하는 브라우저에서 직접 확인하는 것이 정확합니다. PNG 후보를 함께 선언해 두면 SVG를 처리하지 못하는 환경에서도 다음 후보로 넘어가므로 안전합니다.
올린 이미지가 서버로 업로드되나요?
아니요. 이 도구는 브라우저의 canvas로 이미지를 각 크기로 줄여 PNG를 만들고, 그 결과를 브라우저 안에서 바로 내려받게 합니다. 올린 이미지 파일은 서버로 전송되거나 저장되지 않습니다.