2025년 파비콘(Favicon) 완벽 가이드: 포맷, 사이즈, 그리고 다크모드

브라우저 탭에 보이는 작은 16x16 픽셀의 정사각형, 파비콘(Favicon).
작지만 웹사이트의 첫인상을 결정하는 아주 중요한 요소입니다.

사용자가 수십 개의 탭을 열어두었을 때 우리 사이트를 식별하게 해주고, 사이트의 전문성을 높여주며, 클릭률(CTR)을 높여 간접적으로 SEO에도 도움을 줍니다.

하지만 2025년 현재, 파비콘 설정은 생각보다 복잡해졌습니다.
"아직도 .ico를 써야 하나요?", "사이즈는 32px면 충분한가요?", "다크모드에서는 아이콘이 안 보이는데 어떡하죠?"

이 글에서는 최신 웹 표준에 맞는 가장 완벽하고 깔끔한 파비콘 설정 방법을 정리해 드립니다.

1. 포맷 전쟁: ICO vs PNG vs SVG

클래식의 정석: .ico

오랫동안 favicon.ico는 웹의 표준이었습니다. 하나의 파일 안에 16x16, 32x32 등 여러 사이즈를 담을 수 있는 독특한 컨테이너 포맷이죠.

• 장점: 인터넷 익스플로러(IE)를 포함한 모든 구형 브라우저 지원.
• 단점: PNG보다 만들기 번거롭고 파일 관리가 귀찮음.

현대의 표준: .png

이제는 PNG가 대세입니다. 투명도(Alpha Channel)를 완벽하게 지원하고 만들기도 쉽습니다.

• 장점: 고화질, 제작 용이.
• 단점: 사이즈별로 파일을 따로 만들어야 함.

미래의 핵심: .svg

SVG 파비콘은 '게임 체인저'입니다. 벡터 방식이라 깨지지 않고 무한히 확대되며, 무엇보다 CSS 미디어 쿼리를 지원합니다. 즉, 다크모드 대응이 가능합니다!

• 장점: 무한 스케일링, 다크모드 지원.
• 단점: 아주 오래된 브라우저에서는 지원 안 함 (PNG 폴백 필요).

2. 필수 사이즈 체크리스트 (이것만 챙기세요!)

옛날처럼 20개씩 만들 필요 없습니다. 2025년 기준, 딱 필요한 사이즈만 정리했습니다.

• 16x16: 데스크탑 브라우저 탭용.
• 32x32: 고해상도(Retina) 디스플레이 및 작업 표시줄용.
• 180x180: 애플 터치 아이콘 (아이폰/아이패드 홈 화면 추가 시).
• 192x192: 안드로이드 크롬 홈 화면 추가용.
• 512x512: PWA (Progressive Web Apps) 스플래시 스크린용.

3. 완벽한 HTML 설정 코드

2015년에 복사해 둔 코드는 이제 버리세요. 가장 깔끔하고 모던한 HTML 설정법입니다.

<!-- 1. 모던 브라우저용 SVG (다크모드 지원!) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<!-- 2. 사파리 및 기타 브라우저용 PNG 폴백 -->
<link rel="icon" href="/favicon-32x32.png" type="image/png">

<!-- 3. 애플 터치 아이콘 (아이폰 홈 화면) -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- 4. 웹 앱 매니페스트 (안드로이드 & PWA) -->
<link rel="manifest" href="/site.webmanifest">

꿀팁: HTML에 선언하지 않더라도, 루트 디렉토리(/favicon.ico)에 .ico 파일을 하나 넣어두세요. 아주 오래된 봇이나 도구들은 여전히 그 위치를 찾습니다.

4. SVG로 다크모드 완벽 대응하기

이게 진짜 핵심입니다. 사용자가 다크모드를 쓸 때, 검은색 로고가 배경에 묻혀서 안 보이는 경험 있으시죠?
SVG 파비콘을 쓰면 CSS로 색상을 바꿀 수 있습니다.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    path { fill: #000; } /* 기본 (라이트 모드) */
    @media (prefers-color-scheme: dark) {
      path { fill: #fff; } /* 다크 모드에서는 흰색으로 변경! */
    }
  </style>
  <path d="..." />
</svg>

이제 브라우저 테마에 따라 살아 숨 쉬는 파비콘을 만들 수 있습니다.

5. 트러블슈팅: 왜 파비콘이 안 보일까요?

• 브라우저 캐시: 브라우저는 파비콘을 아주 강력하게 캐싱합니다. 변경사항이 안 보이면 시크릿 모드를 켜거나, 파일명 뒤에 쿼리 스트링(?v=2)을 붙여보세요.
• 경로 문제: 경로는 항상 루트(/) 기준 절대 경로로 적는 것이 안전합니다.
• 구글 검색 결과: 구글 검색 결과 옆에 파비콘이 뜨려면 시간이 좀 걸립니다(몇 주). 그리고 구글은 48px의 배수(48, 96, 144...) 사이즈를 선호하니 참고하세요.

마치며

깨지거나 기본 아이콘으로 뜨는 파비콘은 "아직 덜 만든 사이트"라는 인상을 줍니다.
단 10분만 투자해서 파비콘을 제대로 설정해보세요. 사용자에게 주는 신뢰감이 달라집니다.

로고 파일 하나로 이 모든 걸 한 번에 만들고 싶으신가요?
Pockit의 **파비콘 생성기 (Favicon Generator)**를 사용해보세요. ICO, PNG, 매니페스트 파일까지 한 번에 생성하고, 브라우저와 구글 검색 결과에서 어떻게 보일지 미리 확인할 수 있습니다.