วิธีสร้าง Favicon สำหรับเว็บไซต์ของคุณ: คู่มือไฟล์ ICO
ไอคอนเล็กๆ ในแท็บเบราว์เซอร์ของคุณทำงานได้มากกว่าที่คุณคิด ไอคอน Fav ปรากฏในแท็บ บุ๊กมาร์ก ประวัติเบราว์เซอร์ หน้าจอหลักบนมือถือ และทางลัดบนเดสก์ท็อป ไอคอน Fav ที่หายไปทำให้เว็บไซต์ของคุณดูไม่เสร็จสมบูรณ์ แท็บที่ดีจะทำให้จดจำได้ทันทีจากแท็บที่เปิดอยู่หลายสิบแท็บ การสร้างหนึ่งรายการจะใช้เวลาประมาณห้านาทีเมื่อคุณทราบขนาดและรูปแบบที่ต้องการ
Favicon คืออะไร?
ไอคอนประจำเว็บไซต์ (ย่อมาจาก "ไอคอนรายการโปรด") คือไอคอนขนาดเล็กที่เกี่ยวข้องกับเว็บไซต์ของคุณ เบราว์เซอร์จะแสดงในแถบแท็บถัดจากชื่อหน้าของคุณ ในรายการบุ๊กมาร์ก และในประวัติเบราว์เซอร์ อุปกรณ์เคลื่อนที่จะใช้เมื่อผู้ใช้เพิ่มเว็บไซต์ของคุณลงในหน้าจอหลัก เครื่องมือค้นหาอาจแสดงในผลลัพธ์ เป็นหนึ่งในองค์ประกอบภาพที่เล็กที่สุดในไซต์ของคุณ แต่เป็นหนึ่งในองค์ประกอบที่มองเห็นได้บ่อยที่สุด
ขนาด Favicon ที่จำเป็น
บริบทที่ต่างกันจะแสดงไอคอน Fav ของคุณในขนาดที่ต่างกัน เพื่อให้ครอบคลุมทุกกรณีการใช้งาน คุณต้องมีหลายเวอร์ชัน:
16x16 พิกเซล — แท็บเบราว์เซอร์ นี่คือขนาด favicon แบบคลาสสิกและเป็นเวอร์ชันที่เล็กที่สุดที่คุณต้องการ 32x32 พิกเซล — ทางลัดแถบงาน แท็บเบราว์เซอร์รุ่นใหม่บนจอแสดงผล DPI สูง 48x48 พิกเซล — ทางลัดบนเดสก์ท็อป Windows และไอคอนไซต์
180x180 พิกเซล — ไอคอนแอปเปิ้ลทัช นี่คือสิ่งที่ iOS ใช้เมื่อมีคนเพิ่มเว็บไซต์ของคุณลงในหน้าจอหลัก เป็นขนาดมือถือที่สำคัญที่สุด 192x192 พิกเซล — ไอคอนหน้าจอหลักของ Android Chrome และไอคอน PWA (Progressive Web App) 512x512 พิกเซล - หน้าจอเริ่มต้นของ PWA และกล่องโต้ตอบการติดตั้ง Android
อธิบายรูปแบบ Favicon
รูปแบบ ICO: รูปแบบ favicon ดั้งเดิมและเป็นรูปแบบเดียวที่ใช้งานได้ทุกที่ รวมถึงเบราว์เซอร์รุ่นเก่าและ Internet Explorer ไฟล์ ICO สามารถรวมหลายขนาดเป็นไฟล์เดียวได้ (โดยทั่วไปคือ 16x16, 32x32 และ 48x48) เพื่อความเข้ากันได้สูงสุด ทุกเว็บไซต์ควรมีไฟล์ favicon.ico ในไดเร็กทอรีราก ที่ ตัวแปลง PNG เป็น ICO บน iformat.io ทำให้การสร้างสิ่งหนึ่งเป็นเรื่องง่าย
รูปแบบ PNG: ทางเลือกที่ทันสมัย ไอคอน PNG จะสร้างได้ง่ายกว่า (หนึ่งภาพต่อไฟล์) และรองรับความโปร่งใสเต็มรูปแบบ เบราว์เซอร์สมัยใหม่ทั้งหมดรองรับไอคอน PNG ข้อเสียคือคุณต้องมีไฟล์แยกกันสำหรับแต่ละขนาด และเบราว์เซอร์รุ่นเก่าๆ อาจไม่รองรับไฟล์เหล่านี้
รูปแบบ SVG: ตัวเลือกใหม่ล่าสุด เนื่องจาก SVG เป็นรูปแบบเวกเตอร์ ไฟล์เดียวจึงปรับขนาดได้อย่างสมบูรณ์แบบทุกขนาด ไม่มีพิกเซล และไม่มีหลายไฟล์ ไอคอน SVG ได้รับการสนับสนุนโดย Chrome, Firefox และ Edge แต่ไม่รองรับโดย Safari (ณ ต้นปี 2569) ไอคอน SVG ยังรองรับการปรับโหมดมืดผ่านการสืบค้นสื่อ CSS ซึ่ง PNG และ ICO ไม่สามารถทำได้
ขั้นตอนที่ 1: ออกแบบไอคอนของคุณ
กฎที่สำคัญที่สุดของการออกแบบ favicon: ทำให้เรียบง่าย ไอคอนของคุณจะแสดงขนาดเล็กเพียง 16x16 พิกเซล ซึ่งเป็นตารางที่มีขนาดเพียง 256 สี่เหลี่ยมจัตุรัส รายละเอียดเล็กๆ น้อยๆ เส้นบางๆ และข้อความเล็กๆ จะไม่สามารถอ่านได้ในขนาดนั้น ไอคอน Fav ที่ดีที่สุดคือรูปร่างที่หนาและจดจำได้ง่ายและมีคอนทราสต์สูง
ใช้โลโก้ของคุณหากใช้งานได้ในขนาดที่เล็ก บริษัทหลายแห่งใช้เพียงอักษรตัวแรกของชื่อหรือเครื่องหมายโลโก้แบบย่อ หลีกเลี่ยงรูปถ่าย เพราะพวกมันกลายเป็นหยดที่ไม่สามารถจดจำได้เมื่อมีขนาด 16x16 สีทึบและรูปทรงเรขาคณิตที่เรียบง่ายทำงานได้ดีที่สุด ทดสอบการออกแบบของคุณโดยดูที่ขนาด 16x16 พิกเซลก่อนดำเนินการ
ขั้นตอนที่ 2: สร้างไฟล์ ICO
เริ่มต้นด้วยรูปภาพ PNG สี่เหลี่ยมจัตุรัสที่มีขนาดอย่างน้อย 512x512 พิกเซล แหล่งที่มาที่ใหญ่กว่าจะให้ผลลัพธ์ที่สะอาดยิ่งขึ้นเมื่อลดขนาดลง ใช้ เครื่องมือแปลงไฟล์ PNG เป็น ICO เพื่อสร้างไฟล์ ICO ของคุณ ตัวแปลงสร้าง ICO หลายขนาดที่มีเวอร์ชัน 16x16, 32x32 และ 48x48 — ทั้งหมดนี้มาจากอิมเมจต้นฉบับเดียวของคุณ
หากรูปภาพต้นฉบับของคุณเป็น JPG (เช่น โลโก้ที่ส่งออกจากเครื่องมือออกแบบ) ให้ใช้ เครื่องมือแปลงไฟล์ JPG เป็น ICO แทน. สำหรับโลโก้เวกเตอร์ในรูปแบบ SVG จะต้อง เครื่องมือแปลงไฟล์ SVG เป็น ICO ให้ผลลัพธ์ที่คมชัดที่สุดเนื่องจากแสดงเวกเตอร์ตามขนาดเป้าหมายแต่ละขนาด
ขั้นตอนที่ 3: เพิ่มโค้ด HTML
วางไฟล์ favicon.ico ของคุณในไดเร็กทอรีรากของเว็บไซต์ของคุณ เบราว์เซอร์ส่วนใหญ่จะค้นหามันโดยอัตโนมัติที่ /favicon.ico แม้ว่าจะไม่มีแท็ก HTML ก็ตาม แต่เพื่อการควบคุมที่ชัดเจนและรองรับทุกรูปแบบ ให้เพิ่มแท็กเหล่านี้ภายใน HTML ของคุณ
<head> ส่วน:<link rel="icon" type="image/x-icon" href="/favicon.ico"> — ไอคอนไอคอน ICO แบบคลาสสิก <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> — PNG favicon สำหรับเบราว์เซอร์สมัยใหม่ <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> — ไอคอนหน้าจอหลักของอุปกรณ์ Appleขั้นตอนที่ 4: สร้างไอคอน Apple Touch และไอคอน Android
ไอคอน Apple Touch (180x180 PNG) จะปรากฏขึ้นเมื่อผู้ใช้ iOS เพิ่มเว็บไซต์ของคุณลงในหน้าจอหลัก สร้างไอคอน PNG เวอร์ชัน 180x180 พิกเซล โดยมีช่องว่างรอบขอบ iOS จะใช้มุมโค้งมนของตัวเอง ตั้งชื่อเป็น apple-touch-icon.png และอ้างอิงใน HTML ของคุณ
สำหรับ Android และ Progressive Web Apps คุณต้องมีไอคอน PNG ขนาด 192x192 และ 512x512 โดยทั่วไปจะอ้างอิงถึงไฟล์ Manifest ของเว็บแอป (manifest.json หรือ site.webmanifest) ไฟล์ Manifest ยังช่วยให้คุณตั้งชื่อแอป สีของธีม และโหมดการแสดงผลเมื่อผู้ใช้ติดตั้งไซต์ของคุณเป็นแอป
ข้อผิดพลาด Favicon ทั่วไป
ใช้รายละเอียดมากเกินไป: โลโก้ที่ซับซ้อนซึ่งมีเส้นบางๆ และข้อความขนาดเล็กดูดีที่ 200px แต่กลายเป็นรอยเปื้อนที่อ่านไม่ออกที่ 16px ลดความซับซ้อนอย่างไร้ความปรานี ลืมโหมดมืด: หากไอคอน Fav ของคุณใช้สีเข้มบนพื้นหลังโปร่งใส ไอคอนนั้นจะมองไม่เห็นในเบราว์เซอร์ที่มีแถบแท็บสีเข้ม ลองเพิ่มเส้นขอบสีอ่อนหรือใช้ไอคอน FavG กับ CSS ในโหมดมืด
ไม่ได้ทดสอบที่ขนาดจริง: ดูตัวอย่าง favicon ของคุณที่ขนาด 16x16 ในแท็บเบราว์เซอร์จริงเสมอ สิ่งที่ดูดีในเครื่องมือออกแบบของคุณเมื่อซูม 400% อาจใช้งานไม่ได้ในขนาดจริง การข้ามไฟล์ ICO: แม้ว่าไอคอน PNG favic จะทำงานในเบราว์เซอร์สมัยใหม่ แต่การมี favicon.ico ในไดเร็กทอรีรากของคุณจะช่วยรับประกันความเข้ากันได้กับเบราว์เซอร์และโปรแกรมรวบรวมข้อมูลทุกตัว รวมถึงระบบเดิมด้วย
ทดสอบ Favicon ของคุณ
หลังจากอัปโหลดไฟล์ favicon และเพิ่ม HTML แล้ว ให้ทดสอบกับเบราว์เซอร์หลายตัว: Chrome, Firefox, Safari และ Edge เป็นอย่างน้อย ตรวจสอบว่าไอคอนปรากฏอย่างถูกต้องในแท็บ ในบุ๊กมาร์ก (บุ๊กมาร์กหน้าและยืนยัน) และบนมือถือ (เพิ่มไปยังหน้าจอหลักทั้งบน iOS และ Android) แคชของเบราว์เซอร์อาจรุนแรงกับไอคอน Fav หากคุณไม่เห็นไอคอนใหม่ ให้ลองล้างแคชหรือเปิดหน้าต่างที่ไม่ระบุตัวตน
หากคุณต้องการไปอีกทางหนึ่ง — แยกไอคอนออกจากไฟล์ ICO ที่มีอยู่ — เครื่องมือแปลงไฟล์ ICO เป็น PNG แยกภาพที่ฝังไว้ สิ่งนี้มีประโยชน์เมื่อคุณต้องการอัปเดต favicon แต่มีเฉพาะไฟล์ ICO เท่านั้น ไม่ใช่อาร์ตเวิร์กต้นฉบับ
ไอคอน Fav ที่เหมาะสมจะใช้เวลาห้านาทีในการสร้าง แต่จะทำให้เว็บไซต์ของคุณมีรูปลักษณ์ที่สวยงามและเป็นมืออาชีพ เริ่มต้นด้วยการออกแบบที่เรียบง่ายและโดดเด่น สร้างไฟล์ ICO ของคุณด้วยตัวแปลงออนไลน์ เพิ่มแท็ก HTML และทดสอบข้ามเบราว์เซอร์ ไซต์ของคุณจะดูสมบูรณ์ — และผู้ใช้ของคุณจะสามารถค้นหาแท็บของคุณได้จากหลายสิบแท็บที่พวกเขาเปิดไว้