파비콘 크기, 형식, HTML 태그

파비콘은 작은 파일이지만 브라우저, 휴대폰, 설치된 웹 앱은 저마다 다른 크기를 찾습니다. 이 가이드에서는 웹사이트에 어떤 파일이 필요한지, HTML에서 어떻게 선언하는지, 16픽셀에서도 알아볼 수 있는 아이콘을 어떻게 디자인하는지 설명합니다.

파비콘 생성기 열기 이미지 가이드

파비콘이란

파비콘("favourites icon", 즐겨찾기 아이콘의 줄임말)은 탭, 북마크, 방문 기록 목록에서 웹사이트를 나타내는 작은 이미지입니다. 휴대폰은 사이트를 홈 화면에 추가할 때 더 큰 버전을 쓰고, 설치된 웹 앱은 매니페스트에 있는 아이콘을 쓰며, 일부 검색 엔진은 검색 결과 옆에 파비콘을 표시합니다. 이처럼 쓰이는 곳마다 크기가 다르므로 웹사이트는 보통 몇 개의 파일을 한 세트로 제공합니다.

ICO, PNG, SVG 파비콘

형식	담기는 내용	알아 둘 점
ICO(`favicon.ico`)	한 파일에 여러 크기, 흔히 16, 32, 48픽셀	가장 오래된 형식입니다. 많은 브라우저가 페이지에 링크가 없어도 사이트 루트에서 `/favicon.ico`를 요청하므로 유용한 대비책이 됩니다.
PNG	파일 하나에 한 가지 크기, 투명도 지원	브라우저가 알맞은 파일을 고를 수 있도록 `sizes` 속성과 함께 선언합니다. Apple 터치 아이콘과 매니페스트 아이콘에도 쓰입니다.
SVG	어떤 크기로든 확대·축소할 수 있는 벡터 그림	대부분의 최신 데스크톱 브라우저가 지원하지만 모든 브라우저가 지원하는 것은 아니므로 ICO나 PNG 파일도 함께 두세요. SVG 파비콘은 CSS로 다크 테마에 맞출 수 있습니다.

ICO 파일은 작은 컨테이너입니다. 헤더에 각 이미지의 크기와 위치가 나열되고, 이미지는 PNG 데이터로 저장될 수 있습니다. LeedyBox 파비콘 생성기는 16, 32, 48픽셀 PNG 이미지가 담긴 favicon.ico와 그 밖의 크기를 위한 PNG 파일을 만듭니다.

자주 쓰는 크기와 용도

크기(픽셀)	일반적인 파일	주요 용도
16 × 16	favicon-16x16.png, favicon.ico 내부	일반 화면의 탭과 북마크
32 × 32	favicon-32x32.png, favicon.ico 내부	고밀도 화면의 탭, 일부 바로 가기
48 × 48	favicon.ico 내부	일부 시스템의 더 큰 바로 가기 아이콘과 바탕 화면 아이콘
180 × 180	apple-touch-icon.png	iPhone과 iPad의 홈 화면 아이콘
192 × 192	android-chrome-192x192.png	Android 홈 화면 아이콘, 매니페스트에 등록
512 × 512	android-chrome-512x512.png	웹 앱의 설치 대화 상자와 스플래시 화면

최소 512 × 512픽셀인 정사각형 원본이나 SVG 파일에서 시작하세요. 원본이 작으면 큰 아이콘을 만들 때 확대해야 하므로 흐릿해 보입니다. 정사각형이 아닌 로고는 주위에 여백을 더하거나 잘라야 합니다.

Apple 터치 아이콘은 투명하지 않아야 합니다. 일부 Apple 기기는 투명한 영역을 검은색으로 표시하므로, 대신 배경을 색으로 채우세요. iPhone과 iPad는 모서리를 알아서 둥글게 처리하므로 파일은 평범한 정사각형이어도 됩니다. 알파 채널에 대한 배경 지식은 PNG와 JPG에서 투명도가 동작하는 방식을 참고하세요.

