실행 가능한 HTML 문서: 파비콘

Q: HTML에서 파비콘은 어떻게 넣나요?

아이콘 파일을 사이트에 올리고 안에 (또는 PNG나 SVG 경로)를 추가하세요. 그러면 브라우저가 탭, 북마크, 방문 기록 목록에 보여 줘요.

Q: 파비콘 크기는 얼마로 해야 하나요?

탭용으로 32×32 favicon.ico(또는 PNG), 어떤 크기로든 확대되는 SVG, iPhone 홈 화면용으로 180×180 PNG apple-touch-icon을 준비하세요. manifest가 있는 웹 앱은 192×192와 512×512 PNG도 나열해요.

Q: 파비콘이 왜 안 보이나요?

흔한 원인은 href의 잘못된 경로, 밖에 있는 , 또는 브라우저가 캐시된 예전 아이콘을 계속 보여 주는 경우예요. 아이콘 URL을 직접 열어 경로를 확인하고, 캐시를 지운 채 새로고침하거나 URL에 ?v=2 같은 버전을 붙이세요.

Q: SVG나 PNG를 파비콘으로 써도 되나요?

네. 이나 을 쓰세요. SVG는 Chrome, Edge, Firefox에서 동작하니, 지원하지 않는 브라우저를 위해 ICO나 PNG도 남겨 두세요.

Q: rel="shortcut icon"이 필요한가요?

아니요. 표준 값은 rel="icon"이에요. shortcut이라는 단어는 옛날 Internet Explorer의 흔적이고 현재 브라우저에서는 아무 효과가 없어요.

Q: 이모지를 파비콘으로 쓸 수 있나요?

네, SVG로 감싸면 돼요. 이모지가 들어 있는 요소를 담은 SVG data URI예요. 프로토타입에는 편리하지만, 이모지는 운영체제마다 다르게 보여요.

파비콘 넣는 법

아이콘을 사이트에 저장하고 <head> 안의 <link rel="icon"> 태그로 가리키세요.

<link rel="icon" href="/favicon.ico">

기본적인 사이트라면 이게 답의 전부예요. href는 .ico, .png, .svg 파일을 가리킬 수 있어요. 아래 예제는 href에 data URI로 SVG를 직접 써서 별도 파일이 필요 없어요. 다른 페이지 안의 미리보기는 브라우저 탭을 바꿀 수 없어서, 스크립트가 같은 아이콘을 가짜 탭과 세 가지 크기로 그려 줘요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bake Club</title>
  <link rel="icon" type="image/svg+xml"
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%232563eb'/%3E%3Ctext x='16' y='23' font-size='20' font-family='Arial' font-weight='700' fill='white' text-anchor='middle'%3EB%3C/text%3E%3C/svg%3E">
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .bar { background: #e5e7eb; padding: 8px 8px 0; border-radius: 8px 8px 0 0; }
    .tab { display: inline-flex; align-items: center; gap: 8px; background: #fff; border-radius: 8px 8px 0 0; padding: 8px 14px; font-size: 13px; }
    .sizes { display: flex; align-items: end; gap: 16px; margin-top: 16px; font-size: 12px; color: #6b7280; }
    .sizes div { text-align: center; }
  </style>
</head>
<body>
  <div class="bar"><div class="tab"><img id="tab-icon" width="16" height="16" alt=""><span id="tab-title"></span></div></div>
  <div class="sizes" id="sizes"></div>
  <script>
    const href = document.querySelector('link[rel="icon"]').href;
    document.getElementById('tab-icon').src = href;
    document.getElementById('tab-title').textContent = document.title;
    for (const size of [16, 32, 64]) {
      const box = document.createElement('div');
      box.innerHTML = '<img width="' + size + '" height="' + size + '" alt=""><br>' + size + 'px';
      box.querySelector('img').src = href;
      document.getElementById('sizes').append(box);
    }
  </script>
</body>
</html>

16픽셀에는 굵은 글자 하나나 단순한 도형 하나가 들어갈 자리밖에 없고, 세밀한 부분은 사라져요. 가장 작은 크기를 먼저 생각하며 아이콘을 디자인하세요. fill='%232563eb'를 다른 색으로 바꾸면(%23은 URL 인코딩된 #이에요) 모든 복사본이 바뀌어요.

준비할 파일

브라우저, 휴대폰, 앱 실행기는 각기 다른 아이콘을 찾아요. 작은 세트 하나로 모두 해결돼요.

<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.ico`	32×32	브라우저 탭, 그리고 `/favicon.ico`만 찾는 도구
`icon.svg`	제한 없음(벡터)	Chrome, Edge, Firefox에서 모든 화면 밀도에 선명한 탭
`apple-touch-icon.png`	180×180	누군가 사이트를 iPhone이나 iPad 홈 화면에 추가할 때의 아이콘
manifest 아이콘	192×192와 512×512 PNG	Android 홈 화면과 설치된 웹 앱

대부분의 브라우저는 페이지에 아이콘 링크가 없으면 사이트 루트의 /favicon.ico를 알아서 요청하기 때문에, 거기에 favicon.ico를 두면 좋은 기본값이 돼요. sizes 속성은 각 파일이 어떤 크기인지 알려 줘서 브라우저가 가장 알맞은 걸 고를 수 있게 해요. rel="icon"을 쓰세요. 예전의 rel="shortcut icon"은 브라우저가 남는 단어를 무시해서 동작할 뿐이에요.

이모지 파비콘

프로토타입이나 개인 페이지라면 이모지로 빠르게 파비콘을 만들 수 있어요. SVG <text> 요소 안에 넣으세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Emoji favicon</title>
  <link rel="icon"
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E%F0%9F%8D%AA%3C/text%3E%3C/svg%3E">
</head>
<body style="font-family: system-ui, sans-serif;">
  <p>The icon at tab size and larger:</p>
  <img id="a" width="16" height="16" alt="">
  <img id="b" width="48" height="48" alt="">
  <script>
    const href = document.querySelector('link[rel="icon"]').href;
    document.getElementById('a').src = href;
    document.getElementById('b').src = href;
  </script>
</body>
</html>

%F0%9F%8D%AA는 URL 인코딩된 쿠키 이모지예요. 이모지는 운영체제의 이모지 글꼴로 그려져서 Windows, macOS, Android에서 다르게 보이니, 실제 제품에는 디자인한 아이콘이 더 나아요.

다크 모드를 따르는 아이콘

SVG 파비콘은 prefers-color-scheme 미디어 쿼리를 포함한 자체 CSS를 담을 수 있어서, 브라우저가 어두운 테마를 쓸 때 어두운 아이콘을 밝게 바꿀 수 있어요.

<!-- icon.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    circle { fill: #111827; }
    @media (prefers-color-scheme: dark) { circle { fill: #f9fafb; } }
  </style>
  <circle cx="16" cy="16" r="14"/>
</svg>

JavaScript로 파비콘 바꾸기

알림 점이나 상태 색을 보여 주려고 파비콘을 바꾸는 사이트도 있어요. <canvas>에 새 아이콘을 그리고 링크의 href를 캔버스 이미지로 설정하세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dynamic favicon</title>
  <link rel="icon" id="icon" href="data:,">
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 6px 12px; margin-inline-end: 6px; }
    img { vertical-align: middle; margin-inline-start: 8px; }
  </style>
</head>
<body>
  <button id="on">New message</button>
  <button id="off">Clear</button>
  Current icon: <img id="preview" width="32" height="32" alt="">
  <script>
    function draw(withDot) {
      const canvas = document.createElement('canvas');
      canvas.width = canvas.height = 32;
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = '#2563eb';
      ctx.fillRect(2, 2, 28, 28);
      if (withDot) {
        ctx.fillStyle = '#dc2626';
        ctx.beginPath();
        ctx.arc(24, 8, 7, 0, Math.PI * 2);
        ctx.fill();
      }
      const url = canvas.toDataURL('image/png');
      document.getElementById('icon').href = url;
      document.getElementById('preview').src = url;
    }
    document.getElementById('on').onclick = () => draw(true);
    document.getElementById('off').onclick = () => draw(false);
    draw(false);
  </script>
</body>
</html>

Chrome이나 Firefox의 실제 페이지에서는 href가 설정될 때마다 탭 아이콘이 바뀌어요. 여기서 미리보기 이미지가 바뀌는 순간과 같아요.

자주 하는 실수

경로가 잘못됨. href="favicon.ico"는 현재 페이지 기준이라서 /blog/post에서는 깨져요. 루트 경로를 쓰세요. href="/favicon.ico"처럼요.
바꾸면 바로 보일 거라고 기대함. 브라우저는 파비콘을 강하게 캐시해요. 아이콘을 바꿨다면 캐시를 지우고 새로고침하거나 URL을 바꾸세요(/favicon.ico?v=2).
세밀한 로고를 16픽셀로 줄임. 단순하게 만드세요. 명암이 뚜렷한 글자 하나나 도형 하나면 돼요.
SVG만 있음. SVG 파비콘을 지원하지 않는 브라우저를 위해 ICO나 PNG도 두고, iOS용 apple-touch-icon도 추가하세요.
링크를 <body>에 넣음. title 태그와 다른 메타데이터와 함께 <head>에 두세요.

자주 묻는 질문

HTML에서 파비콘은 어떻게 넣나요?

아이콘 파일을 사이트에 올리고 <head> 안에 <link rel="icon" href="/favicon.ico">(또는 PNG나 SVG 경로)를 추가하세요. 그러면 브라우저가 탭, 북마크, 방문 기록 목록에 보여 줘요.

파비콘 크기는 얼마로 해야 하나요?

탭용으로 32×32 favicon.ico(또는 PNG), 어떤 크기로든 확대되는 SVG, iPhone 홈 화면용으로 180×180 PNG apple-touch-icon을 준비하세요. manifest가 있는 웹 앱은 192×192와 512×512 PNG도 나열해요.

파비콘이 왜 안 보이나요?

흔한 원인은 href의 잘못된 경로, <head> 밖에 있는 <link>, 또는 브라우저가 캐시된 예전 아이콘을 계속 보여 주는 경우예요. 아이콘 URL을 직접 열어 경로를 확인하고, 캐시를 지운 채 새로고침하거나 URL에 ?v=2 같은 버전을 붙이세요.

SVG나 PNG를 파비콘으로 써도 되나요?

네. <link rel="icon" href="/icon.svg" type="image/svg+xml">이나 <link rel="icon" href="/icon.png" type="image/png">을 쓰세요. SVG는 Chrome, Edge, Firefox에서 동작하니, 지원하지 않는 브라우저를 위해 ICO나 PNG도 남겨 두세요.

rel="shortcut icon"이 필요한가요?

아니요. 표준 값은 rel="icon"이에요. shortcut이라는 단어는 옛날 Internet Explorer의 흔적이고 현재 브라우저에서는 아무 효과가 없어요.

이모지를 파비콘으로 쓸 수 있나요?

네, SVG로 감싸면 돼요. 이모지가 들어 있는 <text> 요소를 담은 SVG data URI예요. 프로토타입에는 편리하지만, 이모지는 운영체제마다 다르게 보여요.