브라우저 탭과 북마크에 사이트 고유 브랜드 아이콘 적용
목차
사이트 파비콘을 여러 포맷과 사이즈로 제대로 구성했다. favicon.ico, favicon.svg, apple-touch-icon.png 같은 파일들을 공개 디렉토리에 배치하고, 각 브라우저와 디바이스가 올바른 아이콘을 인식하도록 설정하는 작업이었다. 처음엔 단순해 보이는 변경이지만, 생각보다 고려할 부분이 많았고, 좋은 학습 거리가 됐다.
왜 이렇게 여러 파일이 필요한가
파비콘은 브라우저마다 지원하는 포맷과 사이즈가 다르다. 내가 커밋한 파일들을 보면:
| 파일명 | 용도 | 주 대상 |
|---|---|---|
favicon.ico |
클래식 브라우저 호환성 | IE, 구형 브라우저 |
favicon.svg |
최신 브라우저, 다크모드 지원 | Chrome, Firefox, Edge |
favicon-16.png |
브라우저 탭 (작은 해상도) | 모든 현대 브라우저 |
favicon-32.png |
브라우저 탭 (기본 사이즈) | 표준 탭 아이콘 |
favicon-48.png |
Windows 작업 표시줄 | Windows 환경 |
apple-touch-icon.png |
iOS/macOS 홈화면 | iOS Safari, macOS 기기 |
호스팅 환경에서 "모든 기기에서 같은 아이콘을 보이게 하려면" 이 정도 커버리지가 필요하다. 특히 모바일 사용자가 홈화면에 바로가기를 만들 때 apple-touch-icon.png 를 찾는데, 없으면 기본 텍스트나 깨진 이미지가 표시된다. 팀 내에서 처음 이걸 논의할 때는 "그냥 .ico 하나 넣으면 되지 않나?" 라는 의견도 있었지만, 최종적으로 사용자 경험 관점에서 다중 포맷이 필수라고 판단했다.
작은 작업 같지만 신경 쓸 점이 많다
이 작업을 진행하면서 느낀 게, 파비콘은 정말 "작은" 변경인데 실제로는 신경 쓸 사항이 많다는 것이었다.
1. 캐시 문제
파비콘은 브라우저 캐시의 최강자다. 한 번 로드되면 며칠간 캐시되고, 사용자가 강제 새로고침을 해도 안 갱신될 수 있다. 그래서 이전 파비콘이 자산에 남아있으면, 변경 후에도 한동안 구 이미지가 보일 가능성이 높다. 우리는 배포 전에 기존 파비콘들을 모두 정리하고 새 버전으로 완전히 대체하는 방식을 택했다.
2. HTTP 헤더와 manifest 연동
단순히 파일만 둬선 안 되고, 브라우저가 찾을 수 있도록 HTML의 <head> 태그나 manifest.json 에서 경로를 명시해야 한다. 예를 들어:
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
포맷 우선순위가 중요한데, 최신 브라우저가 .svg 를 먼저 만나야 다크모드 지원 같은 추가 기능을 활용할 수 있다.
3. 이미지 최적화
파비콘 이미지 자체도 최적화해야 한다. 작은 사이즈이긴 하지만, 사이트 방문자마다 매번 다운로드되는 파일이므로, 손실 압축이 가능하면 압축하고, 불필요한 메타데이터는 제거하는 게 좋다. 특히 여러 기기에서 요청되는 만큼 바이트 절약이 누적되면 제법 된다.
팀 관점의 회고
이 작업을 왜 지금 했는가, 언제 했는가도 중요하다. 사실 파비콘은 "필수" 기능은 아니다. 사이트가 동작하는 데 문제없다. 하지만 팀이 성장하면서 사용자 경험의 세부 사항들을 하나씩 챙기기 시작했는데, 파비콘도 그 일환이었다.
의사결정 관점에서 보면, 이런 작은 작업들을 우선순위에 둘 때는 몇 가지를 저울질한다:
- 영향도: 모든 방문자가 경험하는가? (파비콘은 맞음)
- 실행 난도: 얼마나 빨리, 안전하게 할 수 있는가? (파비콘은 낮음)
- 유지보수 부담: 앞으로 관리할 것이 많은가? (파비콘도 크지 않음)
세 가지 모두 긍정적이니 당연히 진행 대상이 된다.
또한, 이런 작업을 할 때는 "한 번에 제대로" 하는 게 중요하다. 나중에 "아, 이 포맷 추가해야겠다" "아, 이 사이즈 빼먹었다" 라고 되짚는 것보다, 처음부터 주요 디바이스들을 모두 고려해서 한번에 끝내는 게 기술 부채를 줄인다. 코드리뷰 할 때도 이 부분을 확인했다. 파일 목록에서 놓친 포맷이나 사이즈가 있는지, 캐시 버스팅이 제대로 되는지 같은 것들.
마지막으로, 작은 작업이라고 해서 일처리가 대충 되면 안 된다는 걸 다시 느꼈다. 파비콘처럼 사용자 눈에 띄지 않는 부분도 일관되고 정성 있게 다루면, 전체 서비스의 완성도가 높아진다. 팀 문화 차원에서도 "모든 작업은 소수자처럼" 이라는 신념을 유지하려고 한다.
🛒 이 글과 어울리는 추천 상품
*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.
댓글 0
첫 댓글 달아줘.