파비콘 크기가 여러 개인 이유
파비콘은 한 곳에서만 쓰이지 않습니다. 브라우저 탭은 16px, 고해상도 화면의 탭과 북마크 목록은 32px, 윈도우 바로가기와 구글 검색 결과의 사이트 아이콘은 48px, iOS 홈 화면에 추가하면 180px, 안드로이드 홈 화면·PWA 설치는 192px, 설치 스플래시와 앱 스토어 목록은 512px를 요구합니다. 큰 이미지 하나를 브라우저가 줄여 쓰게 해도 되지만 16px처럼 작은 크기에서는 축소 알고리즘 차이로 뭉개지기 쉽고, 각 OS가 자기 규격의 파일을 직접 찾기 때문에 크기별로 따로 두는 것이 정석입니다. 이 도구는 원본을 단계적으로 줄여 각 크기를 만들고, 브라우저 안에서만 처리합니다.
파일 배치와 태그
만든 PNG를 사이트 루트(/)에 올리고 결과의 link 태그를 <head>에 넣습니다. apple-touch-icon.png와 favicon.ico는 태그가 없어도 루트에 있으면 iOS·브라우저가 자동으로 찾습니다. 안드로이드 크롬은 site.webmanifest의 icons 목록을 읽으므로 매니페스트 파일도 함께 올려야 홈 화면 아이콘이 제대로 나옵니다. 캐시가 강해서 바꾼 뒤 바로 반영되지 않을 때는 파일명에 버전(?v=2)을 붙이거나 시크릿 창에서 확인합니다.
투명 배경과 여백
브라우저 탭용(16·32·48)은 투명 배경이 자연스럽지만, iOS는 투명 영역을 흰색·검정으로 채워 버리고 안드로이드는 원형·둥근 사각형 마스크를 씌웁니다. 그래서 180·192·512는 배경색을 채우고 로고 주변에 5~10% 여백을 두는 것이 안전합니다. 한 번은 투명으로, 한 번은 색 채움으로 두 번 생성해 크기별로 골라 쓰면 됩니다. 모서리 둥글기는 안드로이드 마스크와 비슷한 모양을 미리 볼 때 쓰며, 실제 OS 마스크는 시스템이 따로 적용합니다.
좋은 원본의 조건
512px 이상, 정사각형, 세부가 적은 단순한 형태가 좋습니다. 글자가 많은 로고는 16px에서 읽을 수 없으므로 첫 글자나 심볼만 따로 만든 이미지를 쓰는 편이 낫습니다. SVG 원본이 있으면 브라우저가 렌더링한 뒤 PNG로 굽습니다. 최신 브라우저는 <link rel="icon" type="image/svg+xml" href="/icon.svg">도 지원하니 SVG를 함께 두면 어떤 크기에서도 선명합니다.
자주 묻는 질문
favicon.ico가 꼭 필요한가요?
아닙니다. 현대 브라우저는 PNG를 인식합니다. 다만 일부 구형 도구나 IE는 루트의 favicon.ico만 찾으므로, 필요하면 32px PNG를 ICO로 변환해 함께 두세요.
만든 파비콘이 사이트에 안 보여요.
브라우저 캐시가 원인인 경우가 대부분입니다. 시크릿 창에서 확인하거나 태그의 href에 ?v=2 같은 쿼리를 붙이세요. 경로가 루트 기준(/favicon-32x32.png)인지도 확인합니다.
원본이 로고 글자라 16px에서 안 읽혀요.
정상입니다. 작은 크기용은 심볼이나 첫 글자만 있는 별도 이미지를 만들어 16·32px만 따로 생성하는 것이 일반적입니다.