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

แปลง SVG เป็นไอคอนเว็บไซต์

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

แปลง SVG ที่ปลอดภัยเป็นไอคอนเว็บไซต์ ICO และ PNG ตรวจสอบภาพแรสเตอร์ขนาดเล็กแล้วส่งออกชุดไอคอนในเครื่อง

PNG ICO PWA

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

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

1อัปโหลด
2ปรับแต่ง
3ดาวน์โหลด

รอภาพของคุณ

ลากรูปภาพมาที่นี่

SVG · สูงสุด 5 MB

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

16 × 16

32 × 32

48 × 48

180 × 180

192 × 192

512 × 512

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

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

การปรับภาพ

พื้นหลัง

โปร่งใส

สีพื้น

#FFFFFF

ระยะขอบ6%

ความโค้งมุม0%

ขนาด ICO (เลือกได้หลายขนาด)

256

ไอคอนแบบปรับรูปทรง

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

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

https://example.com

หน้าจอหลัก iOS

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

PWA / Android

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

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

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

1อัปโหลดภาพ

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

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

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

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

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

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

favicon เว็บไซต์

เว็บไซต์ของฉัน×

16 × 16

32 × 32

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

iPhone และ iPad

เว็บไซต์ของฉัน

180 × 180

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

PWA และ Android

ติดตั้งแอป

192 × 192

512 × 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">

แตกชุดไอคอนลงใน public/ ที่รากโปรเจกต์ Nuxt คงชื่อไฟล์เดิมและวาง site.webmanifest ไว้ข้าง favicon.ico ไม่ใช่ใน app/
เพิ่มโค้ดในบล็อก script setup ของ app/app.vue แทนลิงก์ไอคอนเก่า แล้วบิลด์และเผยแพร่โปรเจกต์ใหม่

useHead({
  "link": [
    {
      "rel": "icon",
      "type": "image/x-icon",
      "href": "/favicon.ico"
    },
    {
      "rel": "apple-touch-icon",
      "sizes": "180x180",
      "href": "/apple-touch-icon.png"
    },
    {
      "rel": "manifest",
      "href": "/site.webmanifest"
    }
  ]
})

เปิด /favicon.ico, /apple-touch-icon.png และ /site.webmanifest บนเว็บไซต์ของคุณ ตรวจสอบการตอบกลับสำเร็จและเนื้อหารูปภาพหรือ JSON จริง สถานะ 200 ที่ส่งหน้า HTML ข้อผิดพลาดก็ยังเป็นพาธผิด ตรวจ URL ไอคอนทุกตัวใน manifest ด้วย

หากยังเห็นไอคอนเก่า ให้ตรวจลิงก์ซ้ำใน head ปิดแคชในเครื่องมือนักพัฒนาแล้วโหลดใหม่ ตรวจแคช CDN และ service worker หากใช้ เปรียบเทียบตัวอย่างจริงขนาด 16 และ 32 พิกเซล และลดข้อความเล็กกับเส้นบาง

ไฟล์เหล่านี้ให้ไอคอนและเมทาดาทาของ manifest เท่านั้น ยังไม่ทำให้เว็บไซต์เป็น PWA ที่ติดตั้งได้ ตัวอย่างนี้ใช้รากโดเมน หากใช้ไดเรกทอรีย่อยให้ปรับทุกลิงก์และพาธไอคอนใน manifest

Nuxt 4 · public/ · Nuxt 4 · useHead

แปลง SVG เป็นไอคอนเว็บไซต์

เส้น SVG ที่ปลอดภัยยังเป็นเวกเตอร์ ภาพแรสเตอร์และภาพข้อความจะไม่ถูกแปลงเป็นเวกเตอร์

SVG ต้องเป็นงานที่ปลอดภัยและไม่พึ่งทรัพยากรภายนอก

เริ่มสร้าง

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

favicon คืออะไร?

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

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

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

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

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

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

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