새 프로젝트를 배포했는데 브라우저 탭에 여전히 보라색 Gatsby 로고가 떠 있다면, 그건 마치 '방금 튜토리얼을 끝냈습니다'라고 광고하는 것과 같습니다. Gatsby는 성능 면에서 뛰어나지만, 파일 기반 구조 때문에 favicon for gatsby site를 설정하는 일이 생각보다 까다로울 수 있습니다.

우리는 모두 경험해 봤을 겁니다. favicon.ico를 루트에 넣고 새로고침을 연타해도 아무 변화가 없는 상황 말이죠. 이는 Gatsby의 빌드 프로세스가 일반적인 HTML 사이트와 자산을 처리하는 방식이 다르기 때문입니다. Stripe나 GitHub처럼 깔끔한 아이콘을 구현하려면 자동화된 전략이 필요합니다.

가장 좋은 방법: gatsby-plugin-manifest 사용

2026년에도 여전히 표준은 gatsby-plugin-manifest입니다. 단순히 아이콘 하나를 추가하는 게 아니라, 안드로이드, iOS, 데스크톱 브라우저에 맞는 다양한 크기를 자동으로 생성해주기 때문입니다. 또한 PWA에 필수적인 manifest.webmanifest 파일도 만들어줍니다. 자세한 내용은 웹 매니페스트 가이드를 참고하세요.

1단계: 플러그인 설치

대부분의 Gatsby 스타터에는 포함되어 있지만, package.json에서 확인해 보세요.

npm install gatsby-plugin-manifest

2단계: gatsby-config.js 설정

최소 512x512 픽셀의 고해상도 소스 이미지를 지정해야 합니다. 플러그인이 빌드 시 이를 적절한 크기로 리사이징합니다.

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        name: '나의 개츠비 사이트',
        short_name: '개츠비',
        start_url: '/',
        background_color: '#ffffff',
        theme_color: '#663399',
        display: 'minimal-ui',
        icon: 'src/images/icon.png', // 소스 아이콘 경로
      },
    },
  ],
}

3단계: 결과 확인

gatsby build를 실행하면 public 폴더에 수많은 PNG 파일이 생깁니다. 이 자동화 방식 덕분에 어떤 기기에서도 아이콘이 선명하게 보입니다. (팁: 왜곡을 피하려면 반드시 정사각형 PNG를 사용하세요).

수동 방법: static 폴더 활용

플러그인의 처리 과정을 거치지 않고 직접 최적화한 .ico 파일이나 SVG를 사용하고 싶다면 static 폴더를 사용하세요.

static 폴더의 특징

/static 폴더에 있는 파일은 Webpack을 거치지 않고 /public으로 그대로 복사됩니다. 간단한 요구사항에는 이 방식이 가장 확실합니다.

Link 태그 추가

Gatsby의 Head API를 사용하여 HTML head에 링크 태그를 삽입합니다.

export const Head = () => (
  <>
    <link rel="icon" href="/favicon.ico">

)

주의해야 할 실수

파비콘은 사이트의 첫인상입니다. Mzu favicondl을 통해 완벽한 소스 이미지를 준비하고 전문적인 브랜드 이미지를 구축해 보세요.