HTML Academy · 강의

파비콘 및 Apple Touch 아이콘

브라우저 탭과 홈 화면에 표시할 아이콘 추가하기

레슨 4/413개 단계

파비콘 및 Apple Touch 아이콘은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

파비콘이란 무엇입니까?

파비콘은 다음 위치에 표시되는 작은 아이콘입니다:

브라우저 탭
북마크 목록
브라우저 방문 기록
검색 결과(경우에 따라)

여러 탭이 열려 있을 때 사용자가 한눈에 사이트를 식별하는 데 도움이 됩니다.

기본 파비콘 링크

head 안에 link 요소를 추가해 파비콘을 설정합니다:

<head>
  <!-- SVG favicon (modern, scales at any size) -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">

  <!-- PNG fallback -->
  <link rel="icon" type="image/png" href="/favicon.png">

  <!-- Legacy ICO for Internet Explorer -->
  <link rel="shortcut icon" href="/favicon.ico">
</head>

파비콘 형식

권장하는 파비콘 형식 전략:

SVG — 벡터 형식이라 완벽하게 크기를 조정할 수 있고 파일 크기가 작습니다(먼저 사용)
PNG 32x32 — SVG를 지원하지 않는 브라우저를 위한 대체 형식
ICO — 16x16 및 32x32 크기를 포함하는 이전 형식

ICO 파일 위치

도메인 루트에 있는 favicon.ico 파일은 자동으로 가져옵니다:

<!-- Browsers request /favicon.ico automatically -->
<!-- Placing it at the domain root means no link tag is needed:
/favicon.ico  -- served without any HTML link tag
-->
<!-- But: specifying it explicitly is better: -->
<link rel="icon" href="/favicon.ico" sizes="32x32">

sizes 속성

sizes 속성은 아이콘 크기를 지정합니다:

<link rel="icon" href="/icon-16.png" sizes="16x16">
<link rel="icon" href="/icon-32.png" sizes="32x32">
<link rel="icon" href="/icon-64.png" sizes="64x64">

Apple Touch 아이콘

사용자가 사이트를 iOS 홈 화면에 추가하면 Apple Touch 아이콘이 표시됩니다:

<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Recommended size: 180x180 px -->
<!-- Used by: iOS Safari, some Android browsers -->
<!-- Apple applies rounded corners and gloss effect automatically -->
<!-- Pre-composited icon (no transparency) looks best -->

안드로이드용 마스크형 아이콘

안드로이드 PWA는 아이콘 모양을 채우는 마스크형 아이콘을 사용합니다:

<link rel="manifest" href="/manifest.json">

<!-- In manifest.json: -->
<!--
{
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}
-->

다크 모드 파비콘

다크 모드를 인식하는 SVG 파비콘을 제공합니다:

<!-- SVG favicon with dark mode support: -->
<!-- In /favicon.svg: -->
<!--
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    @media (prefers-color-scheme: dark) {
      .icon-bg { fill: white; }
      .icon-mark { fill: black; }
    }
    .icon-bg { fill: #0070f3; }
    .icon-mark { fill: white; }
  </style>
  <circle class="icon-bg" cx="16" cy="16" r="16"/>
  <text class="icon-mark" x="50%" y="60%">C</text>
</svg>
-->

PWA 아이콘을 위한 웹 앱 매니페스트

프로그레시브 웹 앱을 위한 전체 아이콘 설정:

<link rel="manifest" href="/manifest.json">

<!-- manifest.json icons array: -->
<!--
"icons": [
  { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
  { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
-->

완전한 파비콘 설정

현대적인 파비콘의 전체 구성:

<head>
  <!-- SVG: scales to any size, supports dark mode -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  <!-- PNG fallback -->
  <link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32">
  <!-- Apple home screen -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <!-- PWA manifest (for Android home screen) -->
  <link rel="manifest" href="/manifest.json">
</head>

파비콘 테스트

파비콘 설정을 확인하는 방법:

캐시된 파비콘을 지우려면 강제 새로 고침(Ctrl+Shift+R / Cmd+Shift+R)을 합니다
파비콘 검사 도구(realfavicongenerator.net)를 사용합니다
Apple Touch 아이콘은 실제 iOS 기기에서 테스트합니다
Lighthouse → PWA 감사를 통해 PWA 매니페스트를 확인합니다

빠른 확인

Apple Touch 아이콘 이미지에 권장되는 크기는 얼마입니까?

인터랙티브 레슨에서 답해보세요

복습: 파비콘

파비콘의 핵심:

SVG 파비콘 — 현대적이고 크기를 조정할 수 있으며 다크 모드를 인식합니다
PNG 32x32 — SVG를 지원하지 않는 브라우저를 위한 대체 형식
루트의 ICO — 이전 브라우저인 IE를 위한 대체 형식
apple-touch-icon 180×180 — iOS 홈 화면
웹 앱 매니페스트 — 안드로이드 PWA 아이콘(192px 및 512px)

무료로 시작

AI 튜터와 함께 HTML을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 40
레슨: 159

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“파비콘 및 Apple Touch 아이콘” 강의는 무료인가요?

네 — “파비콘 및 Apple Touch 아이콘” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“파비콘 및 Apple Touch 아이콘”에서 뭘 배우나요?

브라우저 탭과 홈 화면에 표시할 아이콘 추가하기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

HTML Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“파비콘 및 Apple Touch 아이콘” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

title과 SEO에서의 역할
meta charset viewport author 및 description
표준 URL 및 robots 메타 태그
파비콘 및 Apple Touch 아이콘

← HTML Academy(으)로 돌아가기