JavaScript로 파비콘 설정하기

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

웹사이트를 배포하다 보면 보통 파비콘(favicon) 을 설정하게 됩니다. 요즘 사이트는 파비콘 하나만 쓰지는 않죠. 호환성을 위한 favicon.ico, 선명한 SVG 파비콘, iOS 홈 화면용 Apple touch icon, PWA용 Android 숏컷 아이콘까지 여러 개가 함께 들어갑니다. HTML 파일이 많아질수록 작은 변경 하나가 곧 번거로운 일이 되고요. 그래서 HTML마다 손대지 않고 JavaScript로 <head>에 파비콘 <link> 태그를 주입해 전체 페이지에 한 번에 반영하는 방법을 정리해 두었습니다.

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

<link rel="shortcut icon" href="../images/favicon.png" />

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

JavaScript에서

function setFavicons(favImg){
    let headTitle = document.querySelector('head');
    let setFavicon = document.createElement('link');
    setFavicon.setAttribute('rel','shortcut icon');
    setFavicon.setAttribute('href',favImg);
    headTitle.appendChild(setFavicon);
}
setFavicons('https://spemer.com/img/favicon/favicon.png');

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

파비콘용 배열 추가

let favIcons = [
    { rel: 'apple-touch-icon' },
    { rel: 'apple-touch-startup-image' },
    { rel: 'shortcut icon' }
]

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

function setFavicons(favImg){
    let headTitle = document.querySelector('head');
    
    let favIcons = [
        { rel: 'apple-touch-icon' },
        { rel: 'apple-touch-startup-image' },
        { rel: 'shortcut icon' }
    ]
    
    favIcons.forEach(function(favIcon){
        let setFavicon = document.createElement('link');
        setFavicon.setAttribute('rel', favIcon.rel);
        setFavicon.setAttribute('href', favImg);
        headTitle.appendChild(setFavicon);
    });
}
setFavicons('https://spemer.com/img/favicon/favicon.png');

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

다른 배열과 함수 추가

function setAppleFavicons(){
    let headTitle = document.querySelector('head');
    
    let appleFavIcons = [
        { sizes:'152x152', href: '../touch-icon-ipad.png' },
        { sizes:'180x180', href: '../touch-icon-iphone-retina.png' },
        { sizes:'167x167', href: '../touch-icon-ipad-retina.png' }
    ]
    
    appleFavIcons.forEach(function(appleFavIcon){
        let setAFavicon= document.createElement('link');
        setAFavicon.setAttribute('rel','apple-touch-icon');
        setAFavicon.setAttribute('sizes',appleFavIcon.sizes);
        setAFavicon.setAttribute('href',appleFavIcon.href);
        headTitle.appendChild(setAFavicon);
    });
}
setAppleFavicons();

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

제 사이트에 파비콘을 적용한 방식

다음 단계

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

<link rel="icon" href="../favicon-16.png" sizes="16x16" type="../favicon-16.png" />
<link rel="icon" href="../favicon-32.png" sizes="32x32" type="../favicon-32.png" />
<link rel="icon" href="../favicon-48.png" sizes="48x48" type="../favicon-48.png" />
<link rel="icon" href="../favicon-62.png" sizes="62x62" type="../favicon-62.png" />
<link rel="icon" href="../favicon-192.png" sizes="192x192" type="../favicon-192.png" />

이제 파비콘을 작은 변경을 위해 모든 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로 파비콘 설정하기
일자 : 2018년 1월 3일
작성자 : Hyouk Seo (Spemer)