WordPress에 파비콘을 추가하는 방법

WordPress 4.3부터 코어는 올바른 <link> 태그를 자르고 크기를 조정하고 삽입하는 Site Icon 기능을 제공합니다. 표준 사이트에는 플러그인이 필요하지 않습니다.

업로드된 아이콘은 미디어 라이브러리에 저장되며 프런트 엔드에서 wp_site_icon()을 통해 참조됩니다. WordPress는 게시할 때 서버측에서 다양한 크기를 생성합니다.

이 기능은 대부분의 블로거, 대행사 및 WooCommerce 상점에 대한 수동 favicon.ico 업로드를 대체합니다.

Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.

wp-admin에서 모양 → 사용자 정의 → 사이트 ID → Site Icon로 이동합니다.

Site Icon 선택을 클릭하고 최소 512×512픽셀의 정사각형 PNG를 업로드하세요. WordPress는 라이브 자르기 도구를 표시합니다. 로고마크를 정사각형 안전 영역 중앙에 배치하세요.

게시를 클릭합니다. Core는 다음 프런트엔드 페이지 로드 시 apple-touch-icon, 다양한 PNG 크기 및 메타 태그를 출력합니다.

섹션별 아이콘 또는 하위 디렉터리 브랜드의 경우 하위 테마 functions.php에서 get_site_icon_url()를 필터링하세요.

사용 사례 예: 각 하위 사이트에 고유한 표시가 필요하지만 하나의 테마를 공유하는 다중 사이트 네트워크. blog_id에 따라 다른 URL을 반환합니다.

고급 팀은 기본 사이트 아이콘 메타를 대기열에서 제거하고 header.php에서 사용자 정의 <link> 태그를 인쇄할 수 있지만 중복된 작업 코어는 이미 잘 작동하고 있습니다.

단일 블로그: Customizer를 통해 512×512 PNG를 업로드합니다. 완료 — FTP도 없고 .ico 편집도 없습니다.

WooCommerce 스토어: 동일한 흐름; 홈페이지뿐만 아니라 결제 및 계정 페이지에서도 아이콘을 확인하세요. 캐싱 플러그인은 때때로 CSS를 지연하지만 아이콘 태그를 차단하는 경우는 거의 없습니다.

헤드리스 WordPress: Site Icon 태그는 PHP로 렌더링된 페이지에만 나타납니다. Next.js 프런트 엔드는 해당 아키텍처에서 자체 <link> 태그를 선언해야 합니다.

스테이징 → 제작: 미디어 ID를 다시 업로드하거나 마이그레이션합니다. CDN 캐시 무효화를 이해하는 경우에만 절대 아이콘 URL을 하드코딩하세요.

인기 있는 SEO 플러그인도 favicon 설정을 노출할 수 있습니다. SEO 플러그인과 Site Icon를 다르게 구성하지 마세요. 하나의 진실 소스를 선택하세요.

캐싱 플러그인(WP Rocket, W3 Total Cache)은 아이콘 파일을 차단해서는 안 되지만 제거될 때까지 새 태그 없이 HTML를 캐시할 수 있습니다.

Favicon 플러그인은 WordPress 4.3 이전에도 의미가 있었습니다. 2026년에는 애니메이션 또는 예약된 아이콘 교체가 필요하지 않는 한 중복됩니다.

어떤 파일 형식을 업로드해야 합니까? PNG가 가장 안전합니다. WordPress는 JPG를 허용하지만 투명성을 잃게 됩니다.

최소 크기? 공식적으로는 512×512; 더 큰 소스는 미세하게 축소됩니다.

WordPress가 favicon.ico를 생성합니까? PNG 크기와 메타 태그를 내보냅니다. 브라우저는 호스팅이나 하위 테마를 통해 웹 루트에 실제 .ico를 배치함으로써 여전히 이점을 얻습니다.

다중 사이트: 각 사이트에는 자체 Customizer에 자체 Site Icon가 있습니다. 테마가 URL을 전역적으로 필터링하지 않는 한 네트워크 관리자는 사이트별로 설정합니다.

브라우저는 HTML와 별도로 favicon를 캐시합니다. WordPress에 게시한 후 비공개 창에서 새로 고치거나 테스트하세요.

태그를 직접 롤링하는 경우에만 아이콘 URL에 ?ver=2를 추가하세요. Site Icon URL에는 다시 업로드할 때 변경되는 쿼리 인수가 포함되어 있습니다.

HTML가 여전히 이전 첨부 파일 URL을 참조하는 경우 WordPress 개체 캐시와 CDN(Cloudflare, Jetpack Boost)을 지웁니다.

도메인을 마이그레이션한 경우 직렬화된 옵션에서 데이터베이스에서 이전 아이콘 URL을 검색하세요. 일부 가져오기 프로그램에서는 siteicon_id가 누락됩니다.

