맞춤형 Drupal 10 또는 11 사이트를 구축해 본 개발자라면 이 상황이 익숙할 겁니다. Twig 템플릿을 완벽하게 다듬고, 복잡한 Views를 구성하고, 분류 구조를 매핑하는 데 몇 주를 보냅니다. 그런 다음 작업물을 감상하기 위해 Safari를 열었는데, 탭 표시줄에서 여전히 그 고집스러운 파란색 Drupal 물방울이 당신을 쳐다보고 있습니다.

이 기본 코어 아이콘을 없애는 것은 단순히 public 디렉토리에 이미지를 넣는 것 이상을 요구합니다. Drupal의 강력한 캐싱과 테마 상속으로 인해 이 간단해 보이는 작업이 놀랍도록 실망스러워질 수 있습니다. 이 drupal favicon setup guide에서는 코어 아이콘을 영구적으로 교체하여 2026년의 모든 기기에서 브랜드가 선명하게 보이도록 하는 정확한 단계를 안내합니다.

Red Hat이나 주요 대학과 같은 대규모 엔터프라이즈 팀이 Drupal 플랫폼을 어떻게 처리하는지 살펴보세요. 그들은 중요한 브랜딩 자산을 관리자 UI에 의존하는 일이 거의 없습니다. 대신 최신 SVG를 테마 레이어에 직접 하드코딩합니다. 우리도 바로 그 전문적인 접근 방식을 취할 것입니다.

기본 UI 방식이 실패하는 이유

Drupal은 파비콘을 변경할 수 있는 기본 제공 방법을 제공합니다. Appearance > Settings > Your Theme로 이동하면 기본 바로가기 아이콘을 선택 취소하고 사용자 정의 아이콘을 업로드할 수 있는 토글이 있습니다.

프로덕션 사이트에서는 이 방법을 사용하지 않는 것을 강력히 권장합니다.

이유가 무엇일까요? 첫째, 관리형 파일 시스템에 의존하므로 아이콘 URL이 /sites/default/files/favicon.ico와 같이 됩니다. 데이터베이스를 마이그레이션하거나 files 디렉토리를 잃어버리면 아이콘이 깨집니다. 둘째, 이 UI는 단일 레거시 ICO 파일만 허용하며 SVG 및 Apple Touch Icon과 같은 2026년의 최신 스택을 완전히 무시합니다.

전문적인 Drupal 파비콘 설정 가이드

이 작업을 제대로 수행하려면 UI를 우회하고 아이콘을 테마에 직접 주입해야 합니다. 코드를 건드리기 전에 Mzu favicondl을 사용하여 최신 아이콘 세트를 생성하세요. 선명한 SVG와 폴백 ICO가 필요합니다.

1단계: 테마에 파일 배치

공용 files 디렉토리 대신 사용자 정의 테마 내에 아이콘을 저장하세요. 정리를 위해 전용 폴더를 만들고 버전 관리를 적용합니다.

2단계: html.html.twig 재정의

Drupal 코어는 html.html.twig 템플릿을 통해 <head> 출력을 제어합니다. 테마에 이 파일이 아직 없는 경우 코어 시스템 모듈(/core/modules/system/templates/html.html.twig)에서 테마의 /templates/layout/ 디렉토리로 복사합니다.

파일을 엽니다. <head-placeholder token=...> 태그가 보일 것입니다. 그 바로 아래에 Twig의 활성 테마 경로 변수를 사용하여 최신 SVG 파비콘 링크를 하드코딩합니다.

<link rel='icon' href='{{ active_theme_path() }}/icons/favicon.svg' type='image/svg+xml'>
<link rel='alternate icon' href='{{ active_theme_path() }}/icons/favicon.ico'>
<link rel='apple-touch-icon' href='{{ active_theme_path() }}/icons/apple-touch-icon.png'>

이렇게 하면 아이콘이 코드베이스와 함께 버전 관리되며 데이터베이스 상태에 의존하지 않게 됩니다.

3단계: 코어 첨부 파일 제거

Twig 태그를 하드코딩하더라도 Drupal이 페이지 첨부 파일을 통해 기본 아이콘 태그를 주입하여 DOM에 중복 태그가 발생할 수 있습니다. 이를 제거하기 위해 your_theme.theme 파일에서 전처리 후크를 사용합니다.

/**
 * Implements hook_page_attachments_alter().
 */
function your_theme_page_attachments_alter(array &$attachments) {
  foreach ($attachments['#attached']['html_head_link'] as $key => $value) {
    if (isset($value[0]['rel']) && $value[0]['rel'] === 'icon') {
      unset($attachments['#attached']['html_head_link'][$key]);
    }
  }
}

이 스니펫은 페이지 빌드 프로세스를 가로채어 Drupal이 기본적으로 주입하려는 모든 아이콘 링크를 강제로 제거하고 깔끔한 Twig 구현만 남깁니다.

Drupal 캐시 지우기

코드를 아무리 많이 변경하더라도 캐시를 지울 때까지 Drupal은 이를 표시하지 않습니다. 렌더링 캐시는 매우 고집이 셉니다.

  1. 터미널을 열고 프로젝트 루트로 이동합니다.
  2. drush cr(Cache Rebuild)을 실행합니다.
  3. Varnish와 같은 리버스 프록시나 Cloudflare와 같은 CDN을 사용하는 경우 해당 캐시도 제거하세요.

여전히 예전의 파란 물방울이 보인다면 브라우저가 이를 붙잡고 있을 가능성이 높습니다. 로컬 브라우저의 고집을 해결하려면 파비콘 캐시 강제 지우기 가이드를 읽어보세요.

Drupal 10/11의 일반적인 함정

설정이 여전히 실패하는 경우 다음 일반적인 원인을 확인하세요.

Drupal UI와 씨름하지 마세요. 아이콘 로직을 테마의 코드베이스로 이동하면 모든 브라우저 탭에서 안정적이고 버전 관리되는 전문적인 브랜드 입지를 확보할 수 있습니다.