บทความ
สร้าง Favicon จาก PNG
Favicon คือกราฟิกขนาดเล็กที่เบราว์เซอร์แสดงในแท็บ บุ๊กมาร์ก และรายการประวัติ การทำให้ถูกต้องต้องมากกว่าการปรับขนาดโลโก้: รูปแบบ .ico บรรจุหลายความละเอียดในไฟล์เดียว เบราว์เซอร์สมัยใหม่ต้องการ PNG อุปกรณ์มือถือมี apple-touch-icon ของตัวเอง และ web app manifest ต้องการชุดไอคอนของตัวเอง บทความนี้ครอบคลุมแต่ละส่วนและอธิบายวิธีสร้างชุดทั้งหมดจาก PNG ต้นฉบับเดียว
Favicon คืออะไรและเบราว์เซอร์ใช้งานที่ใด
คำว่า favicon เป็นการย่อของ "favorite icon" เบราว์เซอร์แสดงครั้งแรกในแถบที่อยู่ใน Internet Explorer 5 (1999) จากนั้นนำมาใช้กับบุ๊กมาร์ก วันนี้ปรากฏในแท็บเบราว์เซอร์ แถบบุ๊กมาร์ก ประวัติการท่องเว็บ หน้าแท็บใหม่ในบางเบราว์เซอร์ และแถบงานของระบบปฏิบัติการเมื่อ pin ไซต์ บนมือถือ หากผู้ใช้เพิ่มไซต์ไปยังหน้าจอหลัก อุปกรณ์จะใช้ภาพที่เกี่ยวข้องแต่แตกต่างกันที่เรียกว่า apple-touch-icon แทน favicon มาตรฐาน เครื่องมือค้นหาบางครั้งแสดง favicon ถัดจากผลลัพธ์ในอินเตอร์เฟซ กราฟิกมีขนาดเล็กโดยการออกแบบ ทำให้มีประสิทธิภาพสำหรับการระบุด้วยสายตาอย่างรวดเร็วแต่ยากต่อการสร้างให้ดี: ที่ 16x16 พิกเซล โลโก้ที่มีรายละเอียดกลายเป็นรอยเปื้อนที่ไม่ชัดเจน ไฟล์ favicon ผ่านหลายรูปแบบในช่วงทศวรรษที่ผ่านมา โดย .ico ยังคงเข้ากันได้กว้างที่สุดและ PNG ตอนนี้เป็นค่าเริ่มต้นสมัยใหม่สำหรับเบราว์เซอร์ส่วนใหญ่
คอนเทนเนอร์ .ico: หลายความละเอียดในไฟล์เดียว
รูปแบบ .ico เป็นคอนเทนเนอร์ ไม่ใช่ภาพเดียว ไฟล์ .ico เดียวสามารถมีภาพ bitmap หลายภาพที่ความละเอียดต่างกัน แต่ละภาพเก็บเป็นรายการแยกในดัชนีที่จุดเริ่มต้นของไฟล์ สามขนาดที่พบบ่อยที่สุดคือ 16x16, 32x32 และ 48x48 พิกเซล เมื่อ Windows แสดง favicon ใน Explorer หรือบนแถบงาน จะเลือกรายการที่ตรงกับบริบทการแสดงผลที่ดีที่สุด Windows รุ่นเก่าต้องการรายการ 48x48 สำหรับช่องแถบงานความหนาแน่นสูง เบราว์เซอร์ร้องขอ favicon ที่ 16x16 สำหรับแท็บแต่อาจใช้รายการที่ใหญ่กว่าหากตรวจพบจอแสดงผลความหนาแน่นสูง การบรรจุทั้งสามขนาดในไฟล์ .ico เดียวหมายความว่าคำขอ HTTP เดียวครอบคลุมทุกกรณีการใช้งาน การแจกจ่ายเป็น PNG แยกก็ใช้ได้แต่ต้องใช้แท็ก link พิเศษและเพิ่มคำขอ HTTP ภาพภายในไฟล์ .ico เป็นข้อมูล BMP หรือ PNG มาตรฐาน ดังนั้นคอนเทนเนอร์เพิ่มเฉพาะ header ขนาดเล็กต่อรายการ
ออกแบบสำหรับขนาดเล็กมาก: ทำให้สัญลักษณ์เรียบง่าย
ที่ 16x16 พิกเซลคุณมี 256 พิกเซลทั้งหมด โลโกไทป์ทั่วไปที่มีตัวอักษรหรือรายละเอียดละเอียดอ่อนกลายเป็นอ่านไม่ออกที่ขนาดนั้น วิธีมาตรฐานคือสร้างสัญลักษณ์ที่เรียบง่าย: ตัวอักษรเดียว รูปร่างนามธรรม หรือไอคอนที่แทน brand โดยไม่อาศัยรายละเอียด ปัญหาเฉพาะบางอย่างที่ควรคาดการณ์: เส้นบางหายไปทั้งหมดที่ขนาดเล็ก โดยเฉพาะบนหน้าจอที่ไม่ใช่ retina คู่ตัวอักษรและรายละเอียด negative-space ผสานเป็นเสียงรบกวนสีเทา Gradient แทบมองไม่เห็น คอนทราสต์สูงระหว่างสัญลักษณ์และพื้นหลังเป็นปัจจัยเดียวที่ใหญ่ที่สุดในความสามารถอ่านได้ รูปร่างทึบบนพื้นหลังธรรมดาอ่านได้ดีกว่าภาพประกอบที่มีรายละเอียดที่ 16x16 เกือบตลอดเวลา ขนาด 32x32 และ 48x48 ให้อภัยมากกว่าและรองรับรายละเอียดเพิ่มเติมได้ แต่เวอร์ชัน 16x16 ควรถือเป็นข้อจำกัดที่ผูกพัน หากสัญลักษณ์ยังอ่านไม่ออกที่ 16x16 การออกแบบต้องการการทำให้เรียบง่ายเพิ่มเติม
ชุดสมัยใหม่: .ico, PNG icons, apple-touch-icon, manifest และแท็ก HTML link
การตั้งค่า favicon สมบูรณ์สำหรับไซต์สาธารณะปัจจุบันต้องการห้าสิ่ง ประการแรก favicon.ico ที่ root ของไซต์ (เบราว์เซอร์ร้องขอ /favicon.ico โดยตรงโดยไม่มีแท็ก link เป็น fallback) ประการที่สอง PNG 32x32 สำหรับเบราว์เซอร์เดสก์ท็อปสมัยใหม่ ประกาศด้วยแท็ก link: `<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">` ประการที่สาม PNG 16x16 สำหรับขนาดแท็บ: `<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">` ประการที่สี่ apple-touch-icon ที่ 180x180 พิกเซลสำหรับบุ๊กมาร์กหน้าจอหลัก iOS: `<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">` ประการที่ห้า web app manifest (site.webmanifest) ที่มี PNG 192x192 และ 512x512 สำหรับ Android และ progressive web apps ความโปร่งใสรองรับใน PNG และในรายการที่เข้ารหัส PNG ภายใน .ico แม้ว่า apple-touch-icon ควรมีพื้นหลังทึบเพราะ iOS ไม่สนใจ alpha channel และเติมพื้นที่โปร่งใสด้วยสีดำ
ทำในเครื่อง: favicon-generator เก็บภาพของคุณบนอุปกรณ์
favicon-generator บนไซต์นี้รับ PNG และสร้างชุดสมบูรณ์: favicon.ico หลายความละเอียดที่บรรจุรายการ 16x16, 32x32 และ 48x48, ขนาด PNG แต่ละขนาดสำหรับการใช้งาน link-tag โดยตรง และ apple-touch-icon 180x180 ทั้งหมดนี้เกิดขึ้นในเบราว์เซอร์ของคุณโดยใช้ Canvas API และ JavaScript .ico encoder ภาพต้นฉบับของคุณไม่เคยถูกอัปโหลดไปที่ใด มันอยู่บนอุปกรณ์ของคุณ สิ่งนี้สำคัญเมื่อไฟล์ต้นฉบับเป็นโลโก้บริษัทหรือ asset ใดก็ตามที่ไม่ควรออกจากเครื่องของคุณก่อนที่คุณจะควบคุมว่ามันไปที่ใด ไฟล์ที่สร้างแต่ละไฟล์จะถูกเสนอให้ดาวน์โหลดแยกกัน โดยใช้ชื่อไฟล์ตามแบบแผน คุณคัดลอกไปยัง root ของไซต์และเพิ่มแท็ก link ที่สอดคล้องกันไปยัง HTML head ถ้าโลโก้ต้นฉบับของคุณมีรายละเอียดละเอียดที่ไม่รอดจากการ render 16x16 คุณสามารถครอบหรือทำให้เรียบง่ายก่อนวางลงในเครื่องมือ หรือให้ภาพต้นฉบับต่างกันที่เตรียมมาเฉพาะสำหรับ favicon
เครื่องมือที่กล่าวถึงในบทความนี้
คำถามที่พบบ่อย
ฉันยังต้องการ favicon.ico ถ้าฉันประกาศแท็ก PNG link ไหม?
ใช่ ด้วยสองเหตุผล ประการแรก เบราว์เซอร์ที่ไม่อ่าน HTML ของคุณ (web crawler, RSS reader, เบราว์เซอร์มือถือรุ่นเก่าบางตัว) มองหา /favicon.ico โดยตรงที่ root ของโดเมน ถ้าไฟล์นั้นไม่มี พวกเขาสร้างคำขอ 404 ในทุกการโหลดหน้า ซึ่งเพิ่มสัญญาณรบกวนใน server log และ round trip ที่ไม่จำเป็นเล็กน้อย ประการที่สอง Internet Explorer รุ่นเก่ารู้จักเฉพาะรูปแบบ .ico และไม่สนใจแท็ก PNG link การให้ทั้งสองครอบคลุมทุกกรณี
ฉันสามารถใช้ SVG เป็น favicon ได้ไหม?
Chrome และ Firefox รองรับ SVG favicon ผ่าน `<link rel="icon" type="image/svg+xml" href="/favicon.svg">` Safari ไม่รองรับ SVG favicon เนื่องจาก SVG favicon ไม่ขึ้นกับความละเอียด พวกเขาดูคมชัดบนจอแสดงผลใดๆ ความหนาแน่น รวมถึงหน้าจอ retina โดยไม่ต้องการหลายขนาด คำแนะนำจริงคือประกาศแท็ก SVG link สำหรับเบราว์เซอร์ที่รองรับและยังคงรวม .ico fallback สำหรับความครอบคลุมสมบูรณ์ SVG favicon ยังสามารถรวมคิวรี media `prefers-color-scheme` เพื่อสลับระหว่างเวอร์ชันสว่างและมืดอัตโนมัติ
ฉันควรเริ่มจากภาพใดเพื่อให้ได้ผลลัพธ์ที่ดีที่สุด?
PNG สี่เหลี่ยมจัตุรัสที่ 512x512 หรือใหญ่กว่าที่มีพื้นหลังโปร่งใสให้ความยืดหยุ่นมากที่สุด การเริ่มจากขนาดใหญ่และลดขนาดลงรักษารายละเอียดมากกว่าการเริ่มจากภาพขนาดเล็ก ถ้าโลโก้หลักของคุณมีตัวอักษร ควรเตรียมเวอร์ชันที่เรียบง่ายแยกต่างหากที่แสดงเฉพาะไอคอนหรือสัญลักษณ์ เพราะข้อความจะอ่านไม่ออกที่ 16x16 โดยไม่คำนึงถึงความละเอียดต้นฉบับ คอนทราสต์สูงระหว่างสัญลักษณ์และพื้นหลังเป็นตัวทำนายที่เชื่อถือได้ที่สุดว่าขนาดเล็กจะอ่านได้ชัดเจนหรือไม่