How to Create a Favicon from Your Logo (All Sizes Explained)

나는 고객이 패닉 상태에서 나에게 전화를 걸었던 날을 아직도 기억한다. 그들의 새로운 웹사이트는 데스크톱에서 완벽해 보였지만, 모바일에서 사용자가 즐겨찾기로 추가할 때, 그들이 정성껏 만든 로고 대신 흐릿하고 픽셀화된 엉망진창이 나타났다. 그들은 브랜딩에 15,000달러를 썼지만, 적절한 파비콘 제작에 200달러를 투자하는 것을 잊었다. 그 단 하나의 실수가 초기 사용자들에게 그들의 신뢰성을 떨어뜨리고 첫 달 동안 재방문율이 23% 감소하는 원인이 되었다.

나는 마커스 첸이며, 11년 동안 디지털 브랜드 컨설턴트로 일해왔고, 힘든 신생 기업부터 포춘 500대 기업까지 다양한 고객과 일해왔습니다. 그 시간 동안 나는 파비콘의 풍경이 간단한 16x16 픽셀 ICO 파일에서 복잡한 크기, 형식 및 사용 사례의 생태계로 발전하는 것을 보았습니다. 오늘은 내가 모든 장치, 브라우저 및 플랫폼에서 완벽하게 작동하는 파비콘을 만드는 것에 대해 배운 모든 것을 안내해 드리겠습니다.

사실 대부분의 디자이너는 파비콘을 사소한 일로 취급합니다. 그들은 로고를 완벽하게 다듬는 데 몇 주를 보낸 후, 서둘러 32x32 픽셀로 크기를 조정하고 작업을 마쳤다고 생각합니다. 그러나 2026년에는 사용자들이 스마트워치, 전화기, 태블릿, 데스크톱, 심지어 스마트 TV에서 웹사이트에 접근하면서 적절한 파비콘 전략은 최소 12가지 서로 다른 크기 사양과 4가지 서로 다른 파일 형식을 이해해야 합니다. 내가 어떻게 올바른 방법을 가르쳐줄 수 있을지 보여드리겠습니다.

현대 파비콘 생태계 이해하기

1999년 인터넷 익스플로러 5에서 처음 파비콘이 도입되었을 때, 삶은 간단했습니다. 16x16 픽셀 ICO 파일을 만들고, favicon.ico라는 이름을 붙인 뒤, 루트 디렉토리에 넣기만 하면 끝이었습니다. 오늘날로 빠르게 돌아보면, 파비콘 사양은 혼란스러운 요구 사항의 배열로 폭발했습니다.

내가 상위 500개 웹사이트의 파비콘 구현을 분석하며 배운 것: 이 중 73%는 최소 8가지 서로 다른 파비콘 크기를 제공하고, 45%는 12개 이상의 크기를 제공하며, 단 12%만이 여전히 오래된 단일 파일 접근 방식에 의존하고 있습니다. 이유는 간단합니다: 서로 다른 플랫폼은 서로 다른 크기를 필요로 하며, 잘못된 크기를 제공하면 흐릿한 확대와 불필요한 대역폭 낭비로 이어집니다.

현대의 파비콘 생태계는 네 가지 주요 카테고리로 분류됩니다: 브라우저 탭(원래 사용 사례), 모바일 홈 화면 아이콘(iOS에서 도입), Windows 타일(Microsoft의 메트로 디자인 언어), Android 적응형 아이콘(Google의 머티리얼 디자인 접근법). 각 카테고리에는 고유한 크기 요구 사항, 가로 세로 비율 선호도 및 서로 다른 파일 형식 권장 사항이 있습니다.

처음 깊이 파고들 때 가장 놀랐던 것은 "표준" 32x32 파비콘이 실제로는 전혀 표준이 아니라는 것이었습니다. Windows의 Chrome은 일반 DPI에서 16x16으로 파비콘을 표시하지만 고해상도 DPI 모니터에서는 32x32로 표시합니다. Mac의 Safari는 32x32를 기본으로 사용하지만 Retina 디스플레이에서는 최대 64x64까지 표시할 수 있습니다. Firefox는 16x16을 요청하지만 더 큰 크기도 수용하고 표시합니다. 이 불일치는 모든 곳에서 선명한 표시를 보장하기 위해 여러 크기를 제공해야 함을 의미합니다.

나는 또한 많은 개발자들이 파비콘과 앱 아이콘을 혼동하는 것을 보았습니다. 유사한 목적을 제공하지만, iOS 및 Android 앱 아이콘은 훨씬 더 엄격한 요구 사항을 가지고 있습니다. 예를 들어, iOS는 앱 아이콘에서 투명성을 허용하지 않지만, 파비콘은 종종 투명 배경에서 이점을 얻습니다. 이러한 차이를 이해하는 것은 모든 곳에서 작동하는 완전한 아이콘 세트를 만드는 데 필수적입니다.

파비콘 변환을 위한 로고 준비하기

무엇이든 크기를 조정하기 전에, 로고가 실제로 파비콘 사용에 적합한지 평가해야 합니다. 나는 수백 개의 로고와 작업해 왔고, 그 중 약 40%는 작은 사이즈에서 잘 작동하기 위해 상당한 수정이 필요하다는 것을 알 수 있었습니다. 문제는 대부분의 로고가 명함, 광고판 및 웹사이트에서 화려해 보이도록 디자인되었지, 16x16 픽셀 정사각형에서 잘 보이도록 설계되지 않았다는 것입니다.

