Favicon 가이드 2026: 모든 크기, 형식, 생성 방법

Favicon은 브라우저 탭, 북마크, 홈 화면, 앱 전환기에 나타나는 작은 아이콘입니다. 크기는 작지만 브랜드 인지도와 사용자 경험에 큰 영향을 미칩니다. 이 완벽한 favicon 가이드는 2026년에 정확히 무엇이 필요한지, 그 이유와 Figma 또는 프로그래밍으로 favicon을 생성하는 방법을 알려줍니다.

최소 Favicon 설정: 실제로 필요한 3개 파일

2026년에는 모든 최신 브라우저, 기기, 플랫폼을 커버하는 데 3개의 파일만 있으면 됩니다:

선택적으로 무한 확장성과 다크 모드 지원을 위해 SVG favicon을 추가할 수 있습니다. 하지만 이 세 파일만으로 Chrome, Firefox, Safari, Edge, iOS, Android를 완전히 커버합니다.

<!-- The minimal favicon setup for 2026 -->
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

완전한 Favicon 사이즈 참조

모든 favicon 사이즈, 목적, 사용처에 대한 확정적 참조 테이블입니다:

가장 일반적으로 요청되는 사이즈는 32x32(브라우저 탭), 180x180(Apple 기기), 512x512(PWA 스플래시 스크린)입니다. 이 세 가지만 제공하면 99% 이상의 사용 사례를 커버합니다.

포맷 비교: ICO vs PNG vs SVG

올바른 favicon 포맷 선택이 중요합니다. 각 포맷에는 고유한 장점과 트레이드오프가 있습니다:

권장: /favicon.ico 폴백에는 ICO, Apple Touch Icon과 웹 매니페스트 아이콘에는 PNG, 지원하는 최신 브라우저에는 선택적으로 SVG를 사용하세요.

단계별 가이드: Favicon 만들기

Figma에서

Sharp (Node.js)로 프로그래밍 생성

sharp 라이브러리를 사용하여 단일 고해상도 소스 이미지에서 favicon 생성을 자동화할 수 있습니다:

import sharp from 'sharp';

// Generate multiple sizes from a single source
const sizes = [16, 32, 48, 180, 192, 512];

async function generateFavicons(sourceFile: string) {
  for (const size of sizes) {
    await sharp(sourceFile)
      .resize(size, size, {
        fit: 'contain',
        background: { r: 0, g: 0, b: 0, alpha: 0 },
      })
      .png({ quality: 90, compressionLevel: 9 })
      .toFile(`favicon-${size}x${size}.png`);

    console.log(`Generated favicon-${size}x${size}.png`);
  }
}

generateFavicons('icon-source.png');

ICO 파일 생성에는 png-to-ico 패키지를 사용합니다:

import pngToIco from 'png-to-ico';
import { writeFileSync } from 'fs';

async function generateIco() {
  // Include 16x16, 32x32, and 48x48 in a single ICO file
  const icoBuffer = await pngToIco([
    'favicon-16x16.png',
    'favicon-32x32.png',
    'favicon-48x48.png',
  ]);
  writeFileSync('favicon.ico', icoBuffer);
  console.log('Generated favicon.ico');
}

generateIco();

완전한 빌드 스크립트

단일 소스 PNG에서 모든 필수 favicon 파일을 생성하는 완전한 Node.js 스크립트입니다:

#!/usr/bin/env node
// generate-favicons.mjs
// Usage: node generate-favicons.mjs icon-source.png

import sharp from 'sharp';
import pngToIco from 'png-to-ico';
import { writeFileSync, mkdirSync } from 'fs';

const SOURCE = process.argv[2] || 'icon-source.png';
const OUT_DIR = './public';

mkdirSync(OUT_DIR, { recursive: true });

async function main() {
  // 1. Generate PNG sizes
  const pngSizes = [
    { size: 16, name: 'favicon-16x16.png' },
    { size: 32, name: 'favicon-32x32.png' },
    { size: 48, name: 'favicon-48x48.png' },
    { size: 180, name: 'apple-touch-icon.png' },
    { size: 192, name: 'icon-192x192.png' },
    { size: 512, name: 'icon-512x512.png' },
  ];

  for (const { size, name } of pngSizes) {
    await sharp(SOURCE)
      .resize(size, size, {
        fit: 'contain',
        background: { r: 0, g: 0, b: 0, alpha: 0 },
      })
      .png({ compressionLevel: 9 })
      .toFile(`${OUT_DIR}/${name}`);
    console.log(`  Created ${name}`);
  }

  // 2. Generate ICO (combines 16, 32, 48)
  const icoBuffer = await pngToIco([
    `${OUT_DIR}/favicon-16x16.png`,
    `${OUT_DIR}/favicon-32x32.png`,
    `${OUT_DIR}/favicon-48x48.png`,
  ]);
  writeFileSync(`${OUT_DIR}/favicon.ico`, icoBuffer);
  console.log('  Created favicon.ico');

  // 3. Generate manifest.webmanifest
  const manifest = {
    name: 'Your App Name',
    short_name: 'App',
    icons: [
      { src: '/icon-192x192.png', sizes: '192x192', type: 'image/png' },
      { src: '/icon-512x512.png', sizes: '512x512', type: 'image/png', purpose: 'any maskable' },
    ],
    theme_color: '#ffffff',
    background_color: '#ffffff',
    display: 'standalone',
  };
  writeFileSync(
    `${OUT_DIR}/manifest.webmanifest`,
    JSON.stringify(manifest, null, 2)
  );
  console.log('  Created manifest.webmanifest');

  console.log('\nDone! All favicon files generated.');
}

