[Javascript] 언어 설정에 따라 Favicon 바꾸기

안녕하세요. 

오늘은 사용자의 언어 환경에 따라 favicon도 다르게 바꿀 수 있는 방법을 소개하고자 합니다. 

 

그 방법은 브라우저의 언어 설정을 감지하여, 다른 파비콘 이미지를 동적으로 적용하는 것입니다. 

 

먼저, 브라우저에서 언어 설정을 감지하는 방법은 다음과 같습니다. 

navigator.language

 

이를 기반으로 다음처럼 favicon 이미지를 교체합니다.

const favicon = document.querySelector("link[rel='icon']");
if (navigator.language.startsWith("ja")) {
  favicon.href = "favicon-jp.png";
} else if (navigator.language.startsWith("ko")) {
  favicon.href = "favicon-kr.png";
} else {
  favicon.href = "favicon-en.png";
}

 

예제 코드입니다. (index.html)

 

 

예제 이미지 파일입니다. 

 

favicon-en.png

0.00MB

favicon-jp.png

0.00MB

favicon-kr.png

0.00MB

 

 

예제 코드 작성된 브라우저 실행 후, chrome 에서 언어 설정 변경하는 방법입니다. 

 

 Chrome에서 언어 설정 변경하기

1. 주소창에 입력: chrome://settings/languages
2. 원하는 언어(예: 영어)를 추가하고 맨 위로 올리기
3. 브라우저를 재시작다시 예제코드(index.html) 접속 → favicon이 바뀌는지 확인

실행 결과, 설정 언어별로 아래와 같이 Favicondl 다르게 출력되는 것을 확인할 수 있습니다. 

 

 

• 한국어 설정 시 실행 결과

 

• 영어 설정 시 실행 결과

 

• 일본어 설정 시 실행 결과