Favicon (.ico) กับ PNG
ICO และ PNG ไม่ใช่คู่แข่ง แต่เป็นพันธมิตรกัน การตั้งค่า favicon สมัยใหม่ใช้ .ico เป็นทางเลือกสากลและ PNG เป็นการแทนที่ DPI สูง นี่คือเวลาที่แต่ละคนชนะ
ICO มีความโดดเด่นตรงที่ไฟล์เดียวมีความละเอียดหลายระดับ เบราว์เซอร์หรือระบบปฏิบัติการจะเลือกการเลือกที่ใกล้เคียงที่สุด ณ เวลาวาด — ไม่มีการลดขนาดหรือขอบที่ไม่ชัดเจน
PNG มีความคมชัดยิ่งขึ้นในทุกความละเอียด และรองรับการบีบอัดโลโก้สีทึบได้ดีขึ้น ไม่สามารถฝังหลายขนาดในไฟล์เดียวได้
การตั้งค่าที่เหมาะสมที่สุดคือไฟล์ .ico หลายขนาด 1 ไฟล์ บวกกับไฟล์สแตนด์อโลน 32×32 และ 180×180 PNG สำหรับเบราว์เซอร์ DPI สูงและ iOS
วิธีการทำงาน
- 1
เริ่มจากแหล่งขนาด 512×512
PNG หรือ SVG
- 2
สร้างทั้งสองรูปแบบ
FetchFavicon เอาต์พุตเป็น .ico หลายขนาด บวกกับ 16/32/48/180/192/512 PNG แบบสแตนด์อโลน
- 3
ลิงก์ทั้งใน <head>
<link rel="icon" href="/favicon.ico"> ตามด้วย <link rel="icon" type="image/png" size="32x32" href="/favicon-32x32.png">
ลองเลย
สร้างทั้ง .ico และ PNG
เครื่องมือแปลงไฟล์ PNG เป็น ICOคำถามที่พบบ่อย
ข้อใดมีขนาดไฟล์เล็กกว่า+
PNG เดียวมีขนาดเล็กกว่า .ico ที่มีความละเอียดเท่ากัน แต่ .ico หลายขนาดจะแทนที่ 4-6 PNG และมักจะชนะด้วยจำนวนไบต์ทั้งหมด
Google แสดงfavicon PNG ในผลการค้นหาหรือไม่+
ใช่. Google รองรับทั้ง .ico และ PNG ต้องการอัตราส่วนภาพสี่เหลี่ยมจัตุรัสอย่างน้อย 48×48
PNG สามารถรองรับโหมดมืดได้หรือไม่?+
ไม่ใช่โดยตรง. ใช้รุ่น SVG ควบคู่ไปกับ PNG ของคุณเพื่อรองรับโหมดมืด