JavaScript로 파비콘 설정하기

JavaScript 입문자를 위한 아주 단순한 방법


Spemer의 파비콘

웹사이트를 배포할 때는 보통 파비콘(favicon) 을 설정하게 됩니다. 요즘 사이트는 파비콘 하나만 쓰지 않죠 — 호환성을 위한 favicon.ico, 선명한 SVG 파비콘, iOS 홈 화면용 Apple touch icon, PWA용 Android 숏컷 아이콘까지 여러 개를 함께 제공합니다. 그래서 HTML 파일이 많을수록 작은 변경 하나가 곧 번거로운 작업이 됩니다. 이 글에서는 JavaScript로 <head>에 파비콘 <link> 태그를 주입해, 모든 HTML을 직접 수정하지 않고 한 번에 전체 페이지에 적용하는 방법을 소개합니다.

HTML로 파비콘 설정하는 기본 방식

이 일반 HTML 코드를 런타임에 <link rel="icon"> 태그를 <head>에 주입하는 JavaScript로 옮깁니다. 모바일 숏컷 아이콘이나 Apple touch icon이 아닌, 브라우저용 파비콘 하나만 필요하다면 매우 간단합니다. 참고로 rel="shortcut icon"은 구형 브라우저 호환용 레거시 키워드이며, 최신 브라우저는 rel="icon"만 있으면 됩니다(둘 다 둬도 무방합니다).

JavaScript에서

이제 파일별로 HTML을 작성하지 않고 파비콘을 설정한 셈입니다. 이 패턴을 JavaScript 배열과 결합하면 다른 파비콘이나 숏컷 아이콘에도 확장할 수 있습니다.

파비콘용 배열 추가

이 배열을 for 루프(또는 최신 JavaScript의 forEach·for...of)로 순회하며 위 코드에 적용합니다.

끝입니다. 같은 방식으로 안드로이드 숏컷 아이콘과 iPhone·iPad용 Apple touch icon도 설정할 수 있습니다.

다른 배열과 함수 추가

위 스니펫이 iOS용 touch icon을 설정합니다.

제 .js 코드 제 사이트에 파비콘을 적용한 방식

다음 단계

같은 방식으로 안드로이드 숏컷 아이콘도 HTML이 아니라 JavaScript에서 설정할 수 있습니다.

이제 파비콘을 작은 변경을 위해 모든 HTML 파일을 일일이 수정할 필요가 없습니다 — JavaScript 한두 줄 수정만으로 사이트 전체에 적용됩니다.

더 나아가, 함수에 동적 파라미터를 사용하면 파비콘을 동적으로 — 예를 들어 알림 배지, 빌드 상태 표시, "live" 도트 등으로 — 바꿀 수도 있습니다.

요즘 파비콘 관련 몇 가지 팁

고전적인 .ico 외에 2025년 이후에도 챙겨야 할 체크리스트입니다.

  • /favicon.ico는 항상 사이트 루트에 두세요. <link> 태그가 누락되거나 로드에 실패해도 브라우저는 이 경로를 자동으로 요청합니다.
  • SVG 파비콘을 함께 제공하세요. 한 파일로 모든 크기를 선명하게 처리할 수 있습니다: <link rel="icon" type="image/svg+xml" href="/favicon.svg">. 모든 최신 브라우저에서 지원됩니다.
  • 다크 모드 파비콘. SVG 내부에서 @media (prefers-color-scheme: dark)를 이용해 색상을 자동으로 전환할 수 있습니다.
  • iOS 홈 화면. apple-touch-icon.png 하나(180×180)면 iPhone과 iPad를 모두 커버할 수 있습니다.
  • Android / PWA. Android나 설치 프롬프트는 개별 <link>가 아닌 manifest.json의 icons[](192×192, 512×512)에서 아이콘을 읽어갑니다.
  • 캐시 버스팅. 파비콘을 교체했다면 버전 쿼리(/favicon.svg?v=2)를 붙여 브라우저와 Google 검색 결과에서 새 이미지가 빠르게 갱신되도록 하세요.

제 JavaScript 코드는 GitHub에서, 또는 라이브 사이트에서 확인할 수 있습니다. 읽어주셔서 감사합니다!

제목 : JavaScript로 파비콘 설정하기
일자 : 2018년 1월 3일
작성자 : Hyouk Seo (Spemer)