반응형
img
최근 몇 년 동안 다크 모드의 등장은 많은 웹사이트 파비콘들을 어색하게 하거나 심지어 어떤 경우에는 보는 것이 불가능하게 만들었다. 적절한 자산이 있다면 사용자의 색상표 선호도에 맞춰 반응성이 뛰어난 파비콘을 비교적 쉽게 만들 수 있습니다.
반응성이 뛰어난 패비콘을 만들려면 가능한 한 적은 색상의 SVG 아이콘과 밝은 모드용과 어두운 모드용 두 가지 색상 팔레트가 필요합니다. 아이콘 선명도 및 복잡성에 대한 일반적인 규칙이 적용되므로, 아이콘이 시나리오에서 시각적으로 구별할 수 있는 모든 필수 기준을 충족하는지 확인하십시오. 이 예에서는 환상적인 Feather 아이콘 세트의 단색 아이콘을 사용할 것입니다.
SVG 이미지에 포함된 스타일과 선호 색상-구성표 미디어 쿼리를 활용하여 아이콘의 모든 요소를 그룹화할 수 있는 적절한 요소를 만들 수 있습니다. 그러면 그룹 ID를 이용해서 디자인별로 색상 팔레트를 적용할 수 있습니다. 최종 SVG 자산은 다음과 같습니다.
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<style>
#icon {
stroke: #000;
stroke-width: 2px;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
@media (prefers-color-scheme: dark) {
#icon {
stroke: #fff;
}
}
</style>
<g id="icon">
<path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
<line x1="3" y1="6" x2="21" y2="6"></line>
<path d="M16 10a4 4 0 0 1-8 0"></path>
</g>
</svg>
SVG 자산을 만든 후 페이지의 <헤드> 요소에 사용자 지정 SVG favicon만 포함시키면 바로 시작할 수 있습니다. 가능하면 두 팔레트에 아이콘의 렌더링 버전이 있는 PNG 폴백을 포함해야 합니다.
<head>
<!-- Provided you have a rendered PNG fallback named favicon.png -->
<link rel="icon" type="image/png" href="favicon.png" >
<!-- Provided the SVG icon is named favicon.svg -->
<link rel="icon" type="image/svg" href="favicon.svg" >
</head>
짧은 고품질 코드 조각과 기사를 좋아하십니까? 우리도 그래! 이와 같은 기사를 더 보려면 30초 동안 코드를 방문하거나 매일 자바스크립트, 리액트, 파이썬 스니펫을 보려면 트위터에서 저희를 팔로우하십시오!
'css' 카테고리의 다른 글
| 이 놀라운 호버 효과로 어떻게 로고를 디자인할 수 있을까요? (0) | 2022.03.09 |
|---|---|
| 게임 대시보드 UI (0) | 2022.03.09 |
| HTML CSS를 사용한 이중 컬러 스크롤 텍스트 효과 (0) | 2022.03.09 |
| HTML을 실시간으로 테스트하는 방법? (0) | 2022.03.09 |
| CSS 플렉스 및 그리드(유선 부품) (0) | 2022.03.09 |
댓글