Squarespace에 멋진 새 로고를 업로드하고 브라우저를 새로고침했는데, 탭 아이콘이 흐릿하고 픽셀이 깨진 얼룩처럼 보인 적이 있으신가요? 데스크톱에서는 전문적으로 보이는 사이트가 Safari 탭 표시줄에서는 저해상도로 엉망이 되는 이유는, 원본 이미지의 크기가 플랫폼의 강력한 이미지 처리기와 충돌하고 있기 때문입니다.

완벽한 favicon size squarespace를 얻는 것은 추측으로 해결될 일이 아닙니다. CDN의 압축 과정을 거치면서도 선명함을 잃지 않으려면 정확한 규격이 필요합니다.

2026년 Squarespace가 요구하는 이상적인 크기

기술적으로 Squarespace는 100x100에서 300x300 픽셀 사이의 모든 크기를 허용합니다. 하지만 저는 하한선은 무시하고 정확히 300x300 픽셀을 업로드할 것을 강력히 권장합니다. 그 이유는 바로 레티나(Retina) 디스플레이 때문입니다.

Stripe나 GitHub를 보세요. 그들은 더 이상 16x16의 구형 파일을 업로드하지 않습니다. 축소해도 선명함을 유지하는 고해상도 원본 이미지를 사용합니다. 300x300 PNG를 업로드하면 Squarespace의 CDN이 픽셀을 손상시키지 않고 다양한 기기에 필요한 더 작은 크기를 자동으로 생성합니다.

선명한 탭 아이콘을 위한 전제 조건

업로드 버튼을 누르기 전에 이미지가 다음의 엄격한 기준을 충족하는지 확인하세요:

단계별 가이드: 크기 조정 및 업로드

모든 브라우저에서 아이콘을 선명하게 유지하기 위한 정확한 작업 흐름은 다음과 같습니다.

  1. 디자인 도구를 열고 300x300 픽셀의 캔버스를 만듭니다.
  2. 로고를 중앙에 배치하고 가장자리 주변에 10%의 투명한 여백(안전 영역)을 남깁니다.
  3. 투명도가 활성화된 표준 PNG로 내보냅니다.
  4. 업로드하기 전에 Mzu favicondl을 사용하여 파일을 압축하고 불필요한 메타데이터를 제거합니다.

Squarespace의 파일 처리 방식

Chrome 개발자 도구를 사용하여 게시된 Squarespace 사이트를 검사해 보면 HTML이 어떻게 다시 작성되는지 볼 수 있습니다:

<link rel='icon' href='https://images.squarespace-cdn.com/.../favicon.png?format=100w'>

?format=100w 매개변수를 주목하세요. Squarespace는 최신 브라우저에 동적으로 100픽셀 너비의 버전을 제공합니다. 원본 업로드 파일이 32x32에 불과했다면, CDN이 이를 확대하려고 시도하여 끔찍한 흐릿함이 발생하게 됩니다.

피해야 할 흔한 실수

정사각형이 아닌 이미지를 업로드하는 것이 가장 흔한 실수입니다. 직사각형 로고를 업로드하면 Squarespace가 강제로 자르거나 찌그러뜨립니다. 항상 1:1 캔버스를 사용하세요.

또 다른 함정은 다크 모드를 무시하는 것입니다. 투명한 배경에 로고가 검은색이라면, 어두운 브라우저 테마를 사용하는 사용자에게는 완전히 사라져 보이지 않게 됩니다. 흰색 윤곽선을 추가하거나 단색 배경을 사용하세요. 이에 대한 자세한 내용은 투명 배경 가이드를 확인하세요.

업로드 화면을 찾기 위해 Squarespace 대시보드 메뉴를 탐색하는 데 도움이 필요하다면, 전체 Squarespace 설정 가이드를 검토해 보세요.