브라우저와 기기가 실제로 원하는 파비콘 크기

파비콘은 예전에는 작은 16×16 이미지 하나를 의미했다. 이제 브라우저 탭, 휴대폰 홈 화면 바로가기, 북마크 바, Apple 터치 아이콘 각각이 자신만의 크기를 기대하며, 하나만 제공하면 이런 상황 중 일부는 흐릿하게 보이거나 자신의 아이콘 대신 일반적인 대체 아이콘을 보여주게 된다.

하나의 크기로 충분하지 않은 이유

180×180 홈 화면 아이콘 자리를 채우기 위해 확대된 16×16 아이콘은 크게 늘인 작은 이미지와 똑같이 각져 보인다 — 원본에 없던 디테일을 추가할 방법은 없다. 파비콘이 나타나는 각 상황마다 자체적으로 기대하는 해상도가 있으며, 현대적인 관행은 브라우저가 작은 파일 하나를 형편없이 확대하도록 맡기는 대신 여러 크기의 세트를 제공하는 것이다.

커버할 가치가 있는 크기

• 16×16과 32×32 — 대부분의 데스크톱 브라우저에서 브라우저 탭과 북마크 목록에 사용되는 고전적인 파비콘 크기.
• 180×180 — 페이지가 iPhone이나 iPad의 홈 화면에 추가될 때 Apple이 기대하는 홈 화면 아이콘 크기.
• 192×192와 512×512 — Android와, 설치 가능한 웹 앱의 홈 화면 아이콘 및 스플래시 화면을 위한 웹 앱 매니페스트에서 사용됨.

16px에서도 디자인을 읽기 쉽게 유지하기

파비콘 생성기는 원본 이미지 하나를 받아 완전히 브라우저 안에서 표준 크기 전체 세트를 한 번에 생성한다 — 하지만 애초에 작은 크기에서 작동하지 않는 디자인은 어떤 생성기도 고칠 수 없다. 미세한 디테일, 얇은 선, 작은 텍스트는 16×16에서 완전히 사라진다. 축소되어도 알아볼 수 있는 단순하고 굵은 형태나 글자야말로 몇 개의 크기가 생성되든 상관없이 브라우저 탭에서 실제로 명확하게 읽히는 것이다.