파비콘 생성기
이미지 하나를 업로드하면 모든 파비콘 사이즈를 다운로드 — 16~512px PNG와 HTML 링크 태그까지. 전 과정이 브라우저 안에서만 실행됩니다.
조회수 1,161회
이미지를 읽을 수 없습니다 — PNG/JPG/WebP를 시도해 보세요
2026년에 중요한 사이즈
기기와 사용 맥락마다 요구하는 파비콘 사이즈가 다릅니다. 파비콘은 하나의 파일이 아니라 여러 파일로 이루어진 하나의 패밀리이기 때문입니다. 브라우저 탭은 아주 작은 16×16, 32×32 픽셀 PNG를 사용합니다. iOS의 "홈 화면에 추가" 기능은 180×180 픽셀 apple-touch-icon을 사용합니다. Android와 설치된 PWA는 홈 화면 및 스플래시 화면 아트를 위해 웹 앱 매니페스트에서 192×192, 512×512 픽셀 아이콘을 가져옵니다. 하나의 원본 이미지로는 이 모든 크기를 직접 처리할 수 없습니다 — 512px 로고를 16px 탭 안에 그대로 욱여넣으면 세부 정보가 거의 사라지고, 16px 아이콘을 512px로 늘리면 흐릿하고 각져 보입니다. 그래서 올바른 접근 방식은 고해상도 원본 하나를 각 목표 사이즈로 개별적으로 렌더링하는 것입니다 — 한 출력물을 다른 출력물에서 확대·축소하는 대신, 모든 사이즈에서 픽셀을 매번 새로 그리는 방식입니다.
이 도구가 정확히 그렇게 작동합니다: 브라우저 안에서 원본 이미지를 HTML 캔버스에 불러온 뒤, 16, 32, 48, 180, 192, 512픽셀이라는 여섯 가지 표준 사이즈로 리사이즈합니다 — 각각 원본에서 직접 그려집니다 — 그런 다음 그에 맞는 PNG 파일과, 사이트의 <head>에 붙여 넣을 <link> 태그를 함께 제공합니다. 아무것도 업로드되지 않습니다. 리사이즈는 사용자 기기에서 Canvas API로 이루어집니다.
가장 작은 사이즈를 기준으로 설계하기
16px에서는 워낙 많은 디테일이 사라지기 때문에, 파비콘 디자인은 가장 큰 사이즈가 아니라 가장 작은 사이즈부터 거꾸로 작업해야 합니다. 전체 워드마크가 아니라 로고 심볼만 잘라 사용하세요 — 텍스트는 약 24px 아래에서 읽을 수 없는 얼룩으로 변합니다. 브라우저가 밝은 테마와 어두운 테마를 오가므로, 밝은 탭바와 어두운 탭바 모두에서 강한 대비를 유지하세요. 가장 작은 사이즈에서는 일부 반투명 가장자리 픽셀이 노이즈처럼 보일 수 있으므로, 대개 투명 배경보다 단색 배경이 더 잘 표현됩니다. 많은 브랜드가 단순화된 "앱 아이콘" 버전 — 글자 하나, 이니셜 또는 기호 — 을 별도로 유지하는 이유는 바로 전체 로고가 16px 테스트를 통과하지 못하기 때문입니다.
설치 가능한 사이트를 위해 192px와 512px 아이콘을 하나로 묶어주는 매니페스트 파일도 알아두면 도움이 됩니다: 웹 앱 매니페스트(manifest.json)는 이 두 사이즈를 URL로 참조하여, Android와 데스크톱 PWA 설치 프로그램이 홈 화면 및 앱 전환기에 어떤 아이콘을 가져와야 하는지 알 수 있게 합니다. 매니페스트 아이콘을 생략한 사이트도 완전히 정상적으로 작동합니다 — 브라우저 탭과 iOS 홈 화면 아이콘은 독립적으로 작동합니다 — 다만 설치 안내 자체가 일반 아이콘으로 대체되거나 설치 제안을 아예 하지 않을 수 있습니다.
자주 묻는 질문
.ico 파일이 아직도 필요한가요?
거의 필요 없습니다. 모든 최신 브라우저는 link 태그의 sizes 속성으로 선언된 PNG 파비콘을 지원합니다. 사이트 루트에 /favicon.ico를 남겨두는 것은 그 고정된 레거시 경로를 직접 요청하는 아주 오래된 사용자 에이전트와 도구에만 도움이 됩니다.
어떤 이미지를 업로드해야 하나요?
정사각형 이미지이며, 이상적으로는 512px 이상의 PNG이거나 SVG에서 내보낸 래스터 이미지로, 심볼이 중앙에 배치되고 여백이 충분한 것이 좋습니다. 정사각형이 아닌 이미지는 리사이즈 전에 중앙 기준으로 정사각형으로 잘리므로 어떤 부분도 늘어나지 않습니다.
16px에서 아이콘이 흐릿하거나 뭉개져 보이는 이유는 무엇인가요?
16픽셀은 물리적으로 세밀한 디테일을 담을 수 없습니다 — 얇은 선, 그라데이션, 작은 텍스트는 흐릿하게 뭉개집니다. 원본 심볼을 단순화하거나 대비를 높이세요. 전체 로고가 가장 작은 탭 아이콘에서 살아남지 못한다면 전용의 작은 사이즈 버전을 따로 설계하세요.
192px 아이콘과 512px 아이콘의 차이는 무엇인가요?
두 아이콘 모두 Android와 PWA 매니페스트에 사용됩니다: 192px는 일반 밀도에서 홈 화면 아이콘으로 사용되고, 512px는 고밀도 화면과 PWA 로딩 중 표시되는 스플래시 화면에 사용됩니다 — Android가 상황에 맞는 것을 알아서 선택합니다.
모든 사이즈를 추가해야 하나요, 아니면 몇 개만 있어도 되나요?
현대적인 사이트라면 32px와 180px apple-touch-icon만으로 대다수 방문자를 충분히 커버할 수 있습니다. 사이트가 PWA로 설치 가능하다면 192/512px 매니페스트 아이콘을 추가하세요. 16px와 48px 사이즈는 주로 레거시 환경에서 도움이 됩니다.
비슷한 도구
문제 신고하기
파비콘 생성기
댓글
아직 댓글이 없습니다 — 첫 댓글을 남겨보세요!