아티클
PNG에서 파비콘 만들기
파비콘은 브라우저가 탭, 북마크, 방문 기록 목록에 표시하는 작은 그래픽입니다. 올바르게 만들려면 단순히 로고 크기를 조정하는 것 이상이 필요합니다. .ico 형식은 하나의 파일에 여러 해상도를 담고, 현대 브라우저는 PNG를 선호하며, 모바일 기기는 자체적인 apple-touch-icon을 가지고, 웹 앱 매니페스트는 별도의 아이콘 세트가 필요합니다. 이 글은 각 부분을 다루고 단일 소스 PNG에서 전체 세트를 만드는 방법을 설명합니다.
파비콘이란 무엇이며 브라우저가 어디에 사용하나요
파비콘(favicon)이라는 단어는 "favorite icon"의 줄임말입니다. 브라우저는 Internet Explorer 5(1999)에서 처음으로 주소 표시줄에 이것을 표시하고, 이후 북마크에 채택했습니다. 오늘날에는 브라우저 탭, 북마크 도구 모음, 방문 기록, 일부 브라우저의 새 탭 페이지, 그리고 사이트를 고정할 때 운영 체제 작업 표시줄에 표시됩니다. 모바일에서는 사용자가 사이트를 홈 화면에 추가할 때 기기가 표준 파비콘 대신 apple-touch-icon이라는 관련되지만 별개의 이미지를 사용합니다. 검색 엔진은 때로 인터페이스의 결과 옆에 파비콘을 표시합니다. 그래픽은 설계상 작아서 빠른 시각적 식별에 효과적이지만 잘 만들기도 까다롭습니다. 16x16 픽셀에서는 세밀한 로고가 불명확한 얼룩이 됩니다. 파비콘 파일 자체는 수십 년에 걸쳐 여러 형식을 거쳐왔는데, .ico가 가장 광범위하게 호환되고 PNG가 이제 대부분의 브라우저에서 현대적인 기본값입니다.
.ico 컨테이너: 하나의 파일에 여러 해상도
.ico 형식은 단일 이미지가 아닌 컨테이너입니다. 단일 .ico 파일은 서로 다른 해상도의 여러 비트맵 이미지를 담을 수 있으며, 각각은 파일 시작 부분의 인덱스에 별도 항목으로 저장됩니다. 가장 일반적인 세 가지 크기는 16x16, 32x32, 48x48 픽셀입니다. Windows가 탐색기나 작업 표시줄에 파비콘을 표시할 때 표시 맥락에 가장 잘 맞는 항목을 선택합니다. 이전 Windows 버전은 고밀도 작업 표시줄 슬롯에 48x48 항목이 필요했습니다. 브라우저는 탭에서 16x16으로 파비콘을 요청하지만 더 높은 밀도의 디스플레이가 감지되면 더 큰 항목을 사용할 수 있습니다. 세 가지 크기를 모두 하나의 .ico 파일에 담으면 단일 HTTP 요청으로 모든 사용 사례를 처리합니다. 별도의 PNG로 배포하는 것도 유효하지만 추가 link 태그가 필요하고 HTTP 요청이 늘어납니다. .ico 파일 내부의 이미지는 표준 BMP 또는 PNG 데이터이므로 컨테이너는 항목당 작은 헤더 오버헤드만 추가합니다.
작은 크기를 위한 디자인: 마크 단순화
16x16 픽셀에서는 총 256픽셀밖에 없습니다. 워드마크나 세밀한 디테일이 있는 일반적인 로고타입은 그 크기에서 읽을 수 없게 됩니다. 표준 접근 방식은 단순화된 마크를 만드는 것입니다. 단일 문자, 추상적인 모양, 또는 디테일에 의존하지 않고 브랜드를 표현하는 아이콘입니다. 예상해야 할 몇 가지 구체적인 문제: 얇은 선이 작은 크기에서, 특히 비레티나 화면에서 완전히 사라집니다. 문자 쌍과 네거티브 스페이스 디테일이 회색 노이즈로 합쳐집니다. 그라디언트는 거의 보이지 않습니다. 마크와 배경 사이의 높은 대비가 가독성에서 가장 큰 단일 요소입니다. 단순한 배경에 단색 모양은 16x16에서 세밀한 일러스트보다 거의 항상 더 잘 읽힙니다. 32x32와 48x48 크기는 더 관대하고 좀 더 세밀한 디테일을 지원할 수 있지만, 16x16 버전은 구속력 있는 제약으로 처리해야 합니다. 마크가 16x16에서 여전히 읽히지 않는다면 디자인을 더 단순화해야 합니다.
현대적인 세트: .ico, PNG 아이콘, apple-touch-icon, 매니페스트, HTML link 태그
공개 사이트의 완전한 파비콘 설정은 현재 다섯 가지가 필요합니다. 첫째, 사이트 루트에 favicon.ico(브라우저는 폴백으로 link 태그 없이 /favicon.ico를 직접 요청합니다). 둘째, 현대 데스크톱 브라우저를 위한 32x32 PNG, link 태그로 선언: `<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">`. 셋째, 탭 크기를 위한 16x16 PNG: `<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">`. 넷째, iOS 홈 화면 북마크를 위한 180x180 픽셀 apple-touch-icon: `<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">`. 다섯째, Android와 프로그레시브 웹 앱을 위한 192x192와 512x512 PNG가 있는 웹 앱 매니페스트(site.webmanifest). 투명도는 PNG와 .ico 내부의 PNG로 인코딩된 항목에서 지원되지만, iOS가 알파 채널을 무시하고 투명 영역을 검정으로 채우므로 apple-touch-icon은 불투명한 배경을 가져야 합니다.
로컬에서 처리하기: favicon-generator가 이미지를 기기에 유지
이 사이트의 favicon-generator는 PNG를 받아 완전한 세트를 생성합니다. 16x16, 32x32, 48x48 항목으로 채워진 다중 해상도 favicon.ico, 직접 link 태그 사용을 위한 개별 PNG 크기, 그리고 180x180 apple-touch-icon입니다. 이 모든 것은 Canvas API와 JavaScript .ico 인코더를 사용하여 브라우저에서 이루어집니다. 소스 이미지는 어디에도 업로드되지 않으며 기기에 유지됩니다. 소스 파일이 회사 로고이거나 어디로 갈지 제어하기 전에 기기를 떠나서는 안 되는 자산인 경우 이것이 중요합니다. 생성된 각 파일은 일반적인 파일명으로 개별 다운로드로 제공됩니다. 사이트 루트에 복사하고 HTML head에 해당 link 태그를 추가하세요. 소스 로고에 16x16 렌더링에서 살아남지 못하는 세밀한 디테일이 있다면 생성기에 드롭하기 전에 자르거나 단순화하거나, 파비콘을 위해 특별히 준비된 다른 소스 이미지를 제공할 수 있습니다.
이 아티클의 도구
자주 묻는 질문
PNG link 태그를 선언한다면 favicon.ico가 여전히 필요한가요?
네, 두 가지 이유로. 첫째, HTML을 읽지 않는 브라우저(웹 크롤러, RSS 리더, 일부 오래된 모바일 브라우저)는 도메인 루트에서 /favicon.ico를 직접 찾습니다. 그 파일이 없으면 모든 페이지 로드에서 404 요청이 발생하여 서버 로그에 노이즈가 추가되고 불필요한 왕복이 생깁니다. 둘째, 오래된 버전의 Internet Explorer는 .ico 형식만 인식하고 PNG link 태그를 무시합니다. 둘 다 제공하면 모든 경우를 처리합니다.
SVG를 파비콘으로 사용할 수 있나요?
Chrome과 Firefox는 `<link rel="icon" type="image/svg+xml" href="/favicon.svg">`를 통해 SVG 파비콘을 지원합니다. Safari는 SVG 파비콘을 지원하지 않습니다. SVG 파비콘은 해상도에 독립적이기 때문에 여러 크기 변형 없이 레티나 화면을 포함한 모든 디스플레이 밀도에서 선명하게 보입니다. 실용적인 권장 사항은 지원하는 브라우저를 위해 SVG link 태그를 선언하고 완전한 커버리지를 위해 .ico 폴백을 여전히 포함하는 것입니다. SVG 파비콘은 `prefers-color-scheme` 미디어 쿼리를 포함하여 밝은 버전과 어두운 버전 사이를 자동으로 전환할 수도 있습니다.
최상의 결과를 얻으려면 어떤 이미지로 시작해야 하나요?
투명한 배경이 있는 512x512 이상의 정사각형 PNG가 가장 많은 유연성을 제공합니다. 크게 시작하고 축소하면 작은 이미지로 시작하는 것보다 더 많은 디테일이 보존됩니다. 메인 로고에 워드마크가 포함된 경우 소스 해상도에 관계없이 16x16에서 텍스트를 읽을 수 없으므로 아이콘이나 마크만 보여주는 별도의 단순화된 버전 준비를 고려하세요. 마크와 배경 사이의 높은 대비가 작은 크기에서 선명하게 읽힐지 여부를 예측하는 가장 신뢰할 수 있는 요소입니다.