Icon Workshop
ไอคอนเล็กลง
เว็บสดใสขึ้น

ภาพเดียว ทุกหน้าจอ

เครื่องมือสร้าง favicon และไอคอนแอป

ไอคอนเล็ก สร้างความประทับใจ

แปลงภาพเป็น favicon ไอคอนแอป และชุดไอคอนพร้อมใช้

PNG ICO PWA

สร้างชุดไอคอนของคุณ

เปลี่ยนภาพเป็น favicon ไอคอนแอป และอีกมากมาย

  1. 1อัปโหลด
  2. 2ปรับแต่ง
  3. 3ดาวน์โหลด
รอภาพของคุณ
ลากรูปภาพมาที่นี่

PNG, JPG หรือ SVG · สูงสุด 5 MB

ภาพประมวลผลในเบราว์เซอร์และไม่ออกจากอุปกรณ์

16 × 16
32 × 32
48 × 48
180 × 180
192 × 192
512 × 512

ปรับแต่งไอคอน

ปรับรูปลักษณ์ให้เหมาะกับทุกหน้าจอ

6%
0%

ดูตัวอย่างการใช้งาน(อัปโหลดเพื่อดูตัวอย่าง)

แท็บเบราว์เซอร์

×
https://example.com

หน้าจอหลัก iOS

ไอคอนของคุณจะแสดงที่นี่

PWA / Android

ไอคอนของคุณจะแสดงที่นี่

สร้าง favicon ใน 3 ขั้นตอน

จากภาพเดียวสู่ชุดไอคอนครบชุด

1อัปโหลดภาพ

เริ่มด้วยโลโก้ชัดเจนหรือสัญลักษณ์เรียบง่าย ภาพสี่เหลี่ยมจัตุรัสเหมาะที่สุด

2ปรับแต่งและดูตัวอย่าง

เลือกการปรับภาพ พื้นหลังและระยะขอบ ตรวจผลลัพธ์ที่ขนาดเล็ก

3ดาวน์โหลดและเพิ่มในเว็บไซต์

ส่งออกชุดไอคอน วางไฟล์บนเว็บไซต์และเพิ่มลิงก์ไอคอนใน HTML

โลโก้เดียว พร้อมทุกหน้าจอ

ดูว่าไฟล์ที่สร้างนำไปใช้ที่ใด

favicon เว็บไซต์

เว็บไซต์ของฉัน×
ตัวอย่าง favicon เว็บไซต์ขนาด 16 × 1616 × 16
ตัวอย่างไอคอนแท็บเบราว์เซอร์ขนาด 32 × 3232 × 32

ไอคอน 16 × 16 และ 32 × 32 ช่วยให้ผู้ใช้จดจำเว็บไซต์ในแท็บและบุ๊กมาร์ก

iPhone และ iPad

เว็บไซต์ของฉัน
iPhone และ iPad · 180 × 180180 × 180

ใช้ไอคอน apple-touch ขนาด 180 × 180 เมื่อเพิ่มเว็บไซต์ไปยังหน้าจอโฮม

PWA และ Android

ติดตั้งแอป
PWA และ Android · 192 × 192192 × 192
PWA และ Android · 512 × 512512 × 512

ภาพ 192 × 192 และ 512 × 512 เป็นขนาดที่ใช้ทั่วไปใน manifest ของเว็บแอป

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

ชุดไอคอนพร้อมใช้สำหรับทุกแพลตฟอร์ม

  • favicon.ico16 × 16, 32 × 32, 48 × 48, 256 × 256
  • apple-touch-icon.png180 × 180
  • icon-192.png192 × 192
  • icon-512.png512 × 512
  • site.webmanifestmanifest ของเว็บแอป

เพิ่มไอคอนในเว็บไซต์

วางลิงก์เหล่านี้ใน <head> ของ HTML

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

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

favicon คืออะไร?

ภาพเล็กที่แทนเว็บไซต์ในแท็บเบราว์เซอร์และบุ๊กมาร์ก

ควรใช้ภาพรูปแบบใด?

PNG เหมาะกับโลโก้โปร่งใส ใช้ JPG, WebP และ SVG ที่ปลอดภัยได้เช่นกัน

ใช้ภาพที่ไม่เป็นสี่เหลี่ยมจัตุรัสได้ไหม?

ได้ เลือก Fit, Crop หรือ Stretch เพื่อสร้างไอคอนสี่เหลี่ยมจัตุรัส

ทำไมจึงมีหลายขนาดไอคอน?

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