--- id: html-favicon title: "HTML Favicon" category: "Frontend" status: "draft" verification_status: "conceptual" canonical_id: "" aliases: ["favicon", "link rel icon", "favicon.ico", "browser tab icon", "site icon"] duplicate_of: "" source_trust_level: "B" confidence_score: 0.88 created_at: 2026-06-23 updated_at: 2026-06-23 review_reason: "" merge_history: [] tags: ["html", "web", "frontend", "w3schools", "favicon", "head"] raw_sources: ["https://www.w3schools.com/html/html_favicon.asp"] applied_in: [] github_commit: "" --- # [[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 `` element in the document's ``. [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 `` element inside the `` section (after the `` 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] ```html <!DOCTYPE html> <html> <head> <title>My Page Title

This is a Heading

This is a paragraph.

``` **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 `` element to insert a favicon within your document's head section. [S1] ## πŸ› οΈ 적용 사둀 (Applied in summary) The full HTML document with the favicon `` 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): ```html My Page Title ``` ## βš–οΈ λͺ¨μˆœ 및 μ—…λ°μ΄νŠΈ (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) - **μƒμœ„/루트:** [[HTML Tutorial]] - **κ΄€λ ¨ κ°œλ…:** [[HTML Page Title]], [[HTML Images]], [[HTML Head]], [[HTML Introduction]] - **μ°Έμ‘° λ§₯락:** Referenced when branding a page in the browser tab and bookmarks via a small icon. ## πŸ“š 좜처 (Sources) - [S1] W3Schools β€” HTML Favicon β€” https://www.w3schools.com/html/html_favicon.asp ## πŸ“ λ³€κ²½ 이λ ₯ (Change history) - 2026-06-23: Initial draft synthesized from the W3Schools "HTML Favicon" page (Astra wiki-curation, P-Reinforce v3.1 format).