สร้าง favicon

ไอคอนทุกแบบที่เว็บไซต์ต้องใช้ สร้างจากโลโก้ของคุณและพร้อมอัปโหลด

เครื่องมืออื่น: JPEG เป็น JPG บีบอัด JPG บีบอัด PNG บีบอัด WebP ปรับขนาดรูปภาพ ครอปรูปภาพ รวมรูปภาพ รวมไฟล์ PDF บีบอัด PDF แยกไฟล์ PDF ดึงรูปภาพจาก PDF หมุน PDF

เลือกรูปภาพ PNG, JPG, WebP หรือ SVG

ครั้งละ 1 ไฟล์ ไม่เกิน 20 MB

การจัดลงสี่เหลี่ยมจัตุรัส

พอดีกรอบ ทั้งภาพ เต็มกรอบ ตัดขอบด้านข้าง

ไอคอนเป็นสี่เหลี่ยมจัตุรัส หากภาพของคุณไม่ใช่ เลือกว่าจะแสดงทั้งภาพ (มีขอบโปร่งใส) หรือให้เต็มกรอบ

สีพื้นหลัง

สำหรับไอคอนของ Apple ซึ่งโปร่งใสไม่ได้ และใช้เป็นสีธีมบน Android

ไฟล์ของคุณจะถูกลบโดยอัตโนมัติหลังการแปลง และไม่เกินหนึ่งชั่วโมงหลังอัปโหลด เราจัดการไฟล์ของคุณอย่างไร

สร้าง favicon ครบชุดของเว็บไซต์จากโลโก้ของคุณ ทั้งไอคอนบนแท็บเบราว์เซอร์ ไอคอนบนหน้าจอหลักของ iPhone และ Android ไฟล์ manifest และโค้ด HTML สำหรับลิงก์ทั้งหมด อัปโหลดรูป PNG, JPG, WebP หรือ SVG แล้วดาวน์โหลดไฟล์ ZIP ที่มีทุกอย่าง ไม่ต้องสมัครและไม่มีลายน้ำ

วิธีสร้าง favicon

เลือกโลโก้หรือไอคอนเป็น PNG, JPG, WebP หรือ SVG ควรเป็นสี่เหลี่ยมจัตุรัสและอย่างน้อย 512 พิกเซล
เลือกว่าจะแสดงรูปทั้งหมดหรือให้เต็มกรอบสี่เหลี่ยม และเลือกสีพื้นหลังของไอคอน Apple
กด “สร้าง favicon” แล้วดาวน์โหลดไฟล์ ZIP
อัปโหลดไฟล์ไปที่โฟลเดอร์รากของเว็บไซต์ แล้ววางโค้ดจาก head.html ลงในแท็ก head ของทุกหน้า

ในชุดมีอะไรบ้าง

ไฟล์	ใช้ทำอะไร
`favicon.ico`	ไอคอนแท็บแบบคลาสสิก มีขนาด 16, 32 และ 48 พิกเซลในไฟล์เดียว เบราว์เซอร์จะหาไฟล์นี้แม้คุณไม่ได้ลิงก์ไว้
`favicon-16x16.png` และ `favicon-32x32.png`	ไอคอนแท็บและบุ๊กมาร์กในเบราว์เซอร์รุ่นใหม่
`apple-touch-icon.png`	ไอคอนขนาด 180 พิกเซลที่ iPhone และ iPad ใช้เมื่อเพิ่มเว็บไซต์ลงหน้าจอหลัก
`android-chrome-192x192.png` และ `android-chrome-512x512.png`	ไอคอนสำหรับ Android และเว็บแอปที่ติดตั้งได้
`site.webmanifest`	ไฟล์ manifest ที่ระบุไอคอนของ Android และสีของเว็บไซต์
`head.html`	แท็กสำหรับลิงก์ไอคอนจากหน้าเว็บของคุณ

วิธีติดตั้งบนเว็บไซต์