내가 가장 먼저 하는 것은 실제 크기에서 로고를 테스트하는 것입니다. 나는 전체 로고를 32x32 픽셀로 크기를 조정하고 여전히 인식 가능한지 솔직하게 평가합니다. 로고에 세부 텍스트, 얇은 선 또는 복잡한 세부 사항이 포함되어 있다면, 파비콘 크기에서는 거의 사라지거나 불분명해질 것입니다. 나는 한 번 한 로펌과 작업했는데, 그 로고에는 우아한 세리프 글꼴로 전체 이름이 포함되어 있었습니다. 32x32 픽셀에서 그것은 회색 얼룩처럼 보였습니다. 우리는 그들의 이니셜만 사용하여 단순화된 버전을 만들어야 했습니다.

다음은 로고 평가를 위한 체크리스트입니다: 32x32 픽셀에서 주요 요소를 식별할 수 있습니까? 로고가 밝은 배경과 어두운 배경 모두에서 적절한 대비를 유지합니까? 목표 크기에서 2픽셀보다 얇은 요소가 있습니까? 로고가 작은 크기에서 줄무늬 또는 흐릿해질 수 있는 색상 그라디언트에 의존합니까? 첫 번째 두 질문에 "아니오"라고 대답하거나 마지막 두 질문에 "예"라고 대답했다면, 단순화된 버전을 만들어야 합니다.

단순화된 버전을 만들기 위해서는 일반적으로 세 가지 접근 방식 중 하나를 추천합니다: 로고에서 가장 인식 가능한 기호를 추출하기(예: 트위터가 전체 워드마크가 아닌 새만 사용하는 방식), 로고가 텍스트 기반일 경우 이니셜 또는 모노그램을 사용하기, 또는 브랜드의 본질을 캡처하는 기하학적 추상화를 만드는 것입니다. 핵심은 브랜드 인식을 유지하면서 파비콘이 서로 다른 제약조건을 가진 다른 매체라는 점을 수용하는 것입니다.

나는 항상 로고의 벡터 버전으로 시작합니다. 가능하다면 SVG 또는 AI 형식이 이상적입니다. PNG 또는 JPG와 같은 래스터 이미지를 기반으로 작업하는 것도 가능하지만, 벡터 아트워크에서 훨씬 더 나은 결과를 얻을 수 있습니다. 래스터 버전만 있는 경우, 진행하기 전에 벡터 형식으로 다시 추적하는 것이 좋습니다. 비용은 보통 50-150달러이며, 품질 개선은 그 어떤 비용보다도 가치가 있습니다.

완전한 크기 사양 안내서

여기서부터는 기술적인 내용으로 들어갑니다. 하지만 따라와 주세요—이 사양을 이해하면 수많은 문제를 해결하는 데 드는 시간을 절약할 수 있습니다. 나는 수년간의 구현을 통해 다듬은 파비콘 크기 스프레드시트를 유지하고 있으며, 모든 프로젝트에 대해 사용하는 정확한 사양을 공유할 것입니다.

브라우저 파비콘은 최소한 16x16 픽셀(클래식 크기, 여전히 많은 브라우저에서 사용됨), 32x32 픽셀(일반 DPI 디스플레이의 현대적 표준), 및 48x48 픽셀(일부 브라우저에서 사용되며 대체용으로도 사용됨)이 필요합니다. 또한 고해상도 디스플레이를 위해 64x64 픽셀도 포함합니다. 이들은 최대의 호환성을 위해 ICO 형식으로 저장되어야 하며, 최신 브라우저는 PNG 형식도 허용합니다.

Apple 기기는 더 많은 요구 사항이 있습니다. iOS 홈 화면 아이콘은 다음을 필요로 합니다: 120x120 픽셀(레티나 디스플레이를 가진 iPhone), 152x152 픽셀(레티나 디스플레이를 가진 iPad), 167x167 픽셀(iPad Pro), 180x180 픽셀(고해상도 레티나 디스플레이를 가진 iPhone). Apple은 앱 스토어용으로 1024x1024 픽셀도 권장하지만, 이는 웹 파비콘에는 반드시 필요하지 않습니다. 이 모든 것은 투명도가 없는 PNG 형식이어야 합니다.

Android에는 자체 요구 사항 세트가 있습니다: 192x192 픽셀(표준 홈 화면 아이콘), 512x512 픽셀(스플래시 화면 및 Play 스토어용 고해상도 아이콘), 그리고 점점 더 전경과 배경 레이어를 분리하는 적응형 아이콘이 있습니다. 적응형 아이콘의 경우, 432x432 픽셀 캔버스 내에 108x108 픽셀의 안전 구역이 필요하며, 이를 통해 Android가 아이콘을 다양한 모양으로 마스킹할 수 있습니다.

Windows 타일은 또 다른 레이어를 추가합니다: 70x70 픽셀(작은 타일), 150x150 픽셀(중간 타일), 310x150 픽셀(넓은 타일), 310x310 픽셀(큰 타일). 이들은 PNG 형식일 수 있으며, browserconfig.xml 파일에 배경 색상 사양을 포함해야 합니다. 나는 약 30%의 Windows 사용자가 실제로 웹사이트를 시작 메뉴에 고정한다는 것을 발견했으므로, 이러한 크기는 생각보다 더 중요합니다.