브라우저 기록에서 링크를 클릭했을 때 브랜드 로고 대신 회색 지구본 아이콘만 보인 적 있나요? 바로 파비콘 (favicon) 이 누락된 상황입니다. 이는 깨진 CSS 파일보다 훨씬 더 '아마추어'라는 인상을 강하게 줍니다.

대부분의 개발자는 manifest.json이나 SVG 미디어 쿼리에 집착하지만, 만약 Wix, Squarespace, Webflow 같은 노코드 (No-Code) 플랫폼으로 사이트를 구축했다면 어떨까요? public 폴더나 원시 HTML 헤더에 접근할 수 없습니다. 오직 플랫폼이 제공하는 UI 만 사용할 수 있을 뿐입니다.

노코드 웹사이트용 파비콘 설정은 기술적 세부사항이 숨겨져 있어 다르게 느껴질 수 있습니다. 하지만 숨겨져 있다고 해서 중요하지 않은 것은 아닙니다. 2026 년에도 Google 은 검색 결과용 48x48 PNG 를 요구하며, Safari 는 180x180 Apple Touch Icon 이 필요합니다. 만약 사용 중인 노코드 플랫폼이 이를 자동으로 생성하지 않는다면, 당신은 트래픽을 잃고 있는 것입니다.

노코드 플랫폼이 파비콘 구현에 실패하는 이유

Wix 나 Squarespace 같은 플랫폼은 속도 면에서는 훌륭하지만, 기본적으로 아이콘 최적화 능력은 매우 떨어집니다. 이들은 종종 2000x2000 픽셀의 거대한 로고를 가져와서 16x16 픽셀 아이콘으로 축소하여 제공합니다. 그 결과는 무엇일까요? 브라우저 탭에서 감자처럼 보이는 흐릿한 이미지입니다.

예를 들어, Stripe 는 로고의 단순화된 버전을 파비콘으로 사용합니다. 단순히 메인 브랜드 마크를 리사이즈하는 것이 아니라, 아주 작아져도 인식 가능한 16x16 그리드를 별도로 제작합니다. 하지만 노코드 도구들은 우회 방법 없이는 이러한 세밀한 제어를 거의 제공하지 않습니다.

사이트가 전문적으로 보이기를 원한다면 플랫폼의 '자동 생성' 버튼에 의존해서는 안 됩니다. 빌더에 로그인하기 전에 자산 (Asset) 을 올바르게 준비해야 합니다.

1 단계: 올바른 자산 크기 준비

웹사이트 빌더를 건드리기 전에 올바른 파일이 필요합니다. 단일 512x512 PNG 를 업로드하고 운을 빚어서는 안 됩니다. 이는 거의 모든 기기에서 잘 작동하지 않습니다.

로고에서 완전한 세트를 생성하려면 Mzu favicondl을 사용하세요. 구체적으로 다음 파일이 필요합니다:

16x16 크기를 건너뛰면 일부 구형 브라우저나 특정 이메일 클라이언트가 아이콘을 캐시하지 못하고 기본 지구본으로 돌아가는 경우가 있습니다. 항상 전용 소형 버전을 준비하세요.

2 단계: 업로드 과정 (플랫폼별 특이사항)

이제 '노코드'의 마법이 발휘되는 순간입니다. 각 플랫폼마다处理方式이 다르며, UI 가 혼란스러울 수 있습니다.

Wix 의 경우: 설정 > 사이트 아이콘으로 이동하세요. 16x16 및 180x180 파일을 업로드합니다. Wix 는 자동으로 크롭을 시도하지만, 로고에 패딩이 있다면 중앙 정렬이 어긋날 수 있습니다. 이미지 편집기에서 먼저 패딩을 제거하세요.

Squarespace 의 경우: 디자인 > 사이트 정체성으로 이동하세요. Squarespace 는 더 엄격합니다. 메인 업로드에는 투명한 배경이 없는 정사각형 이미지를 요구하는 경우가 많습니다. 로고가 원형이라면 사이트 헤더 색상과 일치하는 단색 배경을 추가해야 할 수 있습니다.

Webflow 의 경우: 가장 유연합니다. 프로젝트 설정 > 파비콘으로 이동하세요. ICO, PNG, Apple Touch Icon 을 별도로 업로드할 수 있습니다. Webflow 가 HTML 코드를 자동으로 생성하지만, 파일 이름이 플랫폼이 기대하는 것과 정확히 일치하는지 확인해야 합니다.

3 단계: 검증 및 강제 새로고침

파일을 업로드하고 '게시'를 눌렀습니다. 탭을 확인했지만 여전히 구형 아이콘이 보입니다. 이것이 노코드 웹사이트용 파비콘 설정에서 가장 흔한 좌절입니다.

브라우저는 파비콘을 공격적으로 캐시합니다. 며칠 동안 업데이트되지 않을 수도 있습니다. 이를 해결하려면 캐시를 강제로 지우거나, 플랫폼이 허용하는 경우 URL 에 버전 문자열을 추가해야 합니다.

대부분의 노코드 빌더에서 HTML link 태그를 직접 편집할 수 없으므로, 이 방법을 시도해 보세요: 시크릿 모드에서 브라우저 캐시를 지우세요. 그래도 표시되지 않는다면 DevTools 의 네트워크 탭을 확인하세요. /favicon.ico에서 404 오류가 있는지 찾아보세요. 플랫폼이 해당 파일을 생성하지 않았다면, 빌더가 루트 디렉토리에 파일 업로드를 지원한다면 정확히 favicon.ico라는 이름의 파일을 수동으로 업로드해야 할 수 있습니다.

피해야 할 흔한 함정

올바른 단계를 밟더라도 문제가 발생할 수 있습니다. 설정을 망치는 주요 원인은 다음과 같습니다.

투명한 배경: 일부 노코드 플랫폼 (특히 구형 Wix 버전) 은 메인 파비콘에 투명한 PNG 를 지원하지 않습니다. 로고 주변에 흰색 상자가 표시될 수 있습니다. 혹시 모를 상황에 대비해 단색 배경 버전을 항상 테스트하세요.

잘못된 종횡비: 로고가 직사각형일 수 있습니다. 하지만 파비콘은 정사각형이어야 합니다. 직사각형 로고를 정사각형에 맞춰 늘리면 왜곡되어 보입니다. 먼저 정사각형으로 크롭한 후 크기를 조절하세요.

다크 모드 무시: 파비콘이 투명한 배경에 검은색이라면 Chrome 의 다크 모드에서 사라질 수 있습니다. 아이콘이 흰색과 어두운 회색 배경 모두에서 높은 대비를 갖도록 하세요. 코드 없이 이를 처리하는 방법에 대한 자세한 내용은 Favicon Dark Mode Support 가이드를 확인하세요.

노코드 아이콘에 대한 결론

전문적인 파비콘을 갖기 위해 개발자가 될 필요는 없습니다. 다만 '노코드'가 '규칙 없음'을 의미하지는 않는다는 점을 이해해야 합니다. 브라우저는 여전히 특정 크기와 포맷을 요구합니다.

브랜드가 평범해 보이지 않도록 하세요. 이미지를 준비하고, 올바르게 업로드하며, 시크릿 창에서 검증하는 데 여분의 5 분만 투자하세요. 사용자는 그 차이를 눈치챌 것입니다. 왜 사이트가 더 신뢰해 보이는지 설명할 수는 없더라도 말입니다.

다음 프로젝트에 완벽한 아이콘 세트를 생성할 준비가 되셨나요? 리사이징과 포맷 변환이라는 중과제를 처리하려면 Mzu favicondl을 사용하세요.