HTML에 파비콘을 추가하는 방법
3개의 태그가 케이스의 99%를 커버합니다. 두 개가 더 있으면 전체 PWA 등급 설정이 제공됩니다.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
최소 태그
<link rel="icon" href="/favicon.ico"> — 그게 다입니다. 모든 브라우저가 이를 가져옵니다.
모던 추천 세트
모든 플랫폼에서 선명한 렌더링을 위해 SVG 및 apple-touch-icon를 추가하세요.
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" size="180x180" href="/apple-touch-icon.png">
PWA 설치 프롬프트
192×192 및 512×512 PNG 항목이 있는 매니페스트.json을 추가한 다음 <link rel="manifest" href="/site.webmanifest">를 연결하세요.
자주 묻는 질문
What is the minimum HTML tag for a favicon?
Add <link rel="icon" href="/favicon.ico"> inside <head>. Place favicon.ico at your site root and every browser will find it.
Do I need separate tags for PNG and SVG favicons?
Yes for a modern setup. Link favicon.ico as the fallback, then add <link rel="icon" type="image/png"> and optionally type="image/svg+xml" for sharper rendering.
Where should favicon <link> tags go in HTML?
Inside the <head> element, before </head>. Order among icon links does not matter.
Do I need a web manifest for favicons?
Not for basic tabs, but add <link rel="manifest"> plus 192×192 and 512×512 PNG icons if you want PWA install prompts.