วิธีสร้าง Favicon
favicon สมัยใหม่เป็นมากกว่ารูปภาพขนาด 16×16 ต่อไปนี้คือขั้นตอนการทำงานทั้งหมดสำหรับการตั้งค่าที่ดูคมชัดในทุกเบราว์เซอร์ ระบบปฏิบัติการ และอุปกรณ์
favicon คืออะไร?
favicon คือไอคอนขนาดเล็กที่เบราว์เซอร์แสดงในแท็บ แถบบุ๊กมาร์ก และรายการประวัติ บนมือถือจะเป็นไอคอนบนหน้าจอหลัก บน Windows จะเป็นไอคอนทางลัด
ไซต์สมัยใหม่มีความละเอียดและรูปแบบที่หลากหลาย ดังนั้นทุกจุดที่แสดงจึงได้รับการเรนเดอร์ที่คมชัด
เตรียมภาพต้นฉบับของคุณ
Start from a square image that's at least 512×512 — ideally an SVG with a square viewBox. สิ่งเล็กๆ น้อยๆ จะเบลอเมื่อลดขนาดลง
หลีกเลี่ยงเส้นบางๆ และข้อความเล็กๆ พวกมันหายไปที่ 16×16
สร้าง .ico หลายขนาด
มัด 16, 32, 48, 64, 128 และ 256 ภายใน favicon.ico เดียว เบราว์เซอร์จะเลือกขนาดที่เหมาะสมโดยอัตโนมัติ
เครื่องมือสร้าง favicon ของเราดำเนินการฝั่งไคลเอ็นต์นี้ภายในเวลาไม่ถึงวินาที
เพิ่มแท็ก HTML
วาง favicon.ico ลงในรูทเว็บไซต์ของคุณ จากนั้นเพิ่ม SVG, apple-touch-icon และไอคอนรายการใน <head> เพื่อให้การตั้งค่าเสร็จสมบูรณ์
ตรวจสอบในทุกเบราว์เซอร์
รีเฟรชแคชใน Chrome, Safari, Firefox และ Edge ตรวจสอบแถบบุ๊กมาร์ก แท็บ และการติดตั้งหน้าจอหลัก