동적 파비콘
대부분의 최신 브라우저는 이 시스템 테마를 존중하므로 사용 중인 항목에 따라 다른 색상을 사용합니다.
전통적인 웹사이트에서는 일반적으로 하나의 파비콘이 있습니다. 그러나 이것이 항상 좋은 것은 아닙니다. 예를 들어 GitHub:
This has since been resolved!
이 문제를 어떻게 해결할 수 있는지 봅시다...
귀하의 사이트에 대해 두 개의 다른 파비콘을 디자인하십시오.
하나는 라이트 모드용이고 다른 하나는 다크 모드용입니다.
그러나 문제는 어떻게 설정하느냐입니다🤔
기본 HTML 사이트부터 시작하겠습니다.
<head>
<title>Example</title>
</head>
<body>
<h1>This is an example.</h1>
</body>
파비콘을 추가하려면 일반적으로 다음 행을 추가하면 됩니다.
<head>
+ <link rel="icon" type="image/svg" href="/favicon.svg" />
<title>Example</title>
</head>
동적 파비콘의 경우
favicon-switcher 을 사용합니다.사이트에 다음 코드 줄만 추가하면 됩니다.
<head>
+ <link rel="icon" type="image/svg" media="(prefers-color-scheme:light)" href="/favicon_light.svg" />
+ <link rel="icon" type="image/svg" media="(prefers-color-scheme:dark)" href="/favicon_dark.svg" />
+ <script src="https://unpkg.com/favicon-switcher@latest/dist/index.js" crossorigin="anonymous" type="application/javascript"></script>
<title>Example</title>
</head>
모두 끝났습니다! 이제 사이트는 시스템 테마에 따라 파비콘 간에 자동으로 전환됩니다.
Reference
이 문제에 관하여(동적 파비콘), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/johnletey/dynamic-favicons-31n0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
