WordPress 사이트에 파비콘 추가하는 방법: 커스터마이저, 코드, 문제 해결 완전 가이드

WordPress에 파비콘을 추가하는 데 약 30초면 충분합니다: 외모 → 사용자 정의하기 → 사이트 아이덴티티 → 사이트 아이콘으로 이동하여 512x512 PNG를 업로드하고 게시를 누르면 됩니다. 끝입니다.

하지만 이 방법이 작동하지 않거나 더 세밀한 제어가 필요하다면 계속 읽어주세요. 알아두면 좋은 몇 가지 주의사항이 있습니다.

빠른 방법: WordPress 커스터마이저

이 방법은 WordPress 4.3 이상 (2015년 출시)을 실행하는 모든 사이트에서 작동합니다. 비교적 최신 버전을 사용하고 있다면 이 옵션을 사용할 수 있습니다.

1단계: 커스터마이저 열기

• WordPress 관리자에서 외모 → 사용자 정의하기로 이동합니다
• 또는 사이트를 보는 중에 관리자 바에서 "사용자 정의하기"를 클릭합니다

2단계: 사이트 아이덴티티 찾기

• 커스터마이저 사이드바에서 사이트 아이덴티티를 클릭합니다
• 아래로 스크롤하여 사이트 아이콘을 찾습니다

3단계: 이미지 업로드

• 사이트 아이콘 선택을 클릭합니다
• 최소 512 x 512 픽셀의 PNG 이미지를 업로드합니다
• WordPress가 필요한 모든 작은 크기 (32x32, 180x180 등)를 자동으로 생성합니다
• 필요시 자르기를 하고 게시를 클릭합니다

이게 전부입니다. WordPress가 나머지를 처리합니다 — 브라우저 파비콘, Apple Touch Icon, Windows 타일 이미지용 <link> 태그를 자동으로 생성합니다.

코드 방법: 수동으로 파비콘 추가하기

커스터마이저 방식이 적합하지 않은 경우가 있습니다. 커스텀 테마를 만들고 있거나 테마가 기본 동작을 오버라이드하는 경우입니다. 코드로 추가하는 방법은 다음과 같습니다.

옵션 A: 테마에 파일 추가

파비콘 파일을 테마의 루트 디렉토리에 업로드한 다음, 테마의 functions.php에 다음 코드를 추가합니다:

function custom_favicon() {
    $favicon_url = get_stylesheet_directory_uri();
    ?>
    <link rel="icon" type="image/png" sizes="32x32" href="<?php echo $favicon_url; ?>/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="<?php echo $favicon_url; ?>/favicon-16x16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="<?php echo $favicon_url; ?>/apple-touch-icon.png">
    <?php
}
add_action('wp_head', 'custom_favicon');

옵션 B: SVG 파비콘 사용

SVG 파비콘은 완벽하게 확대/축소되며 다크 모드를 지원합니다. functions.php에 다음을 추가합니다:

function svg_favicon() {
    $favicon_url = get_stylesheet_directory_uri() . '/favicon.svg';
    ?>
    <link rel="icon" type="image/svg+xml" href="<?php echo $favicon_url; ?>">
    <link rel="icon" type="image/png" sizes="32x32" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon-32x32.png">
    <?php
}
add_action('wp_head', 'svg_favicon');

PNG 폴백은 SVG 파비콘을 아직 완전히 지원하지 않는 Safari를 위한 것입니다.

플러그인 사용 (원하는 경우)

여러 플러그인이 파비콘을 처리하지만, 솔직히 내장 커스터마이저가 대부분의 사이트에서 충분합니다. 다음이 필요한 경우 플러그인이 적합합니다:

• 페이지나 글마다 다른 파비콘
• 다른 아이콘의 A/B 테스트
• 사이트별 파비콘이 필요한 멀티사이트

인기 있는 옵션으로는 All in One Favicon과 Flavor (이전 flavicon)가 있습니다. 하지만 먼저 커스터마이저를 시도해 보세요.

WordPress 블록 테마 (전체 사이트 편집)

Twenty Twenty-Four나 Twenty Twenty-Five 같은 블록 테마를 사용하는 경우 과정이 약간 다릅니다:

1. 외모 → 편집기로 이동합니다
2. 스타일 (반원 아이콘)을 클릭합니다
3. 사이트의 글로벌 스타일로 이동합니다
4. 사이트 아이콘 설정은 여전히 외모 → 사용자 정의하기 → 사이트 아이덴티티에 있습니다

블록 테마도 여전히 파비콘에 동일한 커스터마이저를 사용합니다. WordPress는 아직 이 기능을 사이트 편집기로 이동하지 않았습니다.

권장 파비콘 파일

완벽한 호환성을 위해 다음 파일을 준비하세요:

WordPress 커스터마이저는 512x512 이미지를 업로드하면 이 중 대부분을 자동으로 처리합니다. SVG와 ICO 파일은 원하는 경우 수동으로 추가해야 합니다.

문제 해결: 파비콘이 표시되지 않는 경우

모든 캐시 삭제

WordPress 파비콘 문제는 거의 항상 캐싱이 원인입니다:

1. 브라우저 캐시: Ctrl+Shift+R (Windows) 또는 Cmd+Shift+R (Mac)으로 강력 새로고침
2. WordPress 캐시: WP Super Cache, W3 Total Cache, LiteSpeed Cache를 사용 중이라면 퍼지합니다
3. CDN 캐시: Cloudflare, Fastly 등을 사용 중이라면 파비콘 URL을 퍼지합니다
4. 시크릿 모드 시도: 캐시된 파일 없이 깨끗한 세션을 엽니다

