Files
2nd/10_Wiki/Topic_Programming/Topic_HTML/HTML_Favicon.md
T
Antigravity Agent e9cbf23ab5 docs(10_Wiki): Dev 폴더 누락분 반영 — Topic_Programming으로 통합
이전 재구성 작업에서 Dev/ 폴더가 누락되었던 것을 반영.

- Dev/Topic_Programming(중첩 폴더, 78개)은 Dev 자체 최상위 폴더들
  (Architecture/Conventions/Engineering_Intelligence 등)과 완전 중복이라 제거.
- Dev 최상위 엔지니어링 지식 폴더(Architecture/Conventions/Engineering_Intelligence/
  Failure_Library/Generalized_Principles/Language/Pattern_Catalog/Platform_Guides/
  Subsystems, 77개)는 이미 Topic_Programming/Topic_Programming에 더 최신 버전이
  존재해 중복 제거(고유 콘텐츠 1개는 예외 처리하여 이동 보존).
- Dev의 W3Schools 언어 튜토리얼 폴더(Topic_C/CPP/CSS/CSharp/HOWTO/HTML/Java/
  JavaScript/PHP/Python/SQL/W3CSS, 1201개)는 전부 Topic_Programming 하위로 이동.
- 에이전트 운영 상태(.astra/docs)는 그대로 유지, 콘텐츠 폴더만 정리.
- Topic_Programming 최종 문서 수: 2784 → 3985.
2026-07-05 00:39:13 +09:00

4.2 KiB

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit
id title category status verification_status canonical_id aliases duplicate_of source_trust_level confidence_score created_at updated_at review_reason merge_history tags raw_sources applied_in github_commit
html-favicon HTML Favicon Frontend draft conceptual
favicon
link rel icon
favicon.ico
browser tab icon
site icon
B 0.88 2026-06-23 2026-06-23
html
web
frontend
w3schools
favicon
head
https://www.w3schools.com/html/html_favicon.asp

HTML Favicon

🎯 한 줄 통찰 (One-line insight)

A favicon is a small image displayed next to the page title in the browser tab, added by placing a <link rel="icon"> element in the document's <head>. [S1]

🧠 핵심 개념 (Core concepts)

  • What a favicon is — a small image displayed next to the page title in the browser tab. [S1]
  • Design guidance — since a favicon is a small image, it should be a simple image with high contrast. [S1]
  • How to add it — use the HTML <link> element inside the <head> section (after the <title> element); favicons can be sourced from sites like favicon.cc or custom-created. [S1]
  • File placement — put the favicon in the site's root directory or an /images folder. [S1]
  • Format support — ICO, PNG, GIF, JPEG, and SVG favicon formats are supported across Edge, Chrome, Firefox, Opera, and Safari. [S1]

🧩 추출된 패턴 (Extracted patterns)

  • Favicon link pattern<link rel="icon" type="image/x-icon" href="/images/favicon.ico"> placed in <head>. [S1]
  • Head-placement pattern — the <link> goes after the <title> element. [S1]

📖 세부 내용 (Details)

A favicon is a small image displayed next to the page title in the browser tab. [S1]

Adding a favicon Favicons can be sourced from sites like favicon.cc or custom-created images. A favicon is a small image, so it should be a simple image with high contrast. Place the favicon in your site's root directory or an /images folder, then add a <link> element to your HTML <head> section after the <title> element. [S1]

<!DOCTYPE html>
<html>
<head>
  <title>My Page Title</title>
  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Supported favicon file formats The guide includes a compatibility matrix showing support across Edge, Chrome, Firefox, Opera, and Safari: [S1]

File format Edge Chrome Firefox Opera Safari
ICO Yes Yes Yes Yes Yes
PNG Yes Yes Yes Yes Yes
GIF Yes Yes Yes Yes Yes
JPEG Yes Yes Yes Yes Yes
SVG Yes Yes Yes Yes Yes

Key takeaway — use the HTML <link> element to insert a favicon within your document's head section. [S1]

🛠️ 적용 사례 (Applied in summary)

The full HTML document with the favicon <link> above is the canonical applied example from the source. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Favicon link in head (HTML):

<head>
  <title>My Page Title</title>
  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>

⚖️ 모순 및 업데이트 (Contradictions & updates)

No contradictions found in the source.

검증 상태 및 신뢰도

  • 상태: draft
  • 검증 단계: conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
  • 출처 신뢰도: B (W3Schools — widely used educational reference, not a primary standards body)
  • 신뢰 점수: 0.88
  • 중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

📚 출처 (Sources)

📝 변경 이력 (Change history)

  • 2026-06-23: Initial draft synthesized from the W3Schools "HTML Favicon" page (Astra wiki-curation, P-Reinforce v3.1 format).