Safari에서 파비콘이 제대로 표시되도록 하기 위해, 다음 단계를 고려해보자
- 파일 경로 확인: 파비콘 파일 경로가 정확하고 지정된 경로에서 파일에 접근할 수 있는지 확인
- 올바른 format과 sizes 확인: 여러 크기와 타입을 포함시켰지만, 파일 자체가 올바른 포맷인지, 손상되지 않았는지 확인
- manifest.json 추가: Safari를 포함한 다양한 브라우저와의 호환성을 높이기 위해 manifest.json 파일을 추가하는 것이 좋음
- Safari를 위한 mask-icon 링크 추가:
- Safari는 파비콘을 위해 mask-icon이라는 특정 링크 관계를 사용함.
- mask-icon을 포함하면 호환성이 향상됨
<link rel="shortcut icon" href="/src/assets/images/favicon/favicon.ico" />
<link rel="icon" href="/src/assets/images/favicon/favicon-16x16.png" sizes="16x16" />
<link rel="icon" href="/src/assets/images/favicon/favicon-32x32.png" sizes="32x32" />
<link rel="apple-touch-icon" href="/src/assets/images/favicon/apple-touch-icon.png" sizes="114x114" />
<link rel="mask-icon" href="/src/assets/images/favicon/safari-pinned-tab.svg" color="#5bbad5" />
<link rel="manifest" href="/src/assets/manifest.json" />
manifest.json 파일 추가
/src/assets/ 디렉토리에 다음 내용의 manifest.json 파일을 만든다
{
"short_name": "YourAppName",
"name": "Your Application Name",
"icons": [
{
"src": "/src/assets/images/favicon/favicon-192x192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/src/assets/images/favicon/favicon-512x512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
mask-icon SVG 생성
간단한 SVG 파일을 만들어 같은 디렉토리에 safari-pinned-tab.svg로 저장한다. 예시코드는 아래와 같다.
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path fill="#5bbad5" d="M8 0l2.4 4.8 5.3.8-3.8 3.7.9 5.3L8 12.8 4.2 15l.9-5.3-3.8-3.7 5.3-.8L8 0z"/>
</svg>
</body>
브라우저 캐시 지우기
브라우저가 파비콘을 캐시하는 경우가 있다. 캐시를 지우고 브라우저를 다시 시작하여 변경 사항을 확인하자.
mask-icon과 manifest.json을 추가하면 Safari와 다른 브라우저에서의 호환성이 향상될 것이다.
링크: https://www.idownloadblog.com/2020/09/08/refresh-favicons-in-safari-mac/
How to refresh website favicons in Safari on Mac
If you have website icons that are missing or showing incorrectly, this tutorial explains how to refresh favicons in Safari on your Mac.
www.idownloadblog.com
'2024 Dev Camp🔥 > Issues' 카테고리의 다른 글
| [Issues] Vite 번들링 이슈 - 단일 index.html 엔트리 포인트 (0) | 2024.07.04 |
|---|---|
| [Issues] table 높이 고정하기 (2) | 2024.07.01 |
