JavaScript로 파비콘 설정하기
JavaScript 입문자를 위한 아주 단순한 방법
웹사이트를 배포할 때는 보통 파비콘을 설정하게 됩니다. HTML 파일이 많으면 작은 변경 하나가 곧 번거로운 작업이 되곤 합니다. 이 글에서는 안드로이드와 iOS 숏컷 아이콘까지 포함해, 파비콘을 모든 HTML을 직접 수정하지 않고 단 몇 줄의 JavaScript로 설정하는 방법을 소개합니다.
HTML로 파비콘 설정하는 기본 방식
이 일반 HTML 코드를 <head> 안의 JavaScript로 옮겨 동작시킵니다. 모바일 숏컷 아이콘이나 Apple touch icon이 아닌, 브라우저용 파비콘 하나만 필요하다면 매우 간단합니다.
JavaScript에서
이제 파일별로 HTML을 작성하지 않고 파비콘을 설정한 셈입니다. 이 패턴을 JavaScript 배열과 결합하면 다른 파비콘이나 숏컷 아이콘에도 확장할 수 있습니다.
파비콘용 배열 추가
이 배열을 for 루프로 순회하며 위 코드에 적용합니다.
끝입니다. 같은 방식으로 안드로이드 숏컷 아이콘과 iPhone·iPad용 Apple touch icon도 설정할 수 있습니다.
다른 배열과 함수 추가
위 스니펫이 iOS용 touch icon을 설정합니다.
다음 단계
같은 방식으로 안드로이드 숏컷 아이콘도 HTML이 아니라 JavaScript에서 설정할 수 있습니다.
이제 파비콘을 작은 변경을 위해 모든 HTML 파일을 일일이 수정할 필요가 없습니다 — JavaScript 한두 줄 수정만으로 사이트 전체에 적용됩니다.
더 나아가, 함수에 동적 파라미터를 사용하면 파비콘을 동적으로 — 예를 들어 알림 배지 형태로 — 바꿀 수도 있습니다.
제 JavaScript 코드는 GitHub에서, 또는 라이브 사이트에서 확인할 수 있습니다. 읽어주셔서 감사합니다!
제목 : JavaScript로 파비콘 설정하기
일자 : 2018년 1월 3일
작성자 : Hyouk Seo (Spemer)