Favicon 생성기｜여러 크기의 ICO·PNG 일괄 생성

HTML에 한 줄도 쓰지 않고 /favicon.ico를 문서 루트에 두기만 하는 방식입니다. 브라우저가 이 경로를 암묵적으로 찾아가므로 그것만으로 표시됩니다.

your-site/
└── favicon.ico   ← 여기에 두기만 하면 됩니다(HTML 기술 불필요)

<!-- 명시적으로 쓴다면 이 한 줄로 충분합니다 -->
<link rel="icon" href="/favicon.ico" sizes="any">

ICO에 더해 PNG와 Apple Touch Icon을 준비하는, 현재 가장 일반적인 구성입니다. 데스크톱 브라우저부터 iOS 홈 화면 추가까지 두루 커버할 수 있습니다.

<link rel="icon" href="/favicon.ico" sizes="any">
<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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

홈 화면에 추가했을 때 앱처럼 실행되는 PWA에서는 site.webmanifest에 아이콘을 등록합니다. 192px와 512px이 모두 갖춰지지 않으면 설치 가능으로 판정되지 않습니다.

<!-- HTML(head 안) -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

<!-- site.webmanifest -->
{
  "name": "My Site",
  "short_name": "Site",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

SVG favicon은 해상도에 의존하지 않으며, SVG 안의 CSS로 다크 모드일 때의 색을 전환할 수 있습니다. 지원하지 않는 브라우저를 위해 ICO·PNG를 함께 기술합니다.

<!-- HTML(head 안). 위에서부터 「읽을 수 있는 것」이 사용됩니다 -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- favicon.svg(다크 모드에서 색을 반전시키는 예) -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) { path { fill: #ffffff; } }
  </style>
  <path d="M4 4h24v24H4z"/>
</svg>

아이콘을 루트 이외에 둘 때의 기술 방법과, 교체했는데도 예전 아이콘이 계속 표시될 때의 대처법입니다. Favicon은 브라우저에 강하게 캐시되므로 URL을 바꾸는 것이 가장 확실합니다.

<!-- 임의의 디렉터리에 두는 경우 경로를 명시합니다 -->
<link rel="icon" href="/assets/icons/favicon.ico?v=2" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png?v=2">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png?v=2">

<!-- 하위 디렉터리에서 공개하는 사이트(예: /docs/)는 절대 경로에 주의 -->
<link rel="icon" href="/docs/favicon.ico" sizes="any">