사이트에 favicon을 추가했는데도 Firefox 탭에는 여전히 빈 페이지 아이콘이 표시됩니다. 꽤 흔한 문제이며, 원인은 대부분 세 가지 중 하나입니다. 캐싱 관련 특이 동작, 엄격한 파싱 규칙, 또는 단순한 경로 오류입니다. 이번에는 favicon을 다시 표시해 봅시다.
빠른 해결법: Firefox가 favicon을 다시 가져오도록 강제하기
코드를 살펴보기 전에 가장 빠른 해결책부터 시도해 보세요. Firefox는 favicon을 강하게 캐싱하며, 경우에 따라 며칠 동안 캐시를 유지합니다. favicon 캐시만 따로 삭제해 보세요.
- 새 탭을 열고
about:cache로 이동합니다. - 'Disk cache' 아래에서 'List Cache Entries'를 클릭합니다.
- 'favicon'을 검색하고 해당 사이트와 관련된 항목을 삭제합니다.
- Firefox를 다시 시작한 뒤 페이지를 새로 고칩니다.
그래도 해결되지 않으면 HTML에 지정한 favicon URL에 query string을 추가해 캐시를 완전히 우회할 수 있습니다. 예를 들어 favicon.ico?v=2처럼 지정하면 됩니다. 이렇게 하면 Firefox가 해당 favicon을 새로운 리소스로 인식합니다.
Firefox에서만 favicon이 표시되지 않는 이유
Firefox는 일부 브라우저보다 favicon 처리 규칙이 더 엄격합니다. 가장 흔한 원인은 다음과 같습니다.
- SVG 파싱 오류: Firefox는 유효한 XML을 요구합니다. namespace이 없거나 태그가 닫히지 않으면 SVG favicon을 조용히 무시합니다.
- 잘못된 MIME type: 서버가 PNG 파일에
image/x-icon을 전송하면 Firefox가 이를 거부할 수 있습니다.type속성이 실제 파일 형식과 일치하는지 확인하세요. - 상대 경로 문제:
./favicon.ico같은 경로는 중첩된 경로에서 동작하지 않을 수 있습니다. 절대 경로 또는 루트 기준 경로(/favicon.ico)를 사용하세요. - link 태그 누락: Firefox는 link 태그가 전혀 없을 때만
/favicon.ico로 대체 표시합니다. link 태그가 존재하면서 지정된 파일이 없다면 대체 동작을 하지 않습니다.
Firefox의 동작을 더 자세히 알아보려면 Firefox favicon 안내서를 참고하세요.
HTML과 서버 응답 확인하기
먼저 HTML head 안의 link 태그를 확인하세요. 다음과 같은 형태여야 합니다.
<link rel='icon' type='image/svg+xml' href='/favicon.svg'>
<link rel='icon' type='image/png' href='/favicon-32x32.png'>HTML 표준에 따르면, rel='icon' 속성은 favicon을 정의하는 표준 방법입니다. Firefox는 이 속성을 지원하지만, 파일의 무결성도 함께 확인합니다.
다음으로 Firefox의 Developer Tools(F12)를 열고 Network 탭으로 이동한 뒤 페이지를 새로고침합니다. favicon 요청을 찾아보세요. 요청이 404를 반환한다면 경로가 잘못된 것입니다. 200을 반환하는데도 아이콘이 표시되지 않는다면 파일이 손상되었거나 지원하지 않는 형식일 수 있습니다.
미리 방지하는 팁
앞으로 이런 문제를 피하려면 여러 크기를 담은 ICO 파일을 fallback으로 제공하고, 올바른 XML 헤더가 포함된 SVG를 항상 포함하세요. 절대 경로를 사용하고, 아이콘을 업데이트할 때는 version query string을 추가하는 것도 고려해 보세요. 자세한 체크리스트는 favicon이 표시되지 않는 문제 해결 가이드에서 확인할 수 있습니다.
올바른 favicon 세트를 빠르게 생성해야 한다면, Mzu favicondl에서 ICO, PNG, SVG 파일을 적절한 크기와 형식으로 만들 수 있습니다.
결론
Firefox에서 favicon이 표시되지 않는 문제는 대개 캐시 관련 문제이거나 엄격한 파싱 때문입니다. 캐시를 지우고, SVG를 검증하고, 경로를 다시 확인하세요. 이 단계들을 따르면 아이콘이 곧바로 표시될 것입니다.