워드프레스 사용자 정의하기(Customizer)에 완벽한 512x512 PNG를 업로드하고 발행을 눌렀는데도 브라우저 탭이 전혀 업데이트되지 않는다면, 당신만 겪는 문제가 아닙니다. 그 흔한 회색 지구본 아이콘은 많은 웹사이트 런칭 시 골칫거리입니다. Stripe의 선명한 아이콘처럼 프로페셔널하게 보이고 싶지만, 워드프레스는 당신의 파일을 완전히 무시하는 것 같습니다.

가장 빠른 워드프레스 파비콘 안 보임 해결 방법부터 바로 살펴보겠습니다. 90%의 경우, 테마는 실제로 아이콘을 업데이트했지만 브라우저나 캐시 플러그인이 고집스럽게 예전 아이콘을 붙잡고 있는 것입니다.

코드를 건드리기 전에 시크릿 창에서 사이트를 열어보세요. 거기서 아이콘이 보인다면 브라우저 캐시가 범인입니다. 여전히 깨져 보인다면 캐시 플러그인(WP Rocket, LiteSpeed 등)으로 가서 전체 캐시를 삭제하세요. 브라우저는 파비콘을 매우 강력하게 캐시하며, 워드프레스 캐시 플러그인은 HTML 헤드 섹션의 스냅샷을 저장합니다.

워드프레스가 파비콘을 누락하는 이유

캐시 삭제로도 해결되지 않았다면, 2026년 현재 워드프레스가 사이트 아이콘을 어떻게 처리하는지 살펴봐야 합니다. 플랫폼은 진화했고, 예전 방식은 최신 환경에서 종종 충돌을 일으킵니다.

첫째, 풀 사이트 편집(FSE)으로의 전환입니다. 최신 블록 테마에서는 예전의 사용자 정의하기(외모 > 사용자 정의하기 > 사이트 아이덴티티)가 새로운 사이트 편집기의 '사이트 로고' 블록과 충돌하는 경우가 있습니다. 사용자 정의하기에서 아이콘을 설정했더라도 블록 테마가 헤더를 덮어쓰면 아이콘 정보가 유실됩니다.

둘째, 이미지 처리 실패입니다. 이미지를 업로드하면 워드프레스는 서버의 PHP 이미지 라이브러리를 사용하여 크롭된 버전(32x32 등)을 생성합니다. 이 과정에서 서버의 메모리가 부족해지면 워드프레스는 아무런 경고 없이 실패합니다. 첨부 파일은 저장되지만 HTML에 link 태그를 주입하지는 않습니다.

궁극적인 워드프레스 파비콘 해결책

워드프레스의 기본 인터페이스가 실패할 때는 수동으로 제어해야 할 때입니다. 어차피 내장된 크롭 기능에 의존하는 것은 위험합니다.

1. 코드로 사용자 정의하기 우회하기

가장 확실한 해결책은 워드프레스의 사이트 아이콘 기능을 완전히 우회하는 것입니다. 정확한 HTML 태그를 테마의 헤더에 직접 주입할 수 있습니다.

먼저 Mzu favicondl을 사용하여 제대로 된 아이콘 세트를 생성하세요. 결과 파일을 다운로드한 후 FTP나 미디어 라이브러리를 통해 워드프레스 wp-content/uploads 디렉토리에 직접 업로드합니다.

그런 다음 자식 테마의 functions.php 파일이나 스니펫 플러그인에 다음 코드를 추가하세요:

add_action('wp_head', 'manual_favicon_injection');
function manual_favicon_injection() {
    echo "<link rel='icon' type='image/svg+xml' href='/wp-content/uploads/favicon.svg'>\n";
    echo "<link rel='icon' type='image/png' sizes='32x32' href='/wp-content/uploads/favicon-32x32.png'>\n";
    echo "<link rel='apple-touch-icon' href='/wp-content/uploads/apple-touch-icon.png'>\n";
}

이 코드는 워드프레스가 정확한 아이콘 경로를 출력하도록 강제합니다. 테마 충돌을 우회하고 브라우저가 올바른 지침을 받도록 보장합니다.

2. 캐시 무효화 쿼리 문자열

위의 코드를 적용했는데도 크롬이 여전히 예전 아이콘을 표시한다면, 크롬 내부의 SQLite 파비콘 데이터베이스와 싸우고 있는 것입니다. 크롬은 URL이 변경되지 않는 한 새 아이콘을 거의 확인하지 않습니다.

파일 경로에 버전 쿼리 문자열을 추가하여 업데이트를 강제할 수 있습니다.

add_action('wp_head', 'versioned_favicon_injection');
function versioned_favicon_injection() {
    $ver = '1.2'; // 이 숫자를 변경하여 업데이트 강제
    echo "<link rel='icon' href='/wp-content/uploads/favicon.svg?v=" . $ver . "'>\n";
}

크롬이 ?v=1.2를 보면 완전히 새로운 파일로 취급하고 즉시 다운로드합니다.

3. 사이트 로고 블록 동기화 수정

최신 블록 테마(Twenty Twenty-Four 등)를 사용 중이라면 사이트 편집기를 확인하세요. 외모 > 편집기로 이동합니다.

헤더 템플릿을 클릭하고 사이트 로고 블록을 선택합니다. 블록 설정 사이드바에서 '사이트 아이콘으로 사용' 토글을 찾으세요. 이것이 꺼져 있으면 워드프레스가 업로드된 이미지를 브라우저 탭용으로 무시할 수 있습니다. 켜고 템플릿을 저장한 후 캐시를 삭제하세요.

4. 업로드 폴더 권한 확인

때로는 코드가 아니라 서버 설정이 문제일 수 있습니다. wp-content/uploads 폴더의 권한이 너무 엄격하면(예: 755 대신 700), 브라우저가 이미지 파일을 읽지 못하도록 차단될 수 있습니다.

향후 아이콘 문제 예방하기

거대한 512x512 PNG를 선명한 16x16 아이콘으로 리사이즈하는 것을 워드프레스에 맡기지 마세요. 내장된 PHP 리사이즈 알고리즘은 품질보다 속도를 우선시하여 브라우저 탭이 흐릿해지는 경우가 많습니다.

대신 업로드 전에 에셋을 준비하세요. 전용 도구를 사용하여 다중 크기 파비콘 ICO와 확장 가능한 SVG를 만드세요.

사이트 아이콘의 일반적인 메커니즘에 대해 더 깊이 알고 싶다면 워드프레스 파비콘 추가 방법 가이드를 확인하세요. 하지만 위의 수동 주입 방법을 고수한다면 탭 아이콘 누락 문제를 다시 해결할 일은 거의 없을 것입니다.