개발 slecs

모든 플랫폼에 일관된 파비콘 적용

목차

사이트의 파비콘을 여러 형식과 크기로 정비했다. 단순한 이미지 교체처럼 보이지만, 사용자가 만나는 첫 인상을 어떤 기기에서든 일관되게 제공한다는 점에서 생각보다 중요한 작업이었다.

왜 이 작업이 필요했나

파비콘은 "없어도 사이트는 돈다"는 구석이 있어서 우선순위에서 밀리기 쉽다. 하지만 사용자 경험 관점에선 다르다. 브라우저 탭에 가득 떠 있는 창 중에 우리 사이트를 한눈에 찾아야 할 때, 또는 모바일에서 홈 화면에 바로가기를 저장했을 때, 일관된 아이콘이 없으면 다른 앱들 사이에서 눈에 띄지 않는다. 특히 여러 사이트를 오가는 사용자 입장에서 시각적 아이덴티티는 신뢰도와 직결된다.

이전엔 기본 파비콘만 있거나 일부 형식만 지원하던 상태였을 수 있다. 이번에 favicon.ico, favicon.svg, favicon-32x32.png, apple-touch-icon.png, icon.png 다섯 가지 형식을 동시에 적용하면서, "어떤 기기에서 방문하든 같은 얼굴을 본다"는 경험을 만드는 게 목표였다.

형식과 크기: 왜 이렇게 많은가

처음엔 .ico 파일 하나로 충분하다고 생각하기 쉽다. 하지만 시간이 지나면서 브라우저와 플랫폼이 다양해졌고, 각각의 요구사항이 달라졌다.

파일 주 용도 지원 플랫폼 특징
favicon.ico 레거시 호환성 모든 브라우저 구식 IE, 오래된 파이어폭스도 인식
favicon.svg 최신 브라우저 Chrome 108+, Edge 108+ 벡터 형식, 다크모드 지원 가능
favicon-32x32.png 데스크톱 탭, 북마크 대부분의 브라우저 명확한 크기, 선명도 보장
apple-touch-icon.png iOS 홈 화면 바로가기 Safari, iOS 180×180 권장, 둥근 모서리 자동 적용
icon.png PWA, 메니페스트 모던 브라우저 웹 앱 설치 시 사용

각 형식을 모두 제공하면:

  • 레거시 호환성: 아직도 구형 브라우저를 쓰는 사용자가 있다. .ico 하나는 깔끔하게 대응해준다.
  • 최신 기술 활용: SVG는 벡터이므로 어떤 크기에서도 선명하고, CSS에서 다크모드 색상 반전을 설정할 수 있다.
  • 플랫폼별 최적화: iOS와 안드로이드, 데스크톱 각각이 원하는 사양이 다르다. 각각을 맞춰주면 더 깔끔하다.

HTML 선언 방식

보통 이런 식으로 <head>에 선언한다:

<!-- 레거시 지원 -->
<link rel="icon" href="/favicon.ico" sizes="any">

<!-- 최신 브라우저 (다크모드 대응 가능) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<!-- PNG fallback -->
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">

<!-- iOS 홈 화면 -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- PWA -->
<link rel="icon" href="/icon.png" type="image/png">

브라우저와 플랫폼이 자신에게 맞는 형식을 고른다. 먼저 SVG를 확인하고 없으면 PNG, 그것도 없으면 .ico로 fallback 한다.

회고: 작은 작업, 큰 영향

파비콘은 정말 작은 작업 같다. 이미지 다섯 개를 public/ 디렉토리에 놓고 선언문을 헤더에 추가하는 것뿐이다. 하지만 팀 입장에서 보면:

  • 기술 부채 해소: 부분적 지원만 하던 상태를 완전히 표준화했다. 앞으로 "이 형식은 어떻게 하지?" 같은 질문이 줄어든다.
  • 사용자 경험의 누적: 파비콘 하나가 사용자를 크게 만족시키지 않지만, 이런 세부 사항들이 쌓이면 "이 사이트는 세심하다"는 인상을 준다.
  • 온보딩 표준화: 나중에 파비콘을 바꿔야 할 때, 이 다섯 개 파일의 용도를 알고 있으면 실수 없이 업데이트할 수 있다.

404 페이지 디자인, 로딩 상태 UI, 에러 메시지 톤 같은 작업들도 비슷한 맥락이다. 각각은 작지만, 사이트의 전체적인 "마무리"를 결정한다. 시간 여유가 생길 때마다 이런 기초 작업들을 꾸준히 챙기는 게 결국 사용자 만족도를 높이는 방법이었던 것 같다.

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

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

이어보기

댓글 0

첫 댓글 달아줘.