ตัวสร้าง Favicon
เปลี่ยนรูปภาพธรรมดาให้เป็นไอคอนประจำเว็บไซต์และชุดไอคอนเว็บไซต์ ตรวจสอบว่าการออกแบบยังคงเป็นที่รู้จักในขนาดที่เล็ก ดาวน์โหลดไฟล์และปฏิบัติตามตัวอย่างการติดตั้งที่ให้มา
ก่อนที่คุณจะเริ่ม
- อินพุต
- หนึ่งอิมเมจ JPG, PNG หรือ WebP แบบคงที่
- เอาท์พุต
- ไฟล์ ZIP ที่มีไอคอน ICO, PNG, รายการ และตัวอย่าง HTML
กำลังโหลดเครื่องมือ...
วิธีใช้เครื่องมือนี้
- เลือกอิมเมจ JPG, PNG หรือ WebP แบบคงที่
- ครอบตัดเป็นสี่เหลี่ยมจัตุรัสหรือเพิ่มช่องว่างภายใน และตรวจสอบตัวอย่างไอคอน
- ดาวน์โหลด ZIP และปรับเส้นทางตัวอย่างไปยังเว็บไซต์ของคุณ
ทำความเข้าใจผลลัพธ์
ไอคอน Fav มักปรากฏในขนาดที่เล็กมาก สัญลักษณ์หรือตัวอักษรที่ชัดเจนมักจะใช้ได้ผลดีกว่างานศิลปะที่มีรายละเอียดหรือข้อความเล็กๆ ไฟล์ที่สร้างขึ้นยังคงต้องมีการอัปโหลดและอ้างอิงโดยเว็บไซต์ของคุณ
เตรียมไอคอนอันเล็กชัดเจน
ตรวจสอบตัวอย่างขนาด 16 พิกเซลก่อนดาวน์โหลด หลีกเลี่ยงการคาดหวังว่าจะมีตัวอักษรที่กว้างหรือรูปถ่ายเต็มตัวเพื่อให้สามารถอ่านได้ในช่องสี่เหลี่ยมเล็กๆ
ลองตัวอย่าง
ลองใช้ตัวอย่างต้นฉบับเพื่อตรวจสอบขั้นตอนการทำงานที่รองรับ ตัวอย่างที่ประสบความสำเร็จไม่ได้รับประกันสำหรับทุกอินพุต
ตัวอย่างภาพต้นฉบับ ↓
หากผลลัพธ์ไม่เป็นไปตามที่คุณคาดหวัง
ไซต์ยังคงแสดงไอคอนเก่า
การสร้างไฟล์ไม่ได้ติดตั้ง ตรวจสอบไอคอน URL และมาร์กอัปหน้า จากนั้นล้างแคชของไซต์และทดสอบเซสชันเบราว์เซอร์ใหม่ ไอคอนเบราว์เซอร์และผลการค้นหาสามารถอัปเดตในเวลาที่ต่างกัน
เครื่องมือที่มีประโยชน์ชิ้นต่อไป: SVG ถึง PNG →ข้อจำกัดที่สำคัญ
- อินพุตรูปภาพเท่านั้น แปลง SVG เป็น PNG ก่อน
- เครื่องมือนี้จะไม่เปลี่ยนแปลงการกำหนดค่าเว็บไซต์ของคุณ
- ตรวจสอบเว็บไซต์ของคุณเองหลังจากติดตั้งไอคอน เนื่องจากพฤติกรรมแคชและแพลตฟอร์มอาจแตกต่างกัน
- สูงสุด 10 MB และ 12 ล้านพิกเซล เอาต์พุตประกอบด้วยไอคอน ICO, PNG, WebManifest และตัวอย่าง HTML ในรูปแบบ ZIP
คำถามที่พบบ่อย
สิ่งนี้จะติดตั้ง favicon บนเว็บไซต์ของฉันหรือไม่
ไม่ใช่ครับ เป็นการเตรียมไฟล์และตัวอย่าง อัปโหลดไฟล์และอัปเดตเส้นทางหรือการตั้งค่าเว็บไซต์ของคุณ
ชุดนี้ทำให้เว็บไซต์ของฉันเป็น PWA หรือไม่
ไม่ ไฟล์ไอคอนและ webmanifest พื้นฐานเป็นเพียงส่วนหนึ่งของการตั้งค่าเว็บแอปเท่านั้น
เหตุใดโลโก้ของฉันจึงอ่านยากที่ขนาด 16 พิกเซล
รายละเอียดเล็กๆ น้อยๆ อาจหายไปในขนาดนั้น ลองใช้สัญลักษณ์ที่เรียบง่ายกว่า รูปร่างที่แข็งแกร่งกว่า หรือมีช่องว่างรอบเครื่องหมายมากขึ้น
คู่มือที่เกี่ยวข้อง
มีคำถามหรือแก้ไข? mrkcal@mrkcal.com