PricingLoginStart free
HTML Academy · บทเรียน

Favicon และ Apple Touch Icon

เพิ่มไอคอนที่ปรากฏในแท็บเบราว์เซอร์และหน้าจอหลัก

บทเรียน 4 จาก 413 ขั้นตอน

Favicon และ Apple Touch Icon เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

ไอคอนประจำเว็บไซต์คืออะไร

ไอคอนประจำเว็บไซต์คือไอคอนขนาดเล็กที่ปรากฏใน:

  • แท็บเบราว์เซอร์
  • รายการบุ๊กมาร์ก
  • ประวัติเบราว์เซอร์
  • ผลการค้นหา (บางครั้ง)

ไอคอนนี้ช่วยให้ผู้ใช้ระบุเว็บไซต์ของคุณได้อย่างรวดเร็วท่ามกลางแท็บที่เปิดอยู่หลายแท็บ

ลิงก์ไอคอนประจำเว็บไซต์พื้นฐาน

เพิ่มไอคอนประจำเว็บไซต์ด้วยองค์ประกอบลิงก์ใน head:

<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

ไอคอนสัมผัสของ Apple จะแสดงเมื่อผู้ใช้เพิ่มเว็บไซต์ของคุณไว้ที่หน้าจอโฮมของ iOS:

<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 -->

ไอคอนแบบ maskable สำหรับ Android

แอป PWA บน Android ใช้ไอคอนแบบ maskable ที่เติมเต็มรูปร่างของไอคอน:

<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

การตั้งค่าไอคอนแบบเต็มสำหรับ Progressive Web Apps:

<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)
  • ทดสอบบนอุปกรณ์ iOS จริงสำหรับไอคอนสัมผัสของ Apple
  • ตรวจสอบไฟล์กำกับ PWA ด้วย Lighthouse → การตรวจสอบ PWA

ตรวจสอบอย่างรวดเร็ว

ขนาดที่แนะนำสำหรับรูปภาพไอคอนสัมผัสของ Apple คือเท่าใด

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุปทบทวน: ไอคอนประจำเว็บไซต์

สาระสำคัญของไอคอนประจำเว็บไซต์:

  • ไอคอนประจำเว็บไซต์แบบ SVG — ทันสมัย ปรับขนาดได้ และรองรับโหมดมืด
  • PNG 32x32 — ใช้สำรองสำหรับเบราว์เซอร์ที่ไม่รองรับ SVG
  • ICO ในโฟลเดอร์ราก — ใช้สำรองสำหรับ IE รุ่นเก่า
  • apple-touch-icon 180×180 — สำหรับหน้าจอโฮมของ iOS
  • ไฟล์กำกับเว็บแอป — ไอคอน PWA บน Android (192px และ 512px)
เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส
40
บทเรียน
159
เริ่มเรียนฟรีดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “Favicon และ Apple Touch Icon” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “Favicon และ Apple Touch Icon” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “Favicon และ Apple Touch Icon”

เพิ่มไอคอนที่ปรากฏในแท็บเบราว์เซอร์และหน้าจอหลัก คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “Favicon และ Apple Touch Icon” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม

ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. title และบทบาทต่อ SEO
  2. meta charset viewport author และ description
  3. URL หลักและเมตา robots
  4. Favicon และ Apple Touch Icon
← กลับไปที่ HTML Academy