새 파비콘을 배포하고 Mac의 Safari에서 캐시를 비웠더니 탭에 새 아이콘이 떴습니다. 그런데 같은 사이트를 iPhone에서 열면 아직도 옛 회색 placeholder만 남아 있습니다. 이 문제를 해결하려면 iPhone과 Mac의 Safari 파비콘 캐시를 각각 따로 지워야 합니다. 두 기기는 각자 자체 아이콘 데이터베이스를 가지고 있고, iCloud로 동기화되지 않기 때문입니다.

iPhone과 Mac에서 Safari의 파비콘 캐시 방식이 다른 이유

Safari는 파비콘 데이터를 두 계층에 저장합니다. 하나는 일시적인 브라우저 캐시이고, 다른 하나는 탭·북마크·홈 화면의 '홈 화면에 추가' 흐름을 지원하는 영구적인 WebpageIcons 데이터베이스입니다. macOS에서는 이 데이터베이스가 ~/Library/Safari/WebpageIcons.db 경로에 존재합니다. iOS에서는 Safari의 앱 샌드박스 내부에 있어서 사용자가 직접 탐색할 수 없습니다.

두 캐시는 서로 정보를 교환하지 않습니다. Mac에서 파비콘을 업데이트해도 iPhone에는 아무런 영향을 주지 못하고, 그 반대도 마찬가지입니다. 같은 사이트가 기기에 따라 동시에 서로 다른 아이콘을 표시할 수 있는 이유가 바로 이것입니다.

사전 준비

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'> 태그를 다시 읽어 새 사본을 내려받습니다.

자주 겪는 함정

앞으로의 파비콘 캐시 문제 예방

두 기기 모두 새 아이콘이 정상적으로 표시되기 시작했다면, 콘텐츠 해시 기반 파일명을 사용해 이런 문제가 다시 발생하지 않도록 합니다.

&lt;link rel='icon' href='/favicon.a1b2c3d4.svg' type='image/svg+xml'&gt;

배포할 때마다 고유한 URL이 부여되므로 브라우저가 오래된 캐시 사본을 응답할 수 없습니다. 캐시 무효화 패턴에 대한 자세한 내용은 파비콘 캐시 무효화 가이드를 참고하시기 바랍니다.

rel='icon' 속성과 브라우저가 허용하는 MIME 타입에 대한 전체 레퍼런스는 WHATWG HTML Living Standard를 확인하시기 바랍니다.