간단한 파비콘이 필요한 이유
간단한 파비콘 하나만 제대로 넣어도 브라우저 탭, 즐겨찾기 목록, 검색 결과에서 사이트가 주는 인상이 완전히 달라집니다. 파비콘(favicon)은 favorite icon의 줄임말로, 1999년 인터넷 익스플로러 5에서 처음 등장한 뒤 지금까지 모든 주요 브라우저가 지원하는 사실상의 표준입니다.
파비콘이 없는 사이트는 브라우저 탭에 회색 지구본이나 빈 문서 모양이 표시됩니다. 탭을 열 개 이상 띄워두고 작업하는 사용자 입장에서는 어떤 탭이 어떤 사이트인지 구분할 단서가 사라지는 셈입니다. 구글은 2019년부터 모바일 검색 결과에 파비콘을 노출하기 시작했고, 현재는 데스크톱 검색 결과에서도 도메인 옆에 함께 표시됩니다.
파비콘 규격과 파일 형식 정리
파비콘 제작이 어렵게 느껴지는 이유는 대부분 규격 때문입니다. 검색하면 16px부터 512px까지 온갖 크기가 나오고, ICO와 PNG와 SVG 중 무엇을 써야 하는지도 헷갈립니다. 결론부터 말하면 개인 블로그나 소규모 사이트라면 세 개 파일이면 충분합니다.
| 파일 | 크기 | 용도 |
|---|---|---|
| favicon.ico | 32x32 | 브라우저 탭, 구형 브라우저 호환 |
| favicon.svg | 가변 | 고해상도 화면, 다크모드 대응 |
| apple-touch-icon.png | 180x180 | iOS 홈 화면 추가 시 |
| icon-192.png | 192x192 | 안드로이드, PWA 매니페스트 |
ICO 파일은 하나의 파일 안에 여러 해상도를 담을 수 있는 특이한 형식입니다. 예전에는 16x16과 32x32와 48x48을 모두 넣는 것이 정석이었지만, 요즘 브라우저는 32x32 하나만 있어도 알아서 축소해 보여줍니다.
prefers-color-scheme 미디어 쿼리를 넣으면 사용자가 다크모드를 켤 때 아이콘 색이 자동으로 바뀝니다. 검은색 로고를 쓰는 사이트라면 다크모드에서 아이콘이 배경에 묻히는 문제를 이 방법으로 해결할 수 있습니다.간단한 파비콘 만드는 5단계
디자인 경험이 없어도 아래 순서대로 진행하면 15분 안에 끝납니다.
- 모티프 하나만 정합니다. 16x16 픽셀은 한글 한 글자도 제대로 들어가지 않는 크기입니다. 사이트 이름의 첫 글자, 단순한 도형, 상징 아이콘 중 하나만 고르세요. 회사 로고를 그대로 축소하는 것은 거의 항상 실패합니다.
- 512x512 캔버스에서 시작합니다. 처음부터 작게 그리면 나중에 큰 크기가 필요할 때 다시 작업해야 합니다. 큰 캔버스에서 만들고 줄이는 방향이 항상 안전합니다.
- 여백을 10퍼센트 정도만 남깁니다. 파비콘은 이미 작기 때문에 여백이 넓으면 실제 아이콘이 보이지 않습니다. 다만 iOS 홈 화면 아이콘은 모서리가 둥글게 잘리므로 가장자리에 중요한 요소를 두지 않아야 합니다.
- 필요한 크기로 일괄 변환합니다. 하나씩 손으로 리사이즈하고 ICO로 변환하는 과정은 지루하고 실수가 잦습니다. 이런 반복 작업은 파비콘 생성기에 원본 이미지를 넣어 한 번에 처리하면 훨씬 빠릅니다.
- 실제 탭에서 확인합니다. 완성한 파일을 사이트에 올리고 브라우저 탭에서 눈으로 봐야 합니다. 모니터에서 크게 볼 때는 멀쩡했는데 탭에서는 뭉개져 보이는 경우가 정말 많습니다.
HTML에 파비콘 적용하는 코드
파일을 만들었다면 사이트 최상위 경로에 올리고 <head> 안에 링크 태그를 넣습니다. 2026년 기준으로 아래 네 줄이면 대부분의 환경을 커버합니다.
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">브라우저는 위에서부터 읽으면서 자신이 지원하는 형식 중 가장 적합한 것을 고릅니다. SVG를 지원하는 최신 브라우저는 두 번째 줄을 쓰고, 그렇지 않은 환경은 첫 줄의 ICO로 되돌아갑니다.
참고로 favicon.ico를 루트 경로에 두면 링크 태그가 없어도 브라우저가 알아서 찾아갑니다. 하지만 이 방식은 캐시 제어가 어렵고 명시적이지 않아서, 링크 태그를 함께 적어두는 편이 관리에 유리합니다.
?v=2 같은 쿼리 스트링을 붙여 캐시를 무효화하는 방법이 널리 쓰이지만, 루트 경로의 /favicon.ico 자동 탐색에는 적용되지 않습니다. 파비콘을 교체할 계획이 있다면 반드시 링크 태그로 명시하세요.파비콘이 안 보일 때 확인할 것
파비콘 관련 질문의 절반 이상은 "분명히 올렸는데 안 나온다"입니다. 아래 순서대로 확인하면 원인을 대부분 찾을 수 있습니다.
- 브라우저 캐시: 파비콘은 브라우저가 가장 공격적으로 캐싱하는 리소스입니다. 일반 새로고침으로는 갱신되지 않으므로 시크릿 창에서 먼저 확인하세요.
- 경로 확인: 브라우저 주소창에
도메인/favicon.ico를 직접 입력해 파일이 열리는지 봅니다. 404가 뜨면 업로드 위치가 잘못된 것입니다. - 파일 권한: 리눅스 서버에 FTP로 올린 경우 권한이 600으로 설정되어 웹 서버가 읽지 못하는 일이 있습니다. 644인지 확인하세요.
- MIME 타입: 확장자만 .ico로 바꾼 PNG 파일은 일부 브라우저에서 거부됩니다. 실제 형식과 확장자가 일치해야 합니다.
- 구글 검색 결과 반영: 검색 결과의 파비콘은 별도의 크롤링 주기를 따릅니다. 새 파비콘이 검색 결과에 나타나기까지 며칠에서 몇 주가 걸릴 수 있습니다.
모든 항목을 확인했는데도 안 보인다면, 파비콘 캐시를 저장하는 브라우저 내부 데이터베이스가 꼬였을 가능성이 있습니다. 크롬 기준으로 사용자 프로필 폴더의 Favicons 파일을 삭제하고 브라우저를 재시작하면 초기화됩니다.