เครื่องสร้าง Favicon
สร้าง Favicon ทุกขนาดมาตรฐานจากภาพเดียว สร้าง favicon สำหรับเว็บไซต์ เว็บแอป และเบราว์เซอร์
รูปแบบที่รองรับได้ดีที่สุดสำหรับเว็บ แอปมือถือ ฯลฯ
ไฟล์ favicon เฉพาะเบราว์เซอร์ (รวมทุกขนาด)
รูปแบบเวกเตอร์ปรับขนาดได้ (เบราว์เซอร์ทันสมัย)
วิธีใช้งาน
1. อัปโหลดภาพของคุณ
คลิก 'เลือกภาพ' และเลือกโลโก้หรือไอคอนของคุณ ภาพสี่เหลี่ยมจัตุรัส (อัตราส่วน 1:1) จะให้ผลลัพธ์ที่ดีที่สุด ขนาดที่แนะนำ: 512x512 พิกเซลขึ้นไป
2. สร้าง Favicon
คลิก 'สร้าง Favicon' เพื่อสร้างทุกขนาดมาตรฐาน (16x16 ถึง 512x512) เครื่องมือจะปรับขนาดภาพของคุณอัตโนมัติสำหรับแต่ละขนาด
3. ดูตัวอย่างและดาวน์โหลด
ดูตัวอย่างทุกขนาดที่สร้างแล้วและดาวน์โหลดไฟล์แต่ละไฟล์ หรือคลิก 'ดาวน์โหลดทั้งหมด (ZIP)' เพื่อรับทั้งหมดพร้อมกัน
4. ใช้งานบนเว็บไซต์ของคุณ
แตกไฟล์ ZIP และอัปโหลดไฟล์ favicon ทั้งหมดไปยังไดเร็กทอรีรากของเว็บไซต์ เพิ่มโค้ด HTML ที่ให้มาในส่วน <head> ของหน้าเว็บ
ตัวอย่างโค้ด HTML
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">เตรียมภาพสี่เหลี่ยมจัตุรัส (อัตราส่วน 1:1) ของโลโก้หรือไอคอนของคุณ เพื่อผลลัพธ์ที่ดีที่สุด ใช้ไฟล์ PNG หรือ JPG ที่มีขนาดอย่างน้อย 512x512 พิกเซล
คลิกปุ่ม 'เลือกภาพ' เพื่อเปิดตัวเลือกไฟล์ของอุปกรณ์ของคุณ เรียกดูภาพโลโก้ที่เตรียมไว้และเลือก
ตรวจสอบการแสดงตัวอย่างเพื่อยืนยันว่าภาพของคุณถูกต้อง หากต้องการใช้ภาพอื่น คลิกปุ่ม 'รีเซ็ต'
คลิกปุ่ม 'สร้าง Favicon' เพื่อสร้าง Favicon ทุกขนาดมาตรฐาน เครื่องมือจะประมวลผลภาพของคุณในพื้นหลัง
ตรวจสอบ favicon ที่สร้างในกริดแสดงตัวอย่าง แต่ละ favicon จะแสดงพร้อมกับขนาดจริง ชื่อไฟล์ และคำอธิบายการใช้งาน
ดาวน์โหลด favicon แต่ละขนาดโดยคลิกปุ่ม 'ดาวน์โหลด' ใต้แต่ละการแสดงตัวอย่าง
สำหรับการใช้งานที่สมบูรณ์ คลิก 'ดาวน์โหลดทั้งหมด (ZIP)' เพื่อดาวน์โหลดแพ็คเกจที่ครอบคลุม
แตกไฟล์ ZIP ที่ดาวน์โหลดบนคอมพิวเตอร์ของคุณ อัปโหลดไฟล์ PNG และ manifest.json ทั้งหมดไปยังไดเร็กทอรีรากของเว็บไซต์
เปิดไฟล์ favicon-instructions.html เพื่อดูโค้ด HTML คัดลอกแท็ก <link> และวางในส่วน <head> ของ HTML เว็บไซต์
ทดสอบ favicon ของคุณโดยเยี่ยมชมเว็บไซต์ในเบราว์เซอร์และอุปกรณ์ต่างๆ ตรวจสอบแท็บเบราว์เซอร์ บุ๊กมาร์ก และไอคอนหน้าจอหลักมือถือ
เคล็ดลับโปร
- ใช้ภาพสี่เหลี่ยมจัตุรัส (อัตราส่วน 1:1) เพื่อผลลัพธ์ที่ดีที่สุด
- เริ่มต้นด้วยภาพต้นฉบับความละเอียดสูงขนาดใหญ่ (อย่างน้อย 512x512 พิกเซล ควรเป็น 1024x1024 หรือใหญ่กว่า)
- รักษาการออกแบบให้เรียบง่ายและกล้าหาญ รายละเอียดที่ซับซ้อนและเส้นบางจะมองไม่เห็นที่ขนาด 16x16 หรือ 32x32 พิกเซล
- ทิ้งช่องว่างบางส่วนรอบๆ โลโก้ของคุณ หากการออกแบบขยายไปถึงขอบ อาจดูแคบหรือถูกตัดที่ขนาดเล็ก
- ใช้สีที่มีความคมชัดสูง ความแตกต่างของสีที่ละเอียดอ่อนจะหายไปที่ขนาด favicon
- ทดสอบทั้งบนพื้นหลังสว่างและมืด ธีมเบราว์เซอร์แตกต่างกัน - ผู้ใช้บางคนเปิดใช้งานโหมดมืด
- สำหรับพื้นหลังโปร่งใส ใช้รูปแบบ PNG สำหรับภาพต้นฉบับของคุณ
- หากเปลี่ยน favicon ที่มีอยู่ โปรดทราบว่าเบราว์เซอร์แคช favicon อย่างรุนแรง
ทำไมต้องใช้เครื่องมือนี้
เครื่องสร้าง Favicon ทำให้งานที่น่าเบื่อแต่จำเป็นสำหรับเจ้าของและนักพัฒนาเว็บไซต์ทุกคนง่ายขึ้น แทนที่จะใช้เวลา 30-60 นาทีในการสร้างขนาด favicon แปดขนาดด้วยตนเองในซอฟต์แวร์แก้ไขภาพ คุณทำงานทั้งหมดใน้อยกว่าสองนาทีด้วยเครื่องมือนี้