새 파비콘을 배포하고 Mac의 Safari에서 캐시를 비웠더니 탭에 새 아이콘이 떴습니다. 그런데 같은 사이트를 iPhone에서 열면 아직도 옛 회색 placeholder만 남아 있습니다. 이 문제를 해결하려면 iPhone과 Mac의 Safari 파비콘 캐시를 각각 따로 지워야 합니다. 두 기기는 각자 자체 아이콘 데이터베이스를 가지고 있고, iCloud로 동기화되지 않기 때문입니다.
iPhone과 Mac에서 Safari의 파비콘 캐시 방식이 다른 이유
Safari는 파비콘 데이터를 두 계층에 저장합니다. 하나는 일시적인 브라우저 캐시이고, 다른 하나는 탭·북마크·홈 화면의 '홈 화면에 추가' 흐름을 지원하는 영구적인 WebpageIcons 데이터베이스입니다. macOS에서는 이 데이터베이스가 ~/Library/Safari/WebpageIcons.db 경로에 존재합니다. iOS에서는 Safari의 앱 샌드박스 내부에 있어서 사용자가 직접 탐색할 수 없습니다.
두 캐시는 서로 정보를 교환하지 않습니다. Mac에서 파비콘을 업데이트해도 iPhone에는 아무런 영향을 주지 못하고, 그 반대도 마찬가지입니다. 같은 사이트가 기기에 따라 동시에 서로 다른 아이콘을 표시할 수 있는 이유가 바로 이것입니다.
사전 준비
- 사이트 루트 또는 HTML
<link rel='icon'>태그로 접근 가능한 파비콘 파일이 배포되어 있어야 합니다 - macOS에서 Safari 14 이상, iPhone에서 iOS 14 이상
- 기기당 약 2분의 시간
Mac에서 파비콘 캐시를 지우는 방법
1단계: 새 파비콘이 실제로 적용됐는지 확인
Safari를 열고 사이트에 접속한 다음 소스 보기로 (Cmd + Option + U) 페이지를 확인합니다. <link rel='icon'> 태그가 새 파일을 가리키는지 살펴봅니다. 예전 파일 경로가 그대로 하드코딩되어 있다면 아무리 캐시를 지워도 해결되지 않습니다. 올바른 태그 작성 방법은 HTML 파비콘 가이드를 참고하시기 바랍니다.
2단계: Safari의 임시 캐시 비우기
Safari → 설정 → 고급으로 이동해 메뉴바에 개발자 메뉴 표시 옵션을 활성화합니다. 그다음 개발자 → 캐시 비우기를 클릭합니다. 이렇게 하면 탭 렌더링에 사용되는 임시 캐시는 사라지지만, WebpageIcons 데이터베이스는 건드리지 않습니다.
3단계: WebpageIcons 데이터베이스를 직접 삭제
Safari를 완전히 종료합니다 (Cmd + Q). 터미널을 열고 다음 명령을 실행합니다.
rm -f ~/Library/Safari/WebpageIcons.db
rm -f ~/Library/Safari/WebpageIcons.db-shm
rm -f ~/Library/Safari/WebpageIcons.db-wal
이 파일들에는 Safari가 모든 탭과 북마크에서 표시했던 파비콘 정보가 저장되어 있습니다. 이 파일들을 삭제하면 다음 실행 시 Safari가 아이콘 데이터베이스를 처음부터 다시 빌드합니다.
4단계: Safari 재시작 후 새로 고침
Safari를 다시 열고 사이트를 불러옵니다. 새 파비콘이 몇 초 내에 탭과 북마크 표시줄에 나타나야 합니다. 그래도 예전 아이콘이 보인다면 HTML이 아직 옛 파일 경로를 가리키고 있는 것입니다.
iPhone에서 파비콘 캐시를 지우는 방법
iOS 절차는 다릅니다. Safari의 파일 시스템에 직접 접근할 수 없기 때문에, 설정에서 사이트 데이터를 지워 Safari가 강제로 새로 고침하도록 하는 방식을 사용합니다.
1단계: Safari의 웹사이트 데이터 지우기
설정 앱을 열고 Safari 항목까지 스크롤한 다음 고급 → 웹사이트 데이터를 탭합니다. 모든 웹사이트 데이터 제거를 선택합니다. 이렇게 하면 모든 사이트의 쿠키, 캐시, Safari의 터치 아이콘 저장소가 함께 삭제됩니다.
주의: 이 작업은 로그인해 둔 모든 웹사이트에서 로그아웃 처리합니다. 세션 손실 없이 파비콘 변경만 확인하고 싶다면 프라이빗 브라우징 세션을 활용하시기 바랍니다.
2단계: Safari 강제 종료
하단에서 위로 스와이프하거나(구형 iPhone의 경우 홈 버튼을 더블 클릭) 앱 전환기를 엽니다. Safari 카드를 위로 스와이프해 강제 종료한 다음 다시 열고 사이트를 불러옵니다.
3단계: 강제 새로 고침으로 캐시 우회
Safari 주소 표시줄의 새로 고침 버튼을 길게 누른 다음 Desktop 버전 요청을 탭합니다. 활성화했다가 다시 비활성화합니다. 이렇게 하면 파비콘 파일을 포함한 새 요청이 강제로 발생합니다. 다른 방법으로는 캐시를 무력화할 수 있도록 쿼리스트링을 붙이는 방법도 있습니다.
https://yoursite.com/?v=2
4단계: 홈 화면 아이콘 캐시 새로 고침
iPhone 홈 화면에 사이트를 추가해 둔 경우, 그 아이콘은 표준 파비콘이 아니라 apple-touch-icon 파일에서 가져옵니다. 이 아이콘을 새로 고치려면 홈 화면 바로 가기를 삭제했다가 다시 추가합니다. 그러면 Safari가 HTML의 <link rel='apple-touch-icon'> 태그를 다시 읽어 새 사본을 내려받습니다.
자주 겪는 함정
- iCloud는 캐시를 동기화하지 않습니다. Mac에서 캐시를 지워도 iPhone이나 iPad의 캐시에는 영향이 없습니다.
- Service worker: 사이트가 service worker를 사용 중이라면 Cache API에서 오래된 파비콘이 응답될 수 있습니다. service worker 버전을 올려 강제 새로 고침을 유도하시기 바랍니다.
- CDN 엣지 캐싱: 파비콘 파일이 CDN 엣지에 캐싱되어 있을 수 있습니다. HTML 태그의 아이콘 경로에
?v=2처럼 버전 쿼리스트링을 추가합니다. - 프라이빗 브라우징: Safari의 프라이빗 모드는 파비콘 캐시를 전혀 보관하지 않습니다. 따라서 프라이빗 모드에서 테스트해도 일반 모드와 동일한 동작은 나타나지 않습니다.
앞으로의 파비콘 캐시 문제 예방
두 기기 모두 새 아이콘이 정상적으로 표시되기 시작했다면, 콘텐츠 해시 기반 파일명을 사용해 이런 문제가 다시 발생하지 않도록 합니다.
<link rel='icon' href='/favicon.a1b2c3d4.svg' type='image/svg+xml'>
배포할 때마다 고유한 URL이 부여되므로 브라우저가 오래된 캐시 사본을 응답할 수 없습니다. 캐시 무효화 패턴에 대한 자세한 내용은 파비콘 캐시 무효화 가이드를 참고하시기 바랍니다.
rel='icon' 속성과 브라우저가 허용하는 MIME 타입에 대한 전체 레퍼런스는 WHATWG HTML Living Standard를 확인하시기 바랍니다.