[HTML] 다크 모드 / 라이트 모드에 따른 파비콘 변경 설정 방법

728x90

[HTML] 다크 모드/라이트 모드에 따른 파비콘 변경 설정 방법

최근 웹 브라우저를 사용하다 보면 다크 모드와 라이트 모드에 따라서 파비콘이 변경되는 경험을 한 적이 있을 것이다.

이번에는 해당 기능을 간단 방법으로 설정하는 방법에 대해서 알아보도록 하자.

728x90

1. 파비콘 이미지 준비

먼저, 다크 모드와 라이트 모드에 사용될 파비콘 이미지를 준비하도록 하자.

각각의 모드에 어울리는 색상등을 고려하여 준비하자.

예제로 사용하기 위해서 아래와 같은 파비콘 이미지를 첨부하도록 하겠다.

2. HTML 파일 수정

HTML 파일의 '<head>' 세션에 있는 파비콘 링크 부분을 수정하도록 하자.

기본적으로는 사용하는 한 개의 파비콘 링크를 사용한다.

하지만 다크 모드와 라이트 모드 두 곳에서 사용을 하려면 두 개의 파비콘 링크를 설정하고 media 속성을 이용하면 된다.

두 개의 파비콘 링크의 media 속성에 perfers-color-scheme 미디어 쿼리를 설정하여 다른 파비콘을 설정할 수 있다.

자세한 부분은 아래 예제 Code를 살펴보도록 하자.

# 모드에 따른 파비콘 설정

<link rel="icon" type="image/png" href="home-dark.png" media="(prefers-color-scheme: dark)"/>
<link rel="icon" type="image/png" href="home-light.png" media="(prefers-color-scheme: light)"/>

위에 예제 Code처럼 설정을 하면 운영 체제에서 다크 모드/라이트 모드가 변경되면서 파비콘도 변경되는 것을 볼 수 있다.

3. 정리

해당 기능은 최신의 브라우저라면 문제없이 작동한다.

또한, CSS를 이용해서 좀 더 부드럽고 전환 효과등을 더 할 수 있다.

파비콘의 디자인, 색상등에 따라서 모드와 상관없이 어울리는 경우에는 모드에 따라서 작성할 필요는 없다.

하지만 웹 사이트의 파비콘을 다크 모드/라이트 모드에 따라 변경을 한다면 사용자에게 더 나은 경험을 제공하는 중요한 요소가 될 것이다.

그리거 설정하는 방법도 위에 내용처럼 간단하게 설정이 가능하니 가능하다면 적용을 하도록 하자.

728x90

저작자표시 비영리 변경금지

[HTML] 다크 모드 / 라이트 모드에 따른 파비콘 변경 설정 방법