สร้าง Favicon

เครื่องมือนี้ทำอะไรได้

ตัวสร้าง Favicon เปลี่ยนตัวอักษร อีโมจิ หรือโลโก้ของคุณเป็นไอคอนทุกแบบที่เว็บไซต์สมัยใหม่ต้องการ เครื่องมือจะเรนเดอร์ไอคอนในแต่ละขนาด รวมเป็น favicon.ico เขียน web app manifest และให้แท็ก <link> สำหรับวางใน <head> ของหน้าเว็บ ดาวน์โหลดทุกอย่างเป็น ZIP เดียว

การเริ่มจากข้อความเป็นวิธีที่เร็วที่สุดในการได้ไอคอนที่เรียบร้อย: พิมพ์หนึ่งถึงสามตัวอักษรหรืออีโมจิ เลือกสี ฟอนต์ และรูปทรง (สี่เหลี่ยม มุมมน หรือวงกลม) ไอคอนแบบข้อความยังได้ favicon.svg ที่ปรับขนาดได้ ซึ่งคมชัดทุกขนาดและบนหน้าจอความละเอียดสูง

วิธีใช้งาน

1. เลือก ข้อความ หรือ รูปภาพ เป็นแหล่งที่มา สำหรับรูปภาพ กด เลือกรูปภาพ… แล้วเลือกไฟล์ PNG, SVG หรือ JPG ทรงสี่เหลี่ยมจัตุรัส
2. ตั้ง รูปทรง และเปิด เติมสีพื้นหลัง เพื่อวางไอคอนบนแผ่นสี หรือปิดเพื่อให้โปร่งใส
3. ใส่ ชื่อเว็บไซต์ ซึ่งเป็นชื่อที่แสดงใต้ไอคอนเมื่อมีคนเพิ่มเว็บไซต์ของคุณไว้บนหน้าจอหลักของโทรศัพท์ โดยจะเขียนลงใน site.webmanifest (Android) และแท็ก apple-mobile-web-app-title (iOS) จากนั้นตั้ง โฟลเดอร์ไอคอน ที่คุณจะอัปโหลดไฟล์ไป ซึ่งมักเป็น /
4. ตรวจพรีวิว: ไอคอน 16 px คือสิ่งที่ผู้คนเห็นในแท็บเบราว์เซอร์
5. กด ดาวน์โหลด ZIP อัปโหลดไฟล์ไปยังเว็บไซต์ แล้ววาง HTML ลงใน <head>

ตัวอย่าง

การตั้งค่าเริ่มต้นจะได้แท็กเหล่านี้:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<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="/site.webmanifest">
<meta name="apple-mobile-web-app-title" content="My Site">

เคล็ดลับ

• เบราว์เซอร์แคช favicon อย่างหนัก หลังเปลี่ยนไอคอน ให้เปิดหน้าในหน้าต่างส่วนตัวเพื่อดูการเปลี่ยนแปลง
• iOS ไม่สนความโปร่งใสใน Apple touch icon และเติมเป็นสีดำ จึงควรเติมสีพื้นหลังไว้เพื่อให้ได้ไอคอนบนหน้าจอโฮมที่เรียบร้อย