HTML 태그와 웹 앱 매니페스트

파일을 웹사이트의 루트 폴더에 두고, 모든 페이지의 <head> 안에 다음 태그를 추가하세요.

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

SVG 파비콘도 있다면 <link rel="icon" href="/favicon.svg" type="image/svg+xml">을 추가하세요. 매니페스트(site.webmanifest)는 사이트 이름, 짧은 이름, 192·512픽셀 아이콘, 테마 색상, 배경 색상, standalone 같은 표시 모드를 담은 작은 JSON 파일입니다. 파일이 다른 폴더에 있다면 태그와 매니페스트의 모든 경로를 바꾸세요.

아주 작은 크기를 위한 디자인

단순하게 만드세요. 16픽셀에서는 가는 선, 작은 글자, 세밀한 디테일이 뭉개집니다. 슬로건까지 들어간 전체 로고보다 단순화한 마크, 도형 하나, 글자 한두 개가 더 효과적입니다.
대비를 강하게 하세요. 정확한 브랜드 색상보다 아이콘과 배경의 뚜렷한 밝기 차이가 더 중요합니다.
여백은 적게 두세요. 빈 공간이 많을수록 눈에 보이는 아이콘은 작아집니다. 큰 아이콘에는 약간의 여백이 도움이 될 수 있지만, 작은 파비콘은 정사각형을 대부분 채울 때 알아보기 쉽습니다.
실제 크기로 확인하세요. 확대한 미리 보기만 보지 말고, 탭에서 100% 배율로 아이콘을 확인하세요.

브라우저 다크 테마

많은 사람이 어두운 탭 표시줄을 사용합니다. 투명한 배경 위의 어두운 로고는 그곳에서 거의 보이지 않을 수 있고, 흰색 로고는 밝은 테마에서 보이지 않을 수 있습니다. 흔한 해결책은 로고 뒤에 단색이나 모서리가 둥근 배경 도형을 넣거나, 밝은 윤곽선을 두르거나, prefers-color-scheme 미디어 쿼리로 색이 바뀌는 SVG 파비콘을 쓰는 것입니다(SVG 파비콘을 지원하는 경우). LeedyBox 생성기는 밝은 탭 표시줄과 어두운 탭 표시줄을 함께 보여 주므로 둘을 비교할 수 있습니다.

파비콘 업데이트와 브라우저 캐시

브라우저는 파비콘을 캐시에 보관하며 때로는 오래 유지하므로, 새 아이콘을 올린 직후에는 보이지 않을 수 있습니다. 강력 새로 고침을 하거나 비공개(시크릿) 창을 열면 새 버전이 보일 수 있습니다. 재방문자가 새 아이콘을 더 빨리 받게 하려면 파일 이름을 바꾸거나 태그의 URL에 버전을 덧붙이세요. 예: /favicon-32x32.png?v=2. 북마크와 검색 결과의 아이콘은 갱신되는 데 더 오래 걸릴 수 있습니다. 변경한 뒤에는 중요한 브라우저와 기기에서 결과를 테스트하세요.

자주 묻는 질문

favicon.ico가 아직도 필요한가요?

필수는 아니지만 간단한 대비책이 됩니다. 많은 브라우저와 기타 도구가 사이트의 루트 폴더에서 /favicon.ico를 찾습니다. 용량도 몇 킬로바이트에 불과합니다.

JPG를 파비콘으로 써도 되나요?

브라우저는 대개 표시할 수 있지만, JPG에는 투명도가 없고 압축 때문에 작은 디테일이 흐려질 수 있습니다. 아이콘에는 PNG, ICO, SVG 파일이 더 좋은 선택입니다.

새 파비콘이 보이지 않는 이유는 무엇인가요?

대개 이전 아이콘이 아직 캐시에 남아 있거나, HTML 태그의 경로가 파일을 올린 위치와 맞지 않기 때문입니다. 각 파일의 URL을 브라우저에서 직접 열어 제대로 불러와지는지 확인하세요.