SVG 페비콘 사용하기
이제는 SVG기반 Favicon을 사용할 시기가 온거 같은데 현재 모든 최신 브라우저에서 지원되고 있습니다.
또한 프로젝트를 복붙하는 경우에도 아이콘 링크와 크기 정보가 필요하지는 않습니다. 그럼 어떻게 하는지 최소한의 구성이 어떻게 되는지 하나씩 알아보겠습니다.
Icon
메인 favicon은 크기 상관없이 SVG로 구현합니다. type=”image/svg+xml” 는 따로 작성하지 않아도 됩니다.
<link rel="icon" href="favicon.svg">
Mask icon
사파리 브라우저의 경우 조금 다른데 사파리의 경우 마스크 아이콘을 추가해야합니다. SVG지만 단색으로 만들어 투명 배경 위에 작업하고 마크업에서 색상 속성을 추가합니다.
<link rel=”mask-icon” href=”mask-icon.svg” color=”#000000">
Touch icon
iOS 전용 디바이스 경우 180 x 180 크기가 필요하며 크기 지정은 안해도 됩니다.
<link rel="apple-touch-icon" href="apple-touch-icon.png">
Manifest
manifest.json 은 웹 앱 또는 웹 사이트에 대한 정보를 제공하는데 합니다. 아래 예시 코드는 Lighthous 테스트를 통과해야합니다. 그리고 링크된 아이콘은 Android 및 크롬에서 사용되며 사이즈는 512 x 512로 제작 후 하나의 사이즈로 사용하면 됩니다.
{
"name": "Starter",
"short_name": "Starter",
"icons": [{
"src": "google-touch-icon.png",
"sizes": "512x512"
}],
"background_color": "#ffffff",
"theme_color": "#ffffff",
"display": "fullscreen"
}
크롬 브라우저 색상은 아직도 theme-color 와 meta 가 필요합니다.
<meta name="theme-color" content="#ffffff">
Done
이것이 바로 최신 웹브라우저에 필요한 모든 내용입니다. Windows 타일에서 다른 아이콘을 원하면 msapplication-TileImage 를 추가 할 수 있습니다. 아니면 apple-touch-icon 이 사용됩니다. TileColor 는 더 이상 사용하지 않아도 됩니다.
Everything else
아쉽게도 모든 사용자가 최신 브라우저를 사용하는 것은 아닙니다. 그래서 웹사이트 루트에 32 x 32 favicon.ico를 지정하면 쉽게 해결할 수 있습니다. 이것은 할머니의 다른 곳에서도 가능합니다. 이렇게 하면 거의 모든 컴퓨터 브라우저에서 작동합니다. 시골 할머니집에 있는 컴퓨터에서도 말이죠..
Dark mode
SVG기반 favicon의 장점 중 하나는 CSS로 색상을 변경할 수 있다는 것입니다. prefer-color-scheme media 쿼리를 사용하면 다크/라이트 모드에 따라 색상을 변하게 할 수 있습니다. 색상이 속성에 있기 때문에이 방법은mask-icon 을 적용하면 (사파리 브라우저)작동안하는 이슈는 있지만 사파리 경우 흰색 배경을 추가하면 해결 됩니다.
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<style>
path {
fill: #000;
}
@media (prefers-color-scheme: dark) {
path {
fill: #fff;
}
}
</style>
<path fill-rule="evenodd" d="M0 0h16v16H0z" />
</svg>
Result
최종 결과는 아래와 같습니다. 이것을 웹 사이트의 <head>에 복사하고 웹사이트 루트에 favicon.ico를 배치하는 것을 잊지 마십시오. ✌️
<meta name="theme-color" content="#ffffff">
<link rel="icon" href="favicon.svg">
<link rel="mask-icon" href="mask-icon.svg" color="#000000">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="manifest" href="manifest.json">
https://medium.com/swlh/are-you-using-svg-favicons-yet-a-guide-for-modern-browsers-836a6aace3df
SVG favicon 레퍼런스
https://caniuse.com/#feat=link-icon-svg
간만에 글 하나 작성했습니다. 개인 사정으로 포스팅을 못했는데 이미 다른 많은 분들께서 좋은 글 올려주고 계셔서 다행입니다. 코로나 조심하세요.
그리고 앞으로 모든 비주얼에셋은 최대한 많이 SVG로 갈거 같습니다. 여러 이유가 있겠지만 다양한 해상도에 대응하기 좋고 코드로 컬러를 변환할 수 있어서 좋은거 같습니다. 그런데 svg가 벡터라 해도 크기나 좌표는 정수에 맞게 하는게 좋고 svg는 xml 기반의 구조입니다. 그래서 svg를 작성할 때는 코드 최적화가 필수입니다. 관련 내용은 길어질거 같으니 조각글로 내용공유하겠습니다.
