튜토리얼로 돌아가기

2025년에 favicon.ico가 필요한가

2025년 favicon.ico 지원에 대한 실무 안내입니다. 최신 브라우저는 필수가 아니지만, 서버 로그 소음을 줄이고 예전 도구와 맞추려면 넣는 편이 낫습니다.

짧은 답

엄밀히 말하면 최신 브라우저(Chrome, Edge, Safari, Firefox)는 더 이상 .ico 파일이 필요하지 않습니다. 다만 실무에서는 그대로 두는 것을 강하게 권합니다.

favicon.ico가 없으면 서버 로그가 404로 가득 찹니다. 예전 봇과 RSS 리더는 HTML head를 읽지 않고 루트의 /favicon.ico를 바로 요청하는 경우가 많습니다.

2025년 권장 구성

흔한 상황을 덮는 데는 파일 3~4개면 충분합니다. 예전 형식의 수십 가지 크기를 만들 필요는 없습니다.

1. favicon.ico (32×32) – 레거시 호환과 폴백

  • 반드시 사이트 루트 디렉터리(/favicon.ico)에 두어야 합니다
  • 로그 오류를 막고 예전 도구를 지원하는 역할이 큽니다

2. icon.svg – 요즘 표준 (주력)

  • 최신 브라우저가 우선합니다
  • 크기를 아무리 키워도 선명도가 떨어지지 않습니다

3. apple-touch-icon.png (180×180) – iOS 기기

  • iPhone/iPad에서 "홈 화면에 추가"할 때 쓰입니다
  • 여러 크기가 필요 없습니다. 180×180이면 iOS 기기를 덮습니다

4. manifest.webmanifest (선택)

  • 주로 Android와 PWA 설치에 쓰입니다
  • 192×192와 512×512 PNG 아이콘을 지정합니다

구현 코드 (HTML / Nuxt Head)

가장 짧고 요즘 방식에 맞는 구성입니다.

<head>
  <!-- 1. Modern SVG (highest priority) -->
  <link rel="icon" href="/icon.svg" type="image/svg+xml">

  <!-- 2. Apple iOS icon -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <!-- 3. Traditional .ico (fallback) -->
  <!-- Note: Adding sizes="any" tells Chrome this is a bitmap, -->
  <!-- so Chrome will prefer SVG over ICO -->
  <link rel="icon" href="/favicon.ico" sizes="any">
  
  <!-- 4. Android/PWA configuration -->
  <link rel="manifest" href="/manifest.webmanifest">
</head>

Nuxt.js 프로젝트

nuxt.config.ts 또는 페이지 컴포넌트에서:

useHead({
  link: [
    { rel: 'icon', href: '/icon.svg', type: 'image/svg+xml' },
    { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' },
    { rel: 'icon', href: '/favicon.ico', sizes: 'any' },
    { rel: 'manifest', href: '/manifest.webmanifest' },
  ],
})

favicon.ico를 남겨 두는 이유

서버 로그를 깨끗하게

favicon.ico가 없으면 서버 로그가 404로 채워집니다. 봇, 크롤러, RSS 리더가 /favicon.ico를 자동으로 요청할 때마다 오류가 쌓입니다. 소음이 커지면 진짜 문제를 찾기 어려워집니다.

예전 도구와의 호환

오래된 도구, RSS 리더, 북마크 관리자, 브라우저 확장 중에는 루트의 favicon.ico를 기대하는 것이 많습니다. 최신 브라우저는 필요 없어도, 이런 도구는 HTML head를 읽지 않고 루트 경로를 바로 요청합니다.

비용은 거의 없고 이득은 큼

32×32 favicon.ico는 보통 2KB도 안 되고 유지 보수도 거의 없습니다. 깨끗한 로그와 넓은 호환이 그 비용보다 큽니다.

요즘 방식: SVG 우선

호환을 위해 favicon.ico는 남기되, 주력 파비콘은 SVG로 두는 것이 좋습니다.

  • 해상도에 묶이지 않음: 16×16부터 512×512까지 선명합니다
  • 파일이 더 작음: 같은 역할의 PNG보다 작은 경우가 많습니다
  • 오래 쓸 수 있음: 고해상도 화면과 이후 기기에서도 잘 맞습니다
  • 파일 하나: SVG 하나면 여러 PNG 크기를 대신할 수 있습니다

최신 브라우저(Chrome, Firefox, Safari, Edge)는 모두 SVG 파비콘을 지원합니다. ICO link에 sizes="any"를 두면, SVG가 있을 때 브라우저가 SVG를 우선합니다.

핵심 정리

  • .ico를 지우지 마세요: 브라우저가 쓰지 않더라도, 루트에 두면 서버 로그가 깨끗하고 예전 도구와도 맞습니다.
  • SVG가 방향입니다: SVG 파일 하나로 해상도 문제를 대부분 해결할 수 있습니다.
  • 구성은 최소한으로: 파일 3~4개(favicon.ico, icon.svg, apple-touch-icon.png, 선택적으로 manifest.webmanifest)면 흔한 상황을 덮습니다.
  • 순서가 중요합니다: SVG를 먼저 두고, ICO에는 sizes="any"를 붙이면 최신 브라우저가 더 나은 형식을 고릅니다.

정리

2025년 기준으로 최신 브라우저는 favicon.ico가 필수는 아니지만, 남겨 두는 것이 실무적으로 맞습니다. 로그 소음을 줄이고, 예전 도구와 맞추며, 비용은 거의 없습니다. SVG 파비콘과 함께 두면 지금과 이후 표준 모두에 무난합니다.

핵심은 단순함입니다. SVG 하나를 주력으로, 작은 ICO를 호환용으로, iOS용 Apple Touch Icon을 넣고, PWA가 필요하면 매니페스트를 더합니다. 수십 가지 크기를 관리하지 않아도 됩니다.