แตกไฟล์ ZIP แล้วอัปโหลดทุกไฟล์ ยกเว้น head.html ไปที่โฟลเดอร์รากของเว็บไซต์ (ที่เดียวกับหน้าแรก)
คัดลอกแท็กต่อไปนี้ ซึ่งมีอยู่ใน head.html ด้วย ไปไว้ในแท็ก head ของหน้าเว็บ

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

หากต้องการ ใส่ชื่อเว็บไซต์ใน name และ short_name ภายใน site.webmanifest

เบราว์เซอร์จะเก็บแคช favicon ไว้ หากยังไม่เห็นไอคอนใหม่ ให้รีเฟรชหน้าแบบล้างแคชหรือรอสักพัก

พอดีกรอบหรือเต็มกรอบ

ไอคอนทุกแบบเป็นสี่เหลี่ยมจัตุรัส หากรูปของคุณไม่ใช่ คุณเลือกพอดีกรอบ เพื่อแสดงทั้งรูปโดยมีขอบโปร่งใส หรือเต็มกรอบ โดยตัดส่วนที่เกินด้านข้างออก สำหรับโลโก้แนวนอนที่มีตัวหนังสือ การใช้เฉพาะสัญลักษณ์ของโลโก้ที่ครอปเป็นสี่เหลี่ยมจัตุรัสมักได้ผลดีกว่า

ไอคอนของ Apple โปร่งใสไม่ได้ เพราะ iOS จะเติมพื้นหลังเป็นสีดำ เราจึงสร้างด้วยสีพื้นหลังที่คุณเลือก ซึ่งใช้เป็นสีของเว็บไซต์บน Android ด้วย ไอคอนอื่นยังคงพื้นหลังโปร่งใส

เคล็ดลับให้ได้ผลดี

เริ่มจากรูปขนาดใหญ่ อย่างน้อย 512 × 512 พิกเซล หรือดีกว่านั้นคือ SVG ไอคอนขนาดเล็กจะคำนวณมาจากรูปนี้
ทำให้เรียบง่าย ที่ขนาด 16 พิกเซล ตัวหนังสือและรายละเอียดเล็ก ๆ อ่านไม่ออก สัญลักษณ์หรืออักษรตัวแรกที่ใช้สีตัดกันได้ผลดีกว่ามาก

หากต้องการแค่ไฟล์ .ico คุณแปลง PNG เป็น ICO ได้

ข้อจำกัด

ครั้งละหนึ่งรูป ขนาดไม่เกิน 20 MB และ 100 เมกะพิกเซล
เราไม่ได้แก้ไขเว็บไซต์ของคุณ คุณต้องอัปโหลดไฟล์และเพิ่มแท็กเอง หรือขอให้ผู้ดูแลเว็บไซต์ทำ

คำถามที่พบบ่อย

รูปควรมีขนาดเท่าไรสำหรับสร้าง favicon

ยิ่งใหญ่ยิ่งดี อย่างน้อย 512 × 512 พิกเซล หรือเป็น SVG ไอคอนทุกขนาดตั้งแต่ 512 ถึง 16 พิกเซลจะคำนวณมาจากรูปนี้

อัปโหลดไฟล์ favicon ไว้ที่ไหน

ที่โฟลเดอร์รากของเว็บไซต์ ซึ่งเป็นโฟลเดอร์เดียวกับหน้าแรก จากนั้นวางแท็กจาก head.html ลงในแท็ก head ของหน้าเว็บ

ทำไมไม่เห็น favicon ใหม่ในเบราว์เซอร์

เพราะเบราว์เซอร์เก็บแคช favicon ไว้ ให้รีเฟรชหน้าแบบล้างแคช เปิดในหน้าต่างส่วนตัว หรือรอสักพักให้อัปเดต

ทำไมไอคอนของ Apple มีพื้นหลังสี

เพราะ iOS ไม่รองรับพื้นหลังโปร่งใสในไอคอนบนหน้าจอหลัก และจะเติมพื้นหลังเป็นสีดำ เราจึงสร้างด้วยสีพื้นหลังที่คุณเลือกเพื่อให้ดูดี