안정적인 HTML 파비콘은 태그 하나만으로 완성되지 않습니다. 접근 가능한 몇 가지 파일과 head에 넣은 링크가 함께 필요합니다. 이 절차는 오래된 변형을 무작정 늘리지 않고 최신 브라우저 탭, 구형 클라이언트, 모바일 바로가기를 지원합니다.
파일 준비하기
아주 작게 표시해도 알아볼 수 있는 정사각형 심벌로 시작하세요. favicon.ico, favicon.svg, apple-touch-icon.png, site.webmanifest와 매니페스트가 참조하는 PNG 파일을 도메인 루트에서 제공하는 공개 폴더에 넣으세요.
/favicon.svg 같은 경로는 도메인 루트를 기준으로 합니다. 따라서 /products나 /blog/article에서도 올바르게 동작합니다. 반면 favicon.svg는 현재 페이지를 기준으로 해석될 수 있습니다.
head에 요소 추가하기
SVG를 rel icon 및 type image/svg+xml로 먼저 선언하고 ICO를 rel icon 및 sizes any로 선언하세요. iOS용 rel apple-touch-icon과 웹 앱 설치용 rel manifest도 추가하세요.
type은 실제 제공하는 파일과 일치해야 합니다. PNG의 이름만 .ico로 바꾸면 안 됩니다. 내용과 헤더가 ICO 형식이어야 합니다.
| 용도 | 관계 | 파일 |
|---|---|---|
| 최신 브라우저 | icon | /favicon.svg |
| 호환성 | icon | /favicon.ico |
| iOS 홈 화면 | apple-touch-icon | /apple-touch-icon.png |
| 웹 앱 | manifest | /site.webmanifest |
경로를 유지하며 배포하기
배포 후 각 파일의 URL을 직접 열어보세요. 응답은 성공 상태의 이미지나 매니페스트여야 합니다. 실제 내용이 로그인 페이지나 404 HTML인데 성공 상태 코드만 반환하는 경우도 확인하세요.
사이트가 하위 디렉터리에 있다면 경로나 공개 기본 경로를 조정하세요. 개발자 도구에서 최종 페이지를 검사하여 다른 호스트로 리디렉션되지 않고 예상한 URL을 요청하는지 확인하세요.
결과 확인하기
캐시를 끄고 새로고침한 뒤 생성된 DOM의 link 요소를 검사하세요. 브라우저 탭과 즐겨찾기를 테스트하고, 해당하는 경우 실제 기기의 홈 화면에도 사이트를 추가해 보세요.
검색 결과 파비콘은 검색 엔진의 규칙과 크롤링 일정도 따릅니다. 브라우저에서 아이콘이 보이더라도 검색 결과가 즉시 업데이트되는 것은 아닙니다.
공식 참고 자료
자주 묻는 질문
파비콘 요소를 body에 넣나요?
아니요. 아이콘과 매니페스트를 지정하는 link 요소는 문서의 head에 넣어야 합니다.
루트의 favicon.ico만으로 충분한가요?
유용한 대체 파일이지만 Apple Touch 아이콘이나 설치용 매니페스트 아이콘을 지정하지는 않습니다. 각 용도에 맞는 형식을 별도로 선언하세요.
/로 시작하는 경로를 쓰는 이유는 무엇인가요?
도메인 루트를 기준으로 하므로 하위 페이지가 자기 폴더에서 파일을 찾는 문제를 방지합니다.