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

แปลง PNG เป็น ICO

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

แปลง PNG เป็น ICO หลายขนาด เก็บความโปร่งใส ตรวจสอบภาพตัวอย่างขนาดเล็ก แล้วดาวน์โหลดไฟล์ไอคอนในเครื่อง

PNG ICO PWA

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

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

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

รอภาพของคุณ

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

PNG · สูงสุด 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