파비콘 형식의 작동 방식
각 형식의 작동 방식을 알면 불가피한 "내 파비콘이 표시되지 않습니다" 문제를 디버깅하는 데 도움이 됩니다.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
.ico 컨테이너
.ico 파일은 헤더 뒤에 하나 이상의 이미지 항목이 옵니다. 각 항목은 BMP 또는 PNG일 수 있으며 각각 너비, 높이 및 비트 심도를 갖습니다.
브라우저는 디렉터리를 구문 분석하고 요청된 크기와 일치하는 항목을 선택한 다음 해당 항목만 디코딩합니다.
.ico 내부의 PNG
크기가 64×64 이상인 경우 PNG 압축은 시각적 손실 없이 파일 크기를 5~10배로 줄입니다. 최신 발전기(당사 포함)는 이 작업을 자동으로 수행합니다.
SVG 파비콘
SVG 파비콘은 일반 SVG 파일입니다. 브라우저는 이를 다른 SVG처럼 렌더링하며 <style> 블록은 선호 색상 구성표에 따라 색상을 조정할 수 있습니다.
브라우저가 선택하는 방법
여러 개의 <link rel="icon"> 태그를 제공하는 경우 브라우저는 표면에 가장 일치하는 태그를 선택합니다(탭, 북마크, 설치). 지원되는 경우 SVG가 선호됩니다. .ico가 대체입니다.
자주 묻는 질문
What is inside a .ico file?
A header plus a directory of image entries. Each entry can be BMP or PNG at a specific width and height.
How do browsers choose which favicon to display?
Browsers read all <link rel="icon"> tags and pick the best match for the surface — tab, bookmark, or install prompt. SVG is preferred when supported; .ico is the fallback.
Why use PNG inside an .ico instead of BMP?
PNG compression cuts file size 5–10× at 64×256 with no visible loss, which speeds up page loads.
Can I use only SVG for favicons?
Not safely. Always ship favicon.ico as a fallback for older browsers, Windows shortcuts, and embedders that ignore SVG.