สร้าง Favicon

ไฟล์ favicon.ico ที่รวมไอคอนขนาด 16, 32 และ 48 พิกเซล ไอคอน PNG ขนาด 16, 32, 48, 192 และ 512 พิกเซล ไฟล์ apple-touch-icon.png ขนาด 180 พิกเซลสำหรับ iPhone และ iPad และไฟล์ site.webmanifest ที่ทำให้ Android ใช้ไอคอนขนาด 192 และ 512 พิกเซลของคุณได้ ดาวน์โหลดทีละไฟล์หรือทั้งหมดพร้อมกันเป็นไฟล์ ZIP ก็ได้

ที่โฟลเดอร์รากของเว็บไซต์ ข้างหน้าแรก เพื่อให้เข้าถึงได้ที่ที่อยู่อย่าง /favicon.ico จากนั้นวางโค้ดที่แสดงใต้ตัวอย่างลงใน <head> ของทุกหน้า เบราว์เซอร์จะค้นหา /favicon.ico เองด้วย หน้าที่ไม่มีโค้ดจึงยังแสดงไอคอนของคุณได้

เป็นสี่เหลี่ยมจัตุรัสและมีขนาดอย่างน้อย 512 × 512 พิกเซล ซึ่งเท่ากับไอคอนที่ใหญ่ที่สุด ไฟล์ SVG เหมาะที่สุดเพราะคมชัดทุกขนาด รูปที่เล็กกว่านี้ยังใช้ได้ แต่ไอคอนขนาดใหญ่จะถูกขยายและดูไม่คมชัด

ที่ขนาด 16 พิกเซล รายละเอียดเล็ก ๆ และตัวอักษรเส้นบางจะหายไป ควรใช้สัญลักษณ์ที่เรียบง่าย เช่น ตัวอักษรหนึ่งตัวหรือสัญลักษณ์ แทนโลโก้เต็มที่มีข้อความ ตั้งระยะขอบด้านในให้น้อย และเลือก “ครอปเป็นจัตุรัส” หากรูปของคุณเป็นแนวกว้าง

ไม่ รูปของคุณถูกอ่าน ปรับขนาด และบันทึกในเบราว์เซอร์บนอุปกรณ์ของคุณ ไม่เคยถูกส่งไปที่ใด

iPhone และ iPad จะทำมุมโค้งให้ไอคอนบนหน้าจอโฮมเอง และแสดงส่วนที่โปร่งใสเป็นสีดำ Apple Touch Icon จึงมีพื้นหลังทึบและมุมเหลี่ยมเสมอ โดยใช้สีพื้นหลังของคุณ หรือสีขาวหากคุณเลือกโปร่งใส