무거운 유료 워드프레스 테마를 설치하고 사용자 정의하기(Customizer)를 통해 사이트 아이콘을 업로드했는데도 Safari 탭에 여전히 테마 제작자의 기본 로고가 표시된 적이 있다면, 당신만 그런 것이 아닙니다. 테마 개발자들은 종종 자신들만의 헤더 로직을 하드코딩하여 워드프레스 코어 설정을 완전히 무시하곤 합니다. 정말 짜증나는 일이죠.
GitHub를 보세요. 그들의 파비콘은 운영 체제의 다크 모드 설정에 따라 검은색과 흰색 사이를 동적으로 전환합니다. 워드프레스의 기본 이미지 업로더에만 의존해서는 이런 수준의 디테일을 절대 구현할 수 없습니다. 네이티브 앱 같은 느낌을 주려면 코드 수준에서 실제 워드프레스 테마 파비콘 커스터마이징을 파고들어야 합니다.
SVG 지원과 같은 모던 기능을 원한다면 파비콘 설정 시 워드프레스 내장 사이트 에디터를 버리는 것을 강력히 권장합니다. 자식 테마(Child Theme)의 functions.php를 통해 아이콘 스택을 하드코딩하는 것이 더 빠르고 깔끔하며, 테마 업데이트 시 브랜딩이 날아가는 것을 방지할 수 있습니다.
테마 수준 수정을 위한 사전 준비
PHP 파일 수정을 시작하기 전에 자식 테마가 활성화되어 있는지 확인하세요. 부모 테마를 직접 편집하면 다음에 업데이트를 클릭할 때 커스텀 아이콘이 모두 사라집니다. 또한 원본 이미지 파일을 서버에 직접 업로드하려면 FTP 액세스 권한이나 파일 관리자 플러그인이 필요합니다.
단계별 구현 가이드
1. 테마의 기본 출력 제거하기
먼저 워드프레스와 테마가 기본 512x512 PNG를 주입하는 것을 막아야 합니다. 이 단계를 건너뛰면 브라우저가 여러 아이콘을 다운로드하고 종종 잘못된 것을 선택합니다. 자식 테마의 functions.php를 열고 이 훅 제거 함수를 추가하세요.
add_action('init', function() {
remove_action('wp_head', 'wp_site_icon', 99);
});이 한 줄로 기본 워드프레스 사이트 아이콘 로직이 제거됩니다. (표준 업로더를 선호한다면 기본 워드프레스 파비콘 가이드를 확인하세요. 하지만 모던 SVG 기능은 포기해야 합니다).
2. 모던 아이콘 스택 생성하기
2026년에는 15가지의 다른 아이콘 크기가 필요하지 않습니다. 모던 브라우저용 SVG, Apple 기기용 180x180 PNG, 그리고 폴백용 32x32 ICO 등 세 개의 파일만 있으면 됩니다. 로고를 Mzu favicondl에 넣어 이 정확한 포맷들을 생성하세요. 다크 모드를 지원하려면 다운로드한 SVG를 텍스트 편집기로 열고 <style> 태그 안에 CSS 미디어 쿼리를 추가합니다. 이 세 개의 파일을 자식 테마 안의 /assets/ 폴더에 업로드하세요.
3. 커스텀 코드 주입하기
이제 최적화된 HTML을 wp_head 훅에 직접 주입합니다. 이렇게 하면 테마의 엉성한 코드를 우회하여 우리가 원하는 대로 아이콘이 로드되도록 보장할 수 있습니다.
add_action('wp_head', 'custom_theme_favicon_stack');
function custom_theme_favicon_stack() {
$theme_dir = get_stylesheet_directory_uri();
echo "<link rel='icon' href='" . $theme_dir . "/assets/favicon.svg' type='image/svg+xml'>\n";
echo "<link rel='apple-touch-icon' href='" . $theme_dir . "/assets/apple-touch-icon.png'>\n";
echo "<link rel='alternate icon' href='" . $theme_dir . "/assets/favicon.ico'>\n";
}get_stylesheet_directory_uri()를 사용한 것에 주목하세요. 이렇게 하면 나중에 새 도메인으로 사이트를 이전하더라도 경로가 항상 자식 테마를 가리키게 됩니다.
4. 블록 테마(FSE) 다루기
Twenty Twenty-Four와 같은 모던 풀 사이트 편집(FSE) 테마를 사용하는 경우 규칙이 약간 다릅니다. 블록 테마는 종종 parts/header.html에서 헤더를 정의합니다. wp_head 훅은 여전히 작동하지만, 일부 블록 테마는 '사이트 로고' 블록을 강제합니다. 코드가 무시된다면 사이트 에디터를 열어 사이트 로고 블록을 완전히 삭제하고 우리의 PHP 주입에만 의존해야 할 수도 있습니다.
흔히 발생하는 문제들
- 하드코딩된 헤더: 일부 오래된 ThemeForest 테마는
header.php안에 직접<link rel='shortcut icon'>을 하드코딩합니다. PHP 훅이 실패하면header.php를 자식 테마로 복사하고 문제가 되는 HTML 줄을 수동으로 삭제하세요. - 강력한 캐싱: WP Rocket과 같은 워드프레스 캐시 플러그인은 이전 HTML을 계속 유지합니다.
functions.php를 저장한 후 페이지 캐시를 지우세요. 브라우저에 여전히 이전 아이콘이 표시된다면 로컬에서 파비콘 캐시 지우기를 강제해야 합니다. - SVG MIME 타입: 보안상의 이유로 워드프레스는 기본적으로 SVG 업로드를 차단합니다. 우리는 FTP를 통해 업로드하고 테마에서 직접 링크하기 때문에 미디어 라이브러리 제한을 완전히 우회할 수 있습니다.
마무리
워드프레스 테마 파비콘 커스터마이징을 제어하는 것은 전문가의 빌드와 아마추어의 설정을 구분 짓는 요소입니다. 기본 테마 설정에 의존하면 종종 HTML이 비대해지고 다크 모드 지원이 누락됩니다. 자식 테마를 통해 깔끔한 3-파일 스택을 주입함으로써 모든 기기에서 사이트가 네이티브처럼 보이도록 보장할 수 있습니다.