플러그인 충돌 확인

일부 SEO 플러그인과 테마 프레임워크가 자체 파비콘 태그를 삽입합니다. 페이지 소스에서 중복된 <link rel="icon"> 태그가 보이면:

1. 페이지 소스를 봅니다 (Ctrl+U)
2. "icon" 또는 "favicon"을 검색합니다
3. 중복이 있다면 어떤 플러그인이 추가하고 있는지 확인합니다
4. 해당 플러그인의 파비콘 기능을 비활성화하거나 수동 코드를 제거합니다

테마 오버라이드 문제

일부 테마 (특히 프리미엄 테마)는 커스터마이저를 오버라이드하는 자체 파비콘 설정을 가지고 있습니다. 다음을 확인하세요:

• 테마 옵션 패널에서 파비콘 설정 확인
• 테마의 header.php에서 하드코딩된 <link rel="icon"> 태그 확인
• 테마 문서에서 파비콘 관련 안내 확인

문제 해결: Google에 잘못된 파비콘이 표시되는 경우

Google은 검색 결과에서 파비콘을 업데이트하는 데 며칠에서 몇 주가 걸릴 수 있습니다. 이를 빠르게 하는 방법은 다음과 같습니다:

Google의 파비콘 요구 사항

Google은 검색 결과에 파비콘을 표시하기 위한 특정 규칙이 있습니다:

• 48px의 배수여야 합니다 (48x48, 96x96, 144x144)
• 정사각형이어야 합니다
• 부적절하거나 성인 콘텐츠가 아니어야 합니다
• 웹사이트를 대표해야 합니다 (일반적인 아이콘이 아닌)

업데이트 속도 높이기

1. 파비콘이 정상적으로 접근 가능한지 확인합니다
2. Google Search Console을 엽니다
3. 홈페이지에 URL 검사를 사용합니다
4. 색인 생성 요청을 클릭합니다
5. 기다립니다 — 보통 1-2주 소요됩니다

문제 해결: 데스크톱에서는 보이지만 모바일에서 안 보이는 경우

모바일 브라우저는 파비콘 형식에 더 까다롭습니다:

• iOS Safari: apple-touch-icon (180x180)이 필요합니다 — 일반 파비콘은 홈 화면에 표시되지 않습니다
• Android Chrome: 홈 화면용 아이콘 참조가 포함된 manifest.json을 찾습니다
• PWA: 웹 앱 매니페스트에 192x192와 512x512 아이콘이 정의되어 있어야 합니다

WordPress 사이트에 웹 앱 매니페스트가 있다면 (일부 테마와 플러그인이 추가함), 그 안의 아이콘 경로가 올바른지 확인하세요.

멀티사이트 고려 사항

WordPress 멀티사이트를 운영하고 있나요? 각 사이트마다 별도의 파비콘이 필요합니다.

• 커스터마이저는 사이트별로 작동하므로 각 서브사이트에 고유한 아이콘을 설정할 수 있습니다
• 네트워크 수준 설정에는 기본 파비콘이 포함되어 있지 않습니다
• 네트워크 전체 기본값을 원한다면 필수 플러그인 (wp-content/mu-plugins/)의 functions.php를 통해 추가합니다

모범 사례

• 큰 사이즈로 시작: 최소 512x512를 업로드합니다 — WordPress는 축소만 하고 확대는 하지 않습니다
• PNG 사용: 투명 배경은 JPEG보다 효과적입니다
• 심플하게 유지: 파비콘은 매우 작습니다 — 복잡한 로고는 16x16에서 식별할 수 없습니다
• 브라우저 간 테스트: Favicon.im에서 설정을 확인하세요
• 파비콘 버전 관리: 업데이트 시 URL에 ?v=2를 추가하여 캐시를 무효화합니다

자주 묻는 질문

WordPress에서 파비콘을 어떻게 추가하나요?

외모 → 사용자 정의하기 → 사이트 아이덴티티 → 사이트 아이콘으로 이동하여 512x512 PNG 이미지를 업로드하고 게시를 클릭합니다. WordPress가 자동으로 필요한 모든 크기를 생성합니다.

WordPress 파비콘 권장 크기는 얼마인가요?

최소 512 x 512 픽셀을 업로드하세요. WordPress가 자동으로 32x32, 180x180 및 기타 크기를 생성합니다. Google 검색 결과의 경우 48px의 배수를 사용하세요.

WordPress 파비콘이 표시되지 않는 이유는 무엇인가요?

보통 캐싱 문제입니다. 브라우저 캐시, WordPress 캐시 플러그인, CDN 캐시를 삭제하세요. 시크릿 브라우저 창에서 시도해 보세요. 또한 파비콘 태그 중복을 유발하는 플러그인 충돌도 확인하세요.

WordPress에서 SVG 파비콘을 사용할 수 있나요?

WordPress는 보안상의 이유로 기본적으로 SVG 업로드를 지원하지 않습니다. functions.php 코드를 통해 수동으로 SVG 파비콘 지원을 추가하거나, SVG 업로드를 활성화하는 플러그인을 사용할 수 있습니다.

WordPress에서 라이트 모드와 다크 모드에 다른 파비콘을 추가하는 방법은?

prefers-color-scheme에 대한 CSS 미디어 쿼리가 내장된 SVG 파비콘을 사용하세요. 커스터마이저는 PNG/ICO 형식만 처리하므로 functions.php를 통해 SVG 파일을 수동으로 추가해야 합니다.

참고 자료

1. Site Icon - WordPress Developer Resources - WordPress 공식 문서
2. Define a favicon to show in search results - Google Search Central
3. Favicon.im - 파비콘 테스트 및 검증 도구