WordPress용 파비콘

WordPress는 기본적으로 WordPress 4.3에 도입된 사이트 아이콘 기능을 통해 파비콘 삽입을 처리합니다. Customizer에 이미지를 업로드하면 WordPress는 자동으로 이미지를 자르고 더 작은 변형을 생성하며 모든 페이지에 올바른 `<link rel='icon'>` 및 `<link rel='apple-touch-icon'>` 태그를 삽입합니다. 대부분의 사이트에는 플러그인이나 코드 변경이 필요하지 않습니다.

사이트 아이콘 설정에 액세스하려면 WordPress 관리 대시보드에 로그인하고 모양 > 사용자 정의로 이동하세요. 왼쪽 사이드바에서 사이트 ID를 클릭합니다. 패널 하단 근처에 사이트 아이콘 업로드 필드가 표시됩니다. 이미지 선택을 클릭하고 아이콘을 업로드한 후 메시지가 나타나면 자르고 게시를 클릭하세요. 다음 페이지가 로드되면 파비콘이 즉시 활성화됩니다.

WordPress에는 사이트 아이콘에 대한 최소 이미지 크기 512×512픽셀이 필요합니다. 해당 해상도 이상의 정사각형 PNG를 업로드하세요. WordPress는 소스에서 자동으로 더 작은 변형(16×16, 32×32, 180×180)을 생성합니다. 작은 이미지를 업로드하지 말고 WordPress가 이미지를 확대할 것이라고 기대하지 마세요. 그 결과 브라우저 탭에 흐릿한 아이콘이 표시됩니다.

PNG는 WordPress 파비콘 업로드에 권장되는 형식입니다. 플랫폼은 JPEG 및 GIF도 지원하지만 JPEG는 투명도를 지원하지 않으며 GIF는 사진 로고에 대한 압축률이 낮습니다. 투명한 배경 PNG는 어두운 모드 탭 표시줄을 포함한 모든 브라우저 테마에서 아이콘이 깔끔하게 보이도록 보장합니다.

테마가 구텐베르그 사이트 편집기(전체 사이트 편집)를 사용하는 경우 사이트 아이콘 경로가 약간 다를 수 있습니다. 모양 > 편집기 > 스타일을 살펴보거나 사이트 로고 블록 설정을 사용하세요. 일부 블록 테마는 전역 설정 패널에 파비콘 필드도 표시합니다. 기본 WordPress 기능은 동일하며 관리 UI 경로만 변경됩니다.

예를 들어 블로그와 상점 하위 디렉터리에 다른 파비콘을 제공하는 등 고급 제어를 위해 사이트 아이콘 URL을 프로그래밍 방식으로 재정의할 수 있습니다. 테마의 functions.php 또는 사이트별 플러그인: `add_filter('get_site_icon_url', function($url, $size, $blog_id) { return 'https://example.com/custom-favicon.png'; }, 10, 3);`에 추가하세요. 이는 Customizer를 완전히 우회하여 모든 URL에서 모든 아이콘을 제공할 수 있게 해줍니다.

일부 페이지 빌더 플러그인(Elementor, Divi, Beaver Builder)은 WordPress Customizer와 충돌할 수 있는 자체 파비콘 설정을 추가합니다. 페이지 빌더의 사이트 설정 패널을 확인하고 거기에서 파비콘 재정의를 제거한 다음 기본 WordPress Customizer를 통해 다시 설정하세요. 동일한 페이지에 두 개의 경쟁하는 파비콘 태그가 있으면 브라우저 간에 일관되지 않은 결과가 나타날 수 있습니다.

WordPress 다중 사이트 설치에서는 각 하위 사이트에 자체 사이트 아이콘이 개별적으로 설정되어 있어야 합니다. 네트워크 관리 설정은 하위 사이트로 전달되지 않습니다. 전체 네트워크에서 공유 파비콘을 원하는 경우 프로그래밍 방식 필터 접근 방식을 사용하고 필수 플러그인(mu-plugins)을 사용하여 네트워크 수준에서 사이트 아이콘 URL에 연결하세요.

WP Rocket, W3 Total Cache 또는 LiteSpeed ​​Cache와 같은 캐싱 플러그인은 파비콘 업데이트를 지연시킬 수 있습니다. 사이트 아이콘을 변경한 후 모든 캐시 레이어(WordPress 개체 캐시, 페이지 캐시, CDN 캐시 및 브라우저 캐시)를 지웁니다. 이전 아이콘이 지속되면 HTML의 파비콘 링크에 `?v=2`를 수동으로 추가하거나 캐시 TTL이 만료될 때까지 기다리세요.

WordPress가 올바른 파비콘 태그를 출력하고 있는지 확인하려면 브라우저에서 사이트를 마우스 오른쪽 버튼으로 클릭하고 페이지 소스 보기를 선택한 다음 `rel='icon'`를 검색하세요. 업로드된 이미지를 가리키는 favicon.ico 항목과 apple-touch-icon 항목이 모두 표시되어야 합니다. 둘 중 하나라도 누락된 경우 테마가 `wp_head()`를 재정의할 수 있습니다. 테마의 header.php에서 `<?php wp_head(); ?>`가 호출되는지 확인하세요.

Yoast SEO 및 Rank Math와 같은 타사 WordPress SEO 플러그인에는 자체 소셜 및 스키마 메타데이터가 포함되어 있지만 사이트 아이콘을 방해하지 않습니다. 그러나 WordPress가 기본 지원을 추가하기 몇 년 전에 파비콘 관련 플러그인을 설치했다면 이제 해당 플러그인이 충돌할 수 있습니다. 내장된 Customizer 옵션을 사용하기 전에 기존 파비콘 플러그인을 비활성화하세요.

WordPress.com 호스팅 사이트(자체 호스팅 WordPress.org와 반대)의 경우 파비콘 경로는 내 사이트 > 설정 > 일반 > 사이트 아이콘에 있습니다. 단계는 자체 호스팅 Customizer 흐름과 거의 동일하지만 계획에 따라 테마 편집 및 플러그인이 제한됩니다. 512×512 PNG를 업로드하고 저장합니다. WordPress.com은 모든 크기 조정 및 태그 삽입을 처리합니다.

파비콘을 설정한 후 사이트 URL을 입력하여 favicon tester를 사용하여 올바르게 작동하는지 확인하세요. 이는 아이콘이 공개적으로 액세스 가능하고 예상 경로에 나타나는지 확인합니다. 또한 best favicon size를 확인하여 WordPress가 생성하는 해상도와 PWA 지원을 위해 수동으로 추가해야 하는지 여부를 확인하세요.