สร้าง Favicon
เปลี่ยนโลโก้ SVG ตัวอักษร หรืออีโมจิให้เป็นชุด favicon ครบสำหรับเบราว์เซอร์ Google, iPhone และ Android พร้อมตัวอย่างแบบเรียลไทม์และโค้ดติดตั้งที่พร้อมใช้
วิธีใช้งาน: สร้าง Favicon
- 1
เลือกแหล่งที่มา
อัปโหลดโลโก้ PNG, JPG, WebP หรือ SVG แล้วครอปเป็นสี่เหลี่ยมจัตุรัส หรือพิมพ์ตัวอักษรหรืออีโมจิแล้วเลือกฟอนต์และสี
- 2
ปรับแต่งแต่ละแพลตฟอร์ม
ตั้งค่าพื้นหลัง มุม และระยะขอบสำหรับเบราว์เซอร์ iOS และ Android ทำให้ไอคอน Android เป็นแบบ maskable แล้วดูตัวอย่างแบบเรียลไทม์บนแท็บ ผลการค้นหา และหน้าจอโฮม
- 3
ดาวน์โหลดและติดตั้ง
รับ favicon.ico, favicon.svg, ไอคอน PNG และ site.webmanifest ใน ZIP ไฟล์เดียว แล้วทำตามคำแนะนำสำหรับ HTML, Next.js, Vite หรือ WordPress
ชุด favicon สมัยใหม่มีอะไรบ้าง
Favicon คือไอคอนเล็ก ๆ ที่แสดงบนแท็บเบราว์เซอร์ บุ๊กมาร์ก และผลการค้นหาของ Google ส่วนบนโทรศัพท์จะกลายเป็นไอคอนของเว็บไซต์บนหน้าจอโฮม แต่ละแพลตฟอร์มต้องการไฟล์ของตัวเอง favicon สมัยใหม่จึงไม่ใช่รูปภาพเพียงรูปเดียว แต่เป็นชุดรูปภาพขนาดเล็กพร้อมไฟล์ web app manifest
อัปโหลดโลโก้ PNG, JPG, WebP หรือ SVG แล้วครอปเป็นสี่เหลี่ยมจัตุรัส หรือสร้างไอคอนจากตัวอักษรหรืออีโมจิ จากนั้นปรับแต่งแต่ละแพลตฟอร์มแยกกัน: พื้นหลังและมุมสำหรับเบราว์เซอร์บนเดสก์ท็อปและ Google พื้นหลังทึบและระยะขอบสำหรับหน้าจอโฮมของ iPhone และไอคอนแบบ maskable สำหรับ Android ที่เก็บโลโก้ไว้ในโซนปลอดภัย ตัวอย่างแบบเรียลไทม์แสดงแท็บเบราว์เซอร์ทั้งโหมดสว่างและโหมดมืด แถบบุ๊กมาร์ก ผลการค้นหาของ Google รวมถึงหน้าจอโฮมของ iOS และ Android พร้อมมาสก์แบบวงกลม สี่เหลี่ยมโค้งมน และสี่เหลี่ยมมุมมน
ไฟล์ ZIP เป็นไปตามแนวทางที่ดีที่สุดในปัจจุบัน: favicon.ico ขนาด 16, 32 และ 48 px, favicon.svg เมื่อไฟล์ต้นฉบับเป็น SVG (ปรับตามโหมดมืดได้หากต้องการ), favicon-96x96.png, apple-touch-icon.png ขนาด 180×180, ไอคอน manifest ขนาด 192 และ 512 px และ site.webmanifest คัดลอกโค้ด HTML หรือทำตามขั้นตอนสำหรับ Next.js, React/Vite หรือ WordPress แล้วทดสอบผลลัพธ์ด้วยเครื่องมือตรวจสอบ favicon ของเรา ทุกอย่างสร้างขึ้นในเบราว์เซอร์ของคุณ
ทุกอย่างทำงานภายในเบราว์เซอร์ของคุณ รูปภาพของคุณจะไม่ถูกอัปโหลดขึ้นเซิร์ฟเวอร์เด็ดขาด