업로드 후 흐릿한 아이콘: 소스 이미지가 512×512보다 작거나 정사각형이 아닙니다. 더 큰 마스터에서 재생성합니다.

Google 결과에는 아이콘이 없습니다. Google은 자체 캐시를 사용합니다. Site Icon를 업데이트한 후 Search Console에서 재색인을 요청하세요.

데스크탑에는 아이콘이 있지만 iPhone에는 없음: iOS에는 apple-touch-icon이 필요합니다. Customizer에 초안으로 저장되었을 뿐 아니라 Site Icon가 게시되었는지 확인하세요.

로고 주변의 흰색 상자: 투명한 PNG 대신 흰색 배경으로 JPG를 업로드했습니다.

관리형 WordPress 호스트(WP Engine, Kinsta, SiteGround)는 가장자리에서 HTML를 캐시합니다. Site Icon를 변경한 후 호스트 대시보드에서 모든 캐시를 제거합니다.

Cloudflare orange-cloud 프록시는 /wp-content/uploads/ 아이콘을 캐싱하지 않고 HTML를 캐싱할 수 있습니다. 일반적으로 문제가 없지만 아이콘 첨부 URL이 변경되면 제거됩니다.

다국어 플러그인(WPML, Polylang)은 기본적으로 언어별로 Site Icon를 복제하지 않습니다. URL을 필터링하지 않는 한 하나의 아이콘은 모든 언어를 제공합니다.

기반암 또는 헤드리스 설정으로 인해 업로드 위치가 변경될 수 있습니다. CDN이 예상하는 프런트 엔드 HTML 지점에서 미디어 URL을 확인하세요.

정적 내보내기(Simply Static, WP2Static)를 제공하는 경우 아이콘 변경 후 내보내기를 다시 생성하여 오프라인 HTML가 새 첨부 파일 ID를 선택하도록 합니다.

사용자 정의 기능이 있는 사용자(일반적으로 표준 설치의 관리자 및 편집자)만 Site Icon를 변경할 수 있습니다. 저자는 승격된 권리 없이 상표를 교환할 수 없습니다.

다중 사이트에서 최고 관리자는 네트워크 전체 테마를 업로드할 수 있지만 사용자 정의 코드가 하나의 첨부 URL을 공유하지 않는 한 Site Icon는 사이트별로 유지됩니다.

모양 → 사용자 정의를 숨기는 타사 관리 테마를 감사합니다. Customizer를 다시 활성화하거나 Customizer 딥 링크 ?autofocus[section]=title_tagline을 사용해야 할 수도 있습니다.

클라이언트에게 사이트를 전달할 때 favicon 변경 사항이 미디어 라이브러리에만 있는 것이 아니라 사용자 정의에 있다는 것을 문서화하십시오. Site Icon를 할당하지 않고 거기에 PNG를 업로드하면 아무 일도 일어나지 않습니다.

WooCommerce 결제는 상점의 나머지 부분과 동일한 테마 헤드를 사용합니다. Site Icon는 장바구니 및 감사 페이지에 자동으로 표시됩니다.

프런트 엔드 템플릿을 대체하는 멤버십 플러그인은 여전히 ​​wp_head()를 호출하여 Site Icon 메타 출력을 수행해야 합니다.

화이트 라벨 클라이언트 포털은 때때로 브랜딩 후크를 제거합니다. 클라이언트가 자신의 아이콘을 업로드하는 경우 구독자 역할에서 사용자 정의 기능이 비활성화되지 않는지 확인하십시오.

이메일 템플릿은 Site Icon를 사용하지 않습니다. WooCommerce 이메일 로고는 모양 → 사용자 정의 → WooCommerce에서 별도의 설정입니다.

이전에 favicon.ico를 웹 루트에 FTP로 업로드한 경우 Site Icon는 이를 삭제하지 않습니다. 브라우저는 예측할 수 없을 정도로 한 소스를 다른 소스보다 선호할 수 있습니다.

한 가지 접근 방식을 선택하십시오. Site Icon PNG 출력에 의존하거나 기본적으로 일치하는 디자인으로 손으로 제작한 ICO를 유지하십시오. QA 후 중복 항목을 제거하세요.

header.php에 하드코딩된 링크 rel=icon이 있는 클래식 테마는 코어 Site Icon와 싸울 수 있습니다. Site Icon를 활성화할 때 수동 태그를 제거하세요.

마이그레이션 후에는 캐시를 제거하고 비공개 브라우징에서 테스트하여 어떤 아이콘이 승리하는지 확인하세요.

다음 개발자가 충돌하는 두 번째 favicon 플러그인을 추가하지 않도록 선택한 접근 방식을 Runbook에 문서화하세요.