main().catch(console.error);

HTML 마크업: 정확한 Link 태그와 Manifest

사이트의 모든 페이지 <head>에 이 태그들을 추가합니다:

<head>
  <!-- Favicon: ICO fallback for legacy browsers -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">

  <!-- Favicon: SVG for modern browsers (scalable + dark mode) -->
  <link rel="icon" href="/icon.svg" type="image/svg+xml">

  <!-- Apple Touch Icon: iOS home screen -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <!-- Web App Manifest: Android + PWA -->
  <link rel="manifest" href="/manifest.webmanifest">

  <!-- Optional: theme color for browser chrome -->
  <meta name="theme-color" content="#ffffff"
        media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#1a1a2e"
        media="(prefers-color-scheme: dark)">
</head>

루트 디렉토리에 manifest.webmanifest를 생성합니다:

{
  "name": "Your Application Name",
  "short_name": "AppName",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone",
  "start_url": "/"
}

매니페스트 파일은 Android와 PWA 환경에 어떤 아이콘을 사용할지 알려줍니다. "purpose": "any maskable" 값은 아이콘이 일반 아이콘과 Android의 적응형 아이콘 마스크 모두에서 작동하도록 합니다.

SVG로 다크 모드 Favicon 만들기

SVG favicon의 가장 강력한 기능 중 하나는 SVG 내부의 CSS prefers-color-scheme를 사용하여 사용자의 색상 테마에 적응하는 것입니다:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
  <style>
    /* Light mode (default) */
    .icon-bg { fill: #1a1a2e; }
    .icon-fg { fill: #ffffff; }

    /* Dark mode override */
    @media (prefers-color-scheme: dark) {
      .icon-bg { fill: #e0e0e0; }
      .icon-fg { fill: #1a1a2e; }
    }
  </style>

  <!-- Background circle -->
  <circle class="icon-bg" cx="64" cy="64" r="60" />

  <!-- Foreground shape (your logo/icon) -->
  <path class="icon-fg"
        d="M44 40 h40 v12 H56 v8 h24 v12 H56 v16 H44 V40z" />
</svg>

이 SVG favicon은 사용자의 OS 또는 브라우저 테마 설정에 따라 다크 버전과 라이트 버전 사이를 자동으로 전환합니다. JavaScript가 필요 없으며 순수 선언적입니다. Chrome, Firefox, Edge에서 작동합니다.

Reference this SVG in your HTML:

<!-- SVG favicon with automatic dark mode -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">

<!-- ICO fallback for browsers that don't support SVG favicons -->
<link rel="icon" href="/favicon.ico" sizes="32x32">

모든 플랫폼에서 Favicon 테스트

favicon 생성 후 모든 플랫폼에서 테스트하여 올바르게 렌더링되는지 확인합니다:

Quick checklist for verifying your favicon setup:

# Verify all favicon files exist and are accessible
curl -s -o /dev/null -w "%{http_code}" https://yoursite.com/favicon.ico
# Expected: 200

curl -s -o /dev/null -w "%{http_code}" https://yoursite.com/icon.svg
# Expected: 200

curl -s -o /dev/null -w "%{http_code}" https://yoursite.com/apple-touch-icon.png
# Expected: 200

curl -s -o /dev/null -w "%{http_code}" https://yoursite.com/manifest.webmanifest
# Expected: 200

# Validate manifest JSON
curl -s https://yoursite.com/manifest.webmanifest | python3 -m json.tool
# Should output formatted JSON without errors

자주 묻는 질문

최소 몇 개의 favicon 파일이 필요한가요?

최소 3개 파일이 필요합니다: 브라우저 탭과 레거시 지원용 favicon.ico(32x32), iOS 홈 화면 북마크용 apple-touch-icon.png(180x180), Android와 PWA 플랫폼용 manifest.webmanifest에서 참조하는 512x512 PNG. 2026년에 이 3개 파일로 기기와 브라우저의 99% 이상을 커버합니다.

favicon에 SVG와 PNG 중 어느 것을 사용해야 하나요?

둘 다 사용하세요. PNG는 Apple Touch Icon과 웹 매니페스트 아이콘에 필수입니다. SVG는 브라우저 탭 favicon으로 우수하며, 어떤 해상도로도 완벽하게 스케일링되고 CSS prefers-color-scheme를 통한 다크 모드를 지원합니다.

favicon 크기가 페이지 로딩 속도에 영향을 미치나요?

Favicon 파일은 일반적으로 매우 작고(15KB 미만) 브라우저에 의해 적극적으로 캐시되므로 페이지 로딩 속도에 미치는 영향은 무시할 수 있습니다.

다크 모드에서 favicon을 변경하려면?

@media (prefers-color-scheme: dark) 쿼리를 포함하는 <style> 블록이 포함된 SVG favicon을 사용하세요. Chrome, Firefox, Edge에서 작동합니다.

웹 매니페스트에서 maskable 아이콘의 목적은?

Maskable 아이콘은 Android의 적응형 아이콘 시스템용으로 설계되었습니다. OS가 아이콘을 다양한 형태(원형, 둥근 사각형 등)로 자릅니다. maskable 아이콘에는 추가 패딩("안전 영역")이 포함되어 마스킹 시 중요한 부분이 잘리지 않습니다.

2026년에도 favicon.ico 파일이 필요한가요?

네. 최신 브라우저가 PNG와 SVG favicon을 지원하지만, 많은 도구와 서비스가 루트 디렉토리에서 /favicon.ico를 자동으로 요청합니다. 포함하는 비용은 거의 없으며 서버 로그의 404 오류를 방지합니다.