브라우저 탭을 보다가 여러분의 WordPress 사이트에 여전히 일반적인 회색 지구본이나 기본 'W' 로고가 표시되는 것을 보고 짜증이 난 적이 있다면, 여러분만 그런 것이 아닙니다. 이는 '취미 프로젝트'와 사람들이 실제로 신뢰하는 브랜드를 구분 짓는 아주 작은 디테일입니다. 2026년, 사용자들은 데스크톱 탭에서 모바일 홈 화면 북마크에 이르기까지 끊김 없는 시각적 경험을 기대합니다.

WordPress '사이트 아이콘' vs. 전통적인 Favicon

WordPress는 자신만의 방식이 있습니다. 대시보드에서 favicon이라고 부르지 않고 사이트 아이콘이라고 부릅니다. 좋은 소식은 WordPress가 여러 크기를 생성하는 것과 같은 많은 힘든 작업을 자동으로 처리해준다는 것입니다. 나쁜 소식은 만약 여러분이 임의의 저해상도 PNG 파일을 업로드하면, iPhone이나 MacBook Pro와 같은 고밀도 디스플레이에서 흐릿하게 보일 것이라는 점입니다.

시작하기 전에, 정사각형 이미지가 필요합니다. 512x512 픽셀의 PNG나 SVG를 추천합니다. 로고가 직사각형이라면, 그냥 억지로 찌그러뜨리지 마세요. 단순화된 정사각형 버전을 만들어야 합니다. Stripe를 보세요. 그들의 메인 로고는 워드마크이지만, favicon은 보라색 배경에 굵고 단순화된 'S'입니다. 16x16 픽셀에서도 읽을 수 있습니다. 복잡한 로고가 있다면, Mzu favicondl과 같은 도구를 사용하여 업로드하기 전에 작은 크기에서 어떻게 보이는지 테스트해보세요.

방법 1: 현대적인 방식 (블록 테마 & 사이트 편집기)

만약 여러분이 현대적인 블록 테마(Twenty Twenty-Four나 Twenty Twenty-Five와 같은)를 사용하고 있다면, 사용자 정의하기 메뉴가 종종 숨겨져 있습니다. 2026년에 이 설정을 찾는 방법은 다음과 같습니다.

  1. WordPress 대시보드에서 외모 > 편집기로 이동합니다.
  2. 스타일 아이콘(오른쪽 상단의 반쯤 채워진 원)을 클릭합니다.
  3. 편집(연필) 아이콘을 클릭하여 스타일 설정으로 들어갑니다.
  4. 사이트 아이덴티티를 찾습니다(테마에 따라 '일반'이나 '헤더' 아래에 있을 수 있습니다).
  5. 사이트 아이콘 선택을 클릭하고 512x512 파일을 업로드합니다.

방법 2: 고전적인 방식 (사용자 정의하기)

아직 고전적인 테마를 사용하거나 Elementor와 같은 페이지 빌더를 사용하는 분들에게는, 예전 방식의 사용자 정의하기가 가장 좋은 친구입니다. 더 빠르고 직접적입니다.

  1. 외모 > 사용자 정의하기로 이동합니다.
  2. 사이트 아이덴티티 탭을 찾습니다.
  3. 사이트 아이콘 섹션까지 아래로 스크롤합니다.
  4. 이미지를 업로드합니다. WordPress는 브라우저 탭과 모바일 앱 아이콘에서 어떻게 보이는지 미리보기를 보여줄 것입니다.

변경 사항이 나타나지 않는다면, 거의 항상 캐싱 문제입니다. 일반적인 원인을 해결하려면 favicon이 보이지 않을 때에 대한 저희 가이드를 확인해보세요.

방법 3: 개발자 방식 (수동 코드)

때로는 내장된 WordPress 기능이 충분한 제어권을 제공하지 못할 때가 있습니다. 더 나은 확장성과 다크 모드 지원을 위해 최신 SVG favicon을 사용하고 싶을 수도 있습니다. 그런 경우에는 UI를 건너뛰고 코드로 바로 갑니다.

favicon 파일(ICO, PNG, SVG)을 테마 폴더(예: /wp-content/themes/your-theme/assets/favicons/)에 업로드하세요. 그런 다음, 이 코드를 functions.php 파일에 추가하세요.

function mzu_custom_favicon() {
    echo '<link rel="icon" href="' . get_stylesheet_directory_uri() . '/assets/favicons/favicon.svg" type="image/svg+xml">';
    echo '<link rel="apple-touch-icon" href="' . get_stylesheet_directory_uri() . '/assets/favicons/apple-touch-icon.png">';
}
add_action("wp_head", "mzu_custom_favicon");

이 방법은 WordPress의 자동 압축이 품질을 저해하지 않도록 하여 여러분의 favicon이 원하는 대로 정확하게 제공되도록 보장합니다.

피해야 할 일반적인 실수

저는 수백 개의 WordPress 사이트를 검토했으며, 가장 자주 보는 세 가지 실수는 다음과 같습니다.

WordPress용 favicon을 설정하는 것은 5분이면 되는 작업이지만, 사이트의 체감 품질에 큰 영향을 미칩니다. 내장된 사이트 아이콘 도구를 사용하든, 더 많은 제어를 위해 하드코딩하든, 여러분의 자산이 선명하고 올바른 크기인지 확인하세요. 먼저 로고를 적절한 형식으로 변환해야 한다면, Mzu favicondl을 사용하여 작업을 올바르게 완료하세요.