파비콘 크기: 2025년에 실제로 필요한 것들

파비콘 크기를 검색하면 상충하는 숫자들이 나타납니다: 16x16, 32x32, 48x48, 64, 180, 192, 256, 512. 이런 목록들은 대부분 10년 전에 작성되었고 업데이트된 적이 없습니다. 실제로 현대적인 사이트는 약 4개의 파일만 필요하며, 파비콘 생성기를 사용하면 한 번에 모든 파일을 만들 수 있습니다. 완전히 브라우저에서 실행되므로 로고가 당신의 컴퓨터를 벗어나지 않습니다.

각 크기가 실제로 무엇인지, 그리고 무엇을 건너뛸 수 있는지 알아보겠습니다.

여전히 중요한 크기들

16x16과 32x32 — 브라우저 탭과 북마크

이것은 클래식 파비콘입니다. 16x16은 많은 탭이 열려있는 탭 스트립에서 보이고, 32x32는 고DPI 화면, 북마크 바, 일부 주소 표시줄 UI에서 사용됩니다. 둘 다 전통적으로 한 개의 favicon.ico 파일로 묶여있으며, 여러 해상도를 동시에 포함할 수 있습니다. Windows는 데스크톱 바로가기를 위해 동일한 .ico에서 48x48도 가져오므로, 이를 포함해도 비용이 거의 없습니다.

180x180 — Apple 터치 아이콘

iPhone이나 iPad에서 누군가 "홈 화면에 추가"를 탭하면, Safari는 180x180 크기의 apple-touch-icon.png를 찾습니다. 없으면 iOS가 페이지를 스크린샷으로 캡처하여 사용하는데, 이는 보기 흉합니다. 이 하나의 PNG는 시스템이 필요에 따라 축소하므로 모든 현재 iOS 기기를 커버합니다.

192x192과 512x512 — Android와 PWA

Android Chrome과 설치 가능한 웹 앱은 site.webmanifest에서 아이콘을 읽습니다. 192는 홈 화면 아이콘이고, 512는 스플래시 화면과 앱 목록에 사용됩니다. 사이트를 설치 가능하게 하려면 둘 다 필요합니다.

SVG — 선택 사항이지만 좋음

Firefox와 Chrome은 모두 SVG 파비콘을 지원하며, 어떤 크기에서도 선명하게 유지되고 파일 내의 미디어 쿼리로 다크 모드에 반응할 수 있습니다. 이는 보너스이지 대체물이 아닙니다. Safari와 구형 브라우저는 여전히 래스터 버전을 원합니다.

건너뛸 수 있는 것들

64x64, 96x96, 128x128, Windows 타일 이미지의 전체 세트, 그리고 수십 개의 레거시 apple-touch-icon-76x76 스타일 파일들. 이들은 대부분 사라진 기기를 위해 필요했습니다. 20개의 아이콘 파일을 배포하면 저장소가 부풀어지고 측정 가능한 이득이 없습니다.

HTML

사이트 루트에 파일을 놓고 <head>에 다음을 추가하세요:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

그리고 매니페스트에서:

"icons": [
  { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
  { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]

16픽셀에 맞게 디자인하기

어려운 부분은 내보내기가 아니라 전체 로고가 16x16에서 뭉게진다는 것입니다. 도움이 되는 몇 가지:

• 전체 로고가 아닌 일부를 사용하세요. 한 글자, 한 글리프, 한 모양. 단어 표식은 탭 크기에서 읽을 수 없습니다.
• 정사각형으로 시작하세요. 소스가 넓은 로고라면, 생성기가 빈 공간으로 레터박싱하지 않도록 먼저 정사각형으로 자르세요.
• 대비를 높게 유지하세요. 얇은 윤곽은 사라집니다. 단색 모양이 살아남습니다.
• 배경을 결정하세요. 투명한 PNG는 밝고 어두운 브라우저 크롬에 적응합니다. 마크가 어두우면 단색 타일을 대신 제공하는 것을 고려하세요. 평면 JPG만 있는 경우 로고 스크린샷에서 배경을 제거할 수 있으며 몇 초면 됩니다.
• 안전 영역을 유의하세요. Android는 아이콘을 원과 스콰클로 마스킹하므로, 512 아트웍의 가장자리 주변에 대략 10% 패딩을 남겨두세요.

파비콘의 배경을 사이트의 브랜드 색상과 맞추려면, 이미지 색상 선택기가 기존 스크린샷에서 정확한 16진수를 추출합니다. theme-color 메타 태그에도 유용합니다.

전체 세트를 한 번에 생성하세요

아무것도 업로드하지 않습니다. 정사각형 PNG나 SVG를 무료 브라우저 기반 파비콘 생성기에 드롭하면 .ico, Apple 터치 아이콘, 192/512 PNG를 로컬로 당신의 탭에서 생성합니다. 서버에 전송되는 것이 없고, 가입도 필요 없으며, 미공개 로고의 사본이 누군가의 저장 공간에 남아있지 않습니다.

그러면 브라우저를 축소하여 탭을 보고, 중요한 유일한 질문을 하세요: 그것이 무엇인지 알 수 있나요?