파비콘이 바뀌지 않는 것은 대부분 브라우저에 이전 아이콘이 남아 있기 때문입니다. 브라우저는 파비콘을 별도의 캐시에 보관하며, 일반 새로고침으로는 지워지지 않습니다. 가장 빠른 해결책은 아이콘에 새 URL을 부여하는 것입니다. 파일 이름을 바꾸거나 /favicon.svg?v=2 같은 버전 쿼리를 붙이고 <link> 태그를 수정하세요. 그 전에 서버와 CDN이 정말로 새 파일을 보내고 있는지 확인하세요.
먼저: 서버가 새 아이콘을 보내고 있나요?
시크릿 창에서 https://example.com/favicon.ico처럼 아이콘 URL을 직접 여세요. 거기서 이전 아이콘이 보인다면 문제는 서버 쪽입니다. CDN이나 프록시가 이전 파일을 갖고 있거나, 배포에서 파일이 교체되지 않았거나, HTML이 다른 곳을 가리키는 경우입니다. Favicon Checker는 선언된 모든 아이콘을 새로 가져와 서버가 보내는 캐시 헤더를 보여 줍니다.
URL 바꾸기
새 URL은 브라우저 캐시, CDN, 구글을 한 번에 우회합니다.
<link rel="icon" href="/favicon.ico?v=2" sizes="32x32">
<link rel="icon" href="/favicon.svg?v=2" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png?v=2">매니페스트의 아이콘도 마찬가지로 바꾸세요. /favicon.ico 자체는 브라우저가 그 경로를 그대로 요청하므로 이름을 바꿀 수 없습니다. 이 경우에는 CDN 퍼지로 처리합니다.
브라우저에서 지우기
- Chrome과 Edge: 탭에서 아이콘 URL을 열고 Ctrl+Shift+R(Mac은 Cmd+Shift+R)을 누른 다음 해당 페이지를 새로고침하세요. 아이콘은 방문 기록과 함께 저장되므로 이전 아이콘이 남아 있으면 그 사이트의 방문 기록을 삭제하거나 브라우저를 다시 시작하세요.
- Firefox: 이곳에서도 URL을 직접 열어 새로고침하는 방법이 통합니다. Firefox도 아이콘을 방문 기록과 함께 보관하므로 Library를 열고 해당 사이트를 오른쪽 클릭해 Forget About This Site를 선택하세요.
- Safari: Safari를 완전히 종료한 뒤 다시 실행하세요. Mac에서는 개발자용(Develop) → 캐시 비우기(Empty Caches)도 도움이 됩니다. 개발자용 메뉴는 설정(Settings) → 고급(Advanced)에서 켤 수 있습니다.
적절한 캐시 헤더 설정
아이콘은 거의 바뀌지 않으므로, 아이콘이 바뀔 때 URL도 함께 바꾼다면 오래 캐시해도 됩니다. 이름이나 쿼리에 버전이 들어간 파일은 1년간 캐시할 수 있습니다.
Cache-Control: public, max-age=31536000, immutable/favicon.ico처럼 경로가 고정된 아이콘은 하루에서 일주일 정도로 두면 리브랜딩 때 방문자가 몇 달씩 기다리는 일이 없습니다.
Cache-Control: public, max-age=604800홈 화면과 설치된 앱
iOS는 사용자가 사이트를 홈 화면에 추가할 때 Apple touch icon을 복사하고 이후 갱신하지 않습니다. 방문자가 바로가기를 삭제하고 다시 추가해야 합니다. 설치된 웹 앱은 다릅니다. Chrome은 설치된 앱의 매니페스트를 가끔 확인하고 바뀐 아이콘을 반영합니다. Android에서는 바꾸기 전에 사용자에게 물어볼 수 있습니다.
구글 검색
구글은 홈페이지를 다시 크롤링할 때 파비콘을 갱신하며, 며칠에서 몇 주가 걸릴 수 있습니다. Search Console에서 홈페이지의 색인 생성을 요청하면 속도를 높일 수 있습니다. 그래도 아이콘이 바뀌지 않으면 구글의 파비콘 요건에 맞는지 확인하세요.