Favicon (.ico) กับ PNG
ICO และ PNG ไม่ใช่คู่แข่ง แต่เป็นพันธมิตรกัน การตั้งค่า favicon สมัยใหม่ใช้ .ico เป็นทางเลือกสากลและ PNG เป็นการแทนที่ DPI สูง นี่คือเวลาที่แต่ละคนชนะ
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
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 ของคุณเพื่อรองรับโหมดมืด