สีธีมและไอคอนแอป
ปรับแต่งสีส่วนขอบเบราว์เซอร์และไอคอนหน้าจอหลัก
สีธีมและไอคอนแอป เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
เมตาแท็กสีธีม
แท็ก <meta name="theme-color" content="#1f2937"> จะกำหนดสีแถบที่อยู่ของเบราว์เซอร์บนอุปกรณ์เคลื่อนที่ และสีแถบชื่อบน PWA สำหรับเดสก์ท็อป ช่วยให้หน้าเว็บดูเรียบร้อยและมีลักษณะเหมือนแอปโดยไม่เปลี่ยนเนื้อหาใด ๆ
<meta name="theme-color" content="#1f2937">สีธีมสำหรับโหมดมืด
กำหนดสีแยกสำหรับโหมดสว่างและโหมดมืด: <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> และแท็กที่สองซึ่งใช้สีสำหรับโหมดมืด เบราว์เซอร์จะเลือกแท็กที่ตรงกับการตั้งค่าของ OS ผู้ใช้
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">theme_color ในเว็บแมนิเฟสต์
ค่า theme_color ในเว็บแมนิเฟสต์จะกำหนดสีเมื่อแอปทำงานเป็น PWA ที่ติดตั้งแล้ว (แถบชื่อของหน้าต่างแบบเดี่ยว) โปรดตั้งค่าให้ตรงกับเมตาแท็กสีธีมในหน้าเว็บเพื่อให้สอดคล้องกัน — ไม่ว่าจะทำงานในเบราว์เซอร์หรือเป็นแอปที่ติดตั้งแล้ว อัตลักษณ์ด้านภาพจะยังคงเหมือนเดิม
ไอคอนเว็บไซต์มาตรฐาน
<link rel="icon" href="/favicon.ico"> คือไอคอนบนแท็บเบราว์เซอร์แบบดั้งเดิม แม้ชื่อจะมีคำว่า ICO แต่เบราว์เซอร์สมัยใหม่มักเลือกใช้ PNG หรือ SVG มากกว่า ICO โปรดจัดเตรียม PNG ขนาด 32x32 ผ่าน <link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png"> เพื่อให้แสดงผลได้คมชัดยิ่งขึ้น
ไอคอนเว็บไซต์ SVG
เบราว์เซอร์สมัยใหม่รองรับไอคอนเว็บไซต์แบบ SVG: <link rel="icon" type="image/svg+xml" href="/icon.svg"> คมชัดทุกขนาดและใช้ไฟล์ขนาดเล็ก เหมาะสำหรับโลโก้เวกเตอร์ และควรใช้คู่กับ PNG เป็นทางเลือกสำรองสำหรับเบราว์เซอร์ที่ไม่รองรับไอคอนเว็บไซต์แบบ SVG
ไอคอนสำหรับหน้าจอโฮมของ Apple
หน้าจอโฮมของ iOS ใช้ไอคอนสำหรับ Apple Touch: <link rel="apple-touch-icon" href="/apple-touch-icon.png"> โปรดจัดเตรียม PNG ขนาด 180x180 iOS จะไม่อ่านไอคอนจากเว็บแมนิเฟสต์เพื่อการติดตั้งบนหน้าจอโฮม จึงจำเป็นต้องมีลิงก์ไอคอนสำหรับ Apple Touch
ไอคอนในเว็บแมนิเฟสต์สำหรับ Android
การติดตั้งบน Android จะอ่านไอคอนจากอาร์เรย์ไอคอนในเว็บแมนิเฟสต์ โปรดใส่ PNG ขนาด 192x192 (หน้าจอโฮม) และ 512x512 (หน้าจอเริ่มต้นและรายการแอป) เพิ่มสำเนาสำหรับจุดประสงค์แบบปรับรูปทรงได้โดยใช้ค่า "maskable" เพื่อให้ Android ปรับรูปทรงไอคอนให้เข้ากับรูปร่างไอคอนบนหน้าจอโฮมได้ (วงกลม สี่เหลี่ยมมุมมน หรือสี่เหลี่ยม)
พื้นที่ปลอดภัยของไอคอนแบบปรับรูปทรง
ไอคอนแบบปรับรูปทรงควรวางเนื้อหาสำคัญไว้ภายในพื้นที่ปลอดภัยตรงกลาง 80% — พื้นที่รอบนอก 20% อาจถูกตัดออกตามรูปร่างหน้ากากของอุปกรณ์ ใช้เครื่องมืออย่าง maskable.app เพื่อดูตัวอย่างไอคอนภายใต้รูปร่างหน้ากากต่างๆ ระหว่างการออกแบบ
ไอคอนกระเบื้องของ Windows
สำหรับไทล์ที่ปักหมุดบน Windows 8/10: <meta name="msapplication-TileImage" content="/tile.png"> และ <meta name="msapplication-TileColor" content="#1f2937"> ปัจจุบันมีความสำคัญน้อยกว่าแพลตฟอร์มอื่น แต่ผู้ใช้ Windows ที่ปักหมุดเว็บไซต์ยังคงชื่นชอบ
ไฟล์กำหนดค่าเบราว์เซอร์
IE/Edge รุ่นเก่า: <meta name="msapplication-config" content="/browserconfig.xml"> จะชี้ไปยังไฟล์ XML ที่มีไอคอนกระเบื้องหลายขนาด ทุกวันนี้แทบไม่เกี่ยวข้องแล้ว เว็บไซต์ใหม่สามารถข้าม browserconfig.xml ได้โดยไม่มีผลกระทบ
ไอคอนหน้ากากสำหรับ Safari
แท็บที่ปักหมุดของ Safari บน macOS: <link rel="mask-icon" href="/safari-icon.svg" color="#1f2937"> SVG ควรเป็นไอคอนสีเดียว (สีจะถูกแทนที่ด้วยแอตทริบิวต์สี) ใช้เฉพาะฟีเจอร์แท็บที่ปักหมุดของ Safari บน macOS
การทดสอบไอคอน
ใช้ realfavicongenerator.net เพื่อสร้างไอคอนทุกรูปแบบจากต้นฉบับเดียว ทดสอบบนอุปกรณ์ iOS จริง (เพิ่มไปยังหน้าจอโฮม) และ Android (ติดตั้งแอปจากเมนูเบราว์เซอร์) เพื่อยืนยันว่าไอคอนถูกครอบตัดอย่างถูกต้องและไม่เป็นพิกเซลแตก
ตรวจสอบความรู้
จุดประสงค์ของไอคอนแบบปรับรูปทรงได้ในเว็บแอปแมนิเฟสต์คืออะไร
สรุป
สีธีม (พร้อมตัวแปรตามคิวรีสื่อ) จะเปลี่ยนสีแถบที่อยู่ ส่วน theme_color ในเว็บแมนิเฟสต์จะเปลี่ยนสีแถบชื่อของแอปที่ติดตั้งแล้ว ไอคอนครอบคลุมไอคอนเว็บไซต์ (SVG + PNG), ไอคอนสำหรับ Apple Touch (iOS, 180x180), ไอคอนในเว็บแมนิเฟสต์ (Android, 192 + 512 + แบบปรับรูปทรงได้), ไอคอนหน้ากากของ Safari (SVG สีเดียว) และ msapplication-TileImage (ไทล์ Windows ที่ปักหมุด) ใช้ realfavicongenerator.net เพื่อสร้างรูปแบบทั้งหมดจากต้นฉบับเดียว
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 40
- บทเรียน
- 159
คำถามที่พบบ่อย
บทเรียน “สีธีมและไอคอนแอป” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “สีธีมและไอคอนแอป” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “สีธีมและไอคอนแอป”
ปรับแต่งสีส่วนขอบเบราว์เซอร์และไอคอนหน้าจอหลัก คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “สีธีมและไอคอนแอป” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม
ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