새로운 파비콘을 Webflow에 업로드했는데도 브라우저 탭에 여전히 이전 사각형 아이콘이 표시된다면 혼자가 아닙니다. 증상은 게시 후에도 탭 바에 오래된 아이콘이 남아 있는 것입니다.

빠른 해결 방법 (먼저 수행)

다음 세 단계 우회 방법을 적용한 뒤 페이지를 새로 고칩니다.

  1. Chrome(또는 선호하는 브라우저)에서 페이지를 엽니다.
  2. 파비콘 URL에 쿼리 문자열을 추가합니다. 예: /favicon.ico?v=2. 이는 Webflow 프로젝트의 Custom Code 섹션에서 link 태그를 편집하여 수행할 수 있습니다.
  3. 사이트를 다시 게시합니다. 새로운 URL이 브라우저가 캐시된 사본을 우회하도록 강제합니다.

게시가 완료되면 Ctrl+F5 (강력 새로고침)를 누릅니다. 업데이트된 아이콘이 즉시 표시됩니다.

근본 원인 설명

아이콘이 오래된 상태로 남은 이유를 이해하면 같은 문제가 다시 발생하는 것을 방지할 수 있습니다.

브라우저 캐시

파비콘은 크기가 작고 모든 탐색 시마다 요청되기 때문에 브라우저가 aggressively 캐시합니다. 대부분의 브라우저는 파일을 며칠간 저장하며, URL이 변경되지 않으면 새로운 link 태그를 무시합니다.

Webflow의 게시 파이프라인

Publish 버튼을 클릭하면 Webflow가 파일을 CDN에 푸시합니다. CDN은 이전 버전이 만료될 때까지 제공할 수 있습니다. 버전 쿼리 문자열을 추가하면 CDN에 리소스가 새 것임을 알릴 수 있습니다.

잘못된 rel 속성

Webflow UI는 기본적으로 <link rel='shortcut icon' href='...'/>를 삽입합니다. 최신 브라우저는 HTML 사양 HTML spec에 정의된 rel='icon'을 선호합니다. 레거시 값을 사용하면 일부 브라우저가 새 파일을 무시할 수 있습니다.

파일 유형 누락 또는 불일치

업로드한 파일이 SVG인데 type 속성이 없으면 오래된 브라우저가 캐시된 .ico 파일을 fallback 할 수 있습니다. type='image/svg+xml'을 명시하면 모호성을 없앨 수 있습니다.

CDN 엣지 캐시

강력 새로고침 후에도 CDN 엣지 노드가 오래된 파일을 보유할 수 있습니다. Webflow 대시보드에서 엣지 캐시를 정리하면 (Site Settings → Hosting → Clear cache) 해결되지만, 쿼리 문자열 트릭이 대부분 개발자에게 더 빠릅니다.

예방 팁

이러한 단계는 아이콘 파이프라인을 깔끔하게 유지하고 향후 업데이트를 손쉽게 합니다.

구현 예시

아래는 Webflow의 Custom Code → Head 영역에 붙여넣을 수 있는 최소한의 표준 준수 스니펫입니다. HTML 사양을 따르며 버전 쿼리 문자열을 포함합니다.

&lt;link rel='icon' type='image/svg+xml' href='https://example.com/favicon.svg?v=202308'&gt;
&lt;link rel='icon' type='image/png' href='https://example.com/favicon-32.png?v=202308' sizes='32x32'&gt;

https://example.com/ 을 자신의 도메인으로 교체하십시오. 버전 토큰은 파일이 변경될 때마다 바뀌는 문자열이면 됩니다.

추가 읽을거리

Webflow에서 파비콘을 업로드하는 전체 절차는 공식 가이드 Add a favicon or webclip을 참조하십시오. 배포 후 고착된 CDN 문제에 직면한다면 Favicon Not Updating After Deployment? The 2‑Minute Fix 기사에서 엣지 캐시 정리에 대해 자세히 다룹니다.

빠른 해결 방법을 먼저 적용하고 근본 원인을 차례로 해결하면 Webflow 사이트의 탭 아이콘을 최신 상태로 유지하고 브라우저 간 일관성을 확보할 수 있습니다.