튜토리얼로 돌아가기

파비콘 추가하기

HTML, Next.js, Nuxt.js, React, Vue.js, SvelteKit에 파비콘을 넣는 방법입니다. 단계별 설치 안내와 코드 예시를 담았습니다.

시작하기 전에

먼저 홈페이지에서 파비콘을 디자인한 뒤, 전체 ZIP 패키지를 다운로드하세요. ZIP에는 필요한 크기가 모두 들어 있습니다.

다운로드한 뒤 ZIP을 풉니다. 안에 파비콘 파일이 있습니다. 프로젝트의 public 디렉터리에 두세요. SvelteKit은 static, 순수 HTML은 루트 디렉터리를 씁니다.

파일이 제자리에 있으면, 사용하는 프레임워크에 맞춰 아래처럼 HTML 링크를 추가하세요.

프레임워크별 설치 가이드

순수 HTML

파비콘 파일을 사이트 루트 디렉터리에 둡니다. 정적 사이트 생성기를 쓰면 public 디렉터리에 둔 뒤, HTML 파일의 head에 다음 링크를 넣으세요.

<link rel="icon" type="image/x-icon" sizes="16x16 32x32 48x48" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="180x180" href="/favicon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

Next.js

파비콘 파일을 public 디렉터리에 둔 뒤, app/layout.tsx 또는 pages/_document.tsx에 메타데이터를 추가합니다.

// app/layout.tsx (App Router)
import type { Metadata } from 'next'

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: '/favicon.ico', sizes: '16x16 32x32 48x48' },
      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
      { url: '/favicon-48x48.png', sizes: '48x48', type: 'image/png' },
      { url: '/favicon-96x96.png', sizes: '96x96', type: 'image/png' },
      { url: '/favicon-180x180.png', sizes: '180x180', type: 'image/png' },
      { url: '/favicon-192x192.png', sizes: '192x192', type: 'image/png' },
      { url: '/favicon-512x512.png', sizes: '512x512', type: 'image/png' },
      { url: '/favicon.svg', type: 'image/svg+xml' },
    ],
    apple: [
      { url: '/apple-touch-icon.png', sizes: '180x180', type: 'image/png' },
    ],
  },
}

Pages Router에서는 next/head 컴포넌트를 쓸 수도 있습니다.

// pages/_document.tsx (Pages Router)
import Head from 'next/head'

export default function Document() {
  return (
    <Head>
      <link rel="icon" type="image/x-icon" href="/favicon.ico" />
      <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
      <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
      <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
      <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png" />
      <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
      <link rel="icon" type="image/png" sizes="180x180" href="/favicon-180x180.png" />
      <link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png" />
      <link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png" />
      <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    </Head>
  )
}

Nuxt.js

파비콘 파일을 public 디렉터리에 둔 뒤, nuxt.config.ts 또는 app.vue에서 설정합니다.

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
        { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
        { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' },
        { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
        { rel: 'icon', type: 'image/png', sizes: '48x48', href: '/favicon-48x48.png' },
        { rel: 'icon', type: 'image/png', sizes: '96x96', href: '/favicon-96x96.png' },
        { rel: 'icon', type: 'image/png', sizes: '180x180', href: '/favicon-180x180.png' },
        { rel: 'icon', type: 'image/png', sizes: '192x192', href: '/favicon-192x192.png' },
        { rel: 'icon', type: 'image/png', sizes: '512x512', href: '/favicon-512x512.png' },
        { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
      ],
    },
  },
})

app.vue에서 useHead를 쓸 수도 있습니다.

// app.vue
<script setup>
useHead({
  link: [
    { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
    { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
    { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' },
    { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
    { rel: 'icon', type: 'image/png', sizes: '48x48', href: '/favicon-48x48.png' },
    { rel: 'icon', type: 'image/png', sizes: '96x96', href: '/favicon-96x96.png' },
    { rel: 'icon', type: 'image/png', sizes: '180x180', href: '/favicon-180x180.png' },
    { rel: 'icon', type: 'image/png', sizes: '192x192', href: '/favicon-192x192.png' },
    { rel: 'icon', type: 'image/png', sizes: '512x512', href: '/favicon-512x512.png' },
    { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
  ],
})
</script>

React (Create React App / Vite)

파비콘 파일을 public 디렉터리에 둔 뒤, public/index.html을 수정합니다.

<!-- public/index.html -->
<head>
  <link rel="icon" type="image/x-icon" href="%PUBLIC_URL%/favicon.ico" />
  <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png" />
  <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png" />
  <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png" />
  <link rel="icon" type="image/png" sizes="48x48" href="%PUBLIC_URL%/favicon-48x48.png" />
  <link rel="icon" type="image/png" sizes="96x96" href="%PUBLIC_URL%/favicon-96x96.png" />
  <link rel="icon" type="image/png" sizes="180x180" href="%PUBLIC_URL%/favicon-180x180.png" />
  <link rel="icon" type="image/png" sizes="192x192" href="%PUBLIC_URL%/favicon-192x192.png" />
  <link rel="icon" type="image/png" sizes="512x512" href="%PUBLIC_URL%/favicon-512x512.png" />
  <link rel="icon" type="image/svg+xml" href="%PUBLIC_URL%/favicon.svg" />
</head>

Vue.js (Vite)

파비콘 파일을 public 디렉터리에 둔 뒤, index.html을 수정합니다.

<!-- index.html -->
<head>
  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
  <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png" />
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
  <link rel="icon" type="image/png" sizes="180x180" href="/favicon-180x180.png" />
  <link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png" />
  <link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png" />
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
</head>

SvelteKit

파비콘 파일을 static 디렉터리에 둔 뒤, src/app.html을 수정합니다.

<!-- src/app.html -->
<head>
  <link rel="icon" type="image/x-icon" href="%sveltekit.assets%/favicon.ico" />
  <link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/apple-touch-icon.png" />
  <link rel="icon" type="image/png" sizes="16x16" href="%sveltekit.assets%/favicon-16x16.png" />
  <link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon-32x32.png" />
  <link rel="icon" type="image/png" sizes="48x48" href="%sveltekit.assets%/favicon-48x48.png" />
  <link rel="icon" type="image/png" sizes="96x96" href="%sveltekit.assets%/favicon-96x96.png" />
  <link rel="icon" type="image/png" sizes="180x180" href="%sveltekit.assets%/favicon-180x180.png" />
  <link rel="icon" type="image/png" sizes="192x192" href="%sveltekit.assets%/favicon-192x192.png" />
  <link rel="icon" type="image/png" sizes="512x512" href="%sveltekit.assets%/favicon-512x512.png" />
  <link rel="icon" type="image/svg+xml" href="%sveltekit.assets%/favicon.svg" />
</head>