모든 브라우저에서 사이트 고유 아이콘 표시

파비콘(favicon) 5가지 포맷을 한 번에 적용했다. 쉬워 보이지만 생각보다 고려할 게 많은 작업이었다.

왜 이렇게 많은 포맷이 필요한가

처음엔 favicon.ico 하나면 충분하다고 생각했는데, 실제로는 브라우저와 디바이스별로 기대하는 파일 형식이 제각각이다. 사용자가 탭이 여러 개 열려 있을 때 어느 탭이 우리 사이트인지 한눈에 구별하려면, 모든 플랫폼에서 일관되게 우리의 로고/아이콘이 보여야 한다.

예를 들어:
- iOS 사용자가 홈 화면에 웹앱으로 추가할 때는 apple-touch-icon.png를 찾는다
- 안드로이드 PWA 설치 시에는 icon.png를 기대한다
- 주소창이나 탭에서는 보통 32px 크기의 아이콘이 필요하다
- 구형 브라우저는 여전히 .ico 포맷만 인식한다

이번에 파일 5개를 한 번에 올린 이유가 바로 이것이다. 하나라도 빠지면 특정 기기나 상황에서 기본 아이콘(보통 회색 구 모양)이 표시되기 때문에, 브랜드 일관성과 사용자 경험이 깨진다.

적용한 파일들의 역할

기술적 고려사항

이런 다양한 포맷을 지원하면서 배운 점:

1. 벡터 SVG는 미래지향적이지만 완전하지 않다
   favicon.svg는 정말 깔끔하고 모든 해상도에서 완벽하게 렌더링된다. 하지만 모든 브라우저가 지원하는 건 아니고, 일부 기기(특히 iOS)에서는 여전히 래스터 포맷이 필요하다. 그래서 SVG와 PNG를 함께 제공해야 한다.

2. 크기 최적화 vs 품질 보장
   180×180px의 apple-touch-icon이나 192×192px의 icon은 충분히 크지만, 모바일에서 표시될 때 깔끔해야 한다. 작은 디테일이 뭉개지지 않도록 디자인 단계부터 신경써야 한다.

3. 오래된 기술과의 공존
   .ico 포맷은 구식이지만, 일부 기업용 브라우저나 엔터프라이즈 환경에서는 여전히 사용된다. 완전히 버릴 수 없다.

이 작업의 팀 영향

파비콘은 겉으로는 작은 UI 요소처럼 보이지만, 실제로는:

• 첫 인상: 사용자가 사이트를 즐겨찾기하거나 탭을 정렬할 때 우리 브랜드가 명확히 드러난다
• 신뢰도: 고유 아이콘이 없으면 "완성도 낮은 사이트"로 느껴질 수 있다
• 크로스 플랫폼 경험: 모바일 웹, PWA, 데스크톱 브라우저 모두에서 일관된 경험을 제공한다

우선순위 관점에서는 기능 개발에 비해 낮아 보일 수 있지만, 사용자가 우리 사이트를 "앱처럼" 활용하기 시작하는 시점에서 정말 중요해진다.

회고

처음에는 "아, 그냥 파일 업로드하는 거 아니야?" 했는데, 실제로는 기기별·브라우저별 호환성을 이해하고 각 포맷의 역할을 정확히 구성하는 작업이었다. 비슷한 작업을 할 때는 다음을 확인하자:

• HTML의 <link> 태그에서 모든 파비콘을 명시적으로 선언했는가
• SVG 지원 여부와 PNG 폴백이 제대로 작동하는가
• 모바일에서 실제로 홈 화면에 추가해봤는가

작은 작업이지만, 완성도 높은 웹 서비스라면 이런 디테일이 쌓여서 브랜드 경험을 만든다.

🛒 이 글과 어울리는 추천 상품

• 4K모니터 쿠팡에서 보기 →
• 인체공학마우스 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.