Apple Touch icon คืออะไร?

Apple Touch icon (180x180px) ใช้เมื่อผู้ใช้เพิ่มเว็บไซต์ของคุณลงในหน้าจอหลักของ iPhone หรือ iPad หากไม่มี iOS จะใช้ภาพหน้าจอของหน้าเว็บเป็นไอคอนซึ่งดูไม่เป็นมืออาชีพ เพิ่ม ในแท็ก ของ HTML เครื่องมือนี้สร้าง PNG ขนาด 180px และรวมบรรทัด HTML ที่ถูกต้องไว้ใน HTML snippet ให้แล้ว iOS เวอร์ชันใหม่ (10 ขึ้นไป) ต้องการเพียง 180px เท่านั้น

HTML snippet ที่สร้างขึ้นประกอบด้วยอะไรบ้าง?

HTML snippet ที่สร้างขึ้นประกอบด้วย: แท็ก สำหรับ favicon มาตรฐาน, สำหรับไอคอนหน้าจอหลัก iOS, ที่ชี้ไปยัง site.webmanifest สำหรับรองรับ PWA และ ที่ชี้ไปยัง browserconfig.xml สำหรับไทล์ Windows วางทุกบรรทัดในแท็ก ของ HTML ของคุณ อัปเดตพาธหากไอคอนอยู่ในโฟลเดอร์ย่อย

ตัวสร้าง Favicon - ตัวสร้างแพ็คเกจไอคอนที่สมบูรณ์

อัปโหลดรูปภาพหนึ่งภาพเพื่อสร้าง favicon.ico, ขนาด PNG, snippet HTML และไฟล์ manifest

ทำไมต้องใช้ตัวสร้าง Favicon?

แพ็คเกจสมบูรณ์

ขนาด PNG, favicon.ico, manifest และ browserconfig ในการดาวน์โหลดเดียว

การปรับขนาดอัจฉริยะ

จัดกึ่งกลางและปรับขนาดงานศิลปะของคุณโดยอัตโนมัติสำหรับทุกความละเอียด

Snippet พร้อมใช้

คัดลอกบรรทัด HTML ที่สร้างให้คุณ

เป็นมิตรต่อความเป็นส่วนตัว

ทุกอย่างทำงานในเบราว์เซอร์ของคุณ - ไม่มีการอัปโหลดไปยังเซิร์ฟเวอร์ของเรา

วิธีใช้ตัวสร้าง Favicon?

เพิ่มรูปภาพของคุณ

อัปโหลดโลโก้ PNG, JPG หรือ SVG สี่เหลี่ยมจัตุรัส (สูงสุด 8MB)

เลือกขนาดและสไตล์

เลือกขนาด favicon, สไตล์พื้นหลัง และรัศมีมุม

สร้างตัวอย่าง

ตรวจสอบขนาดไอคอนทุกขนาดและคัดลอก snippet HTML หากคุณต้องการ

ดาวน์โหลดแพ็คเกจ

รับ ZIP พร้อม PNG, favicon.ico, manifest และไฟล์ browserconfig

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

PNG โปร่งใสสี่เหลี่ยมจัตุรัสขนาด 1024x1024px หรือใหญ่กว่าให้ความคมชัดสูงสุดในทุกขนาด SVG ก็ใช้ได้ดีและปรับขนาดได้อย่างสมบูรณ์แบบทุกความละเอียด JPG ใช้ได้แต่ไม่รองรับพื้นหลังโปร่งใส — เครื่องมือจะเพิ่มสีพื้นหลังทึบให้แทน เพื่อคุณภาพที่ดีที่สุด: เริ่มจากขนาดอย่างน้อย 512x512px วางดีไซน์ไว้ตรงกลาง และใช้รายละเอียดน้อย เนื่องจาก favicon แสดงผลที่ขนาดเล็กเพียง 16x16px

ตัวสร้างผลิตไอคอน PNG ที่ขนาด: 16, 24, 32, 40, 48, 57, 64, 72, 96, 120, 128, 144, 150, 180, 192, 256, 384 และ 512 พิกเซลสี่เหลี่ยมจัตุรัส ค่าที่ตั้งไว้แบบ "โมเดิร์น" ครอบคลุม 5 ขนาดสำคัญที่สุด ส่วนค่าที่ตั้งไว้แบบ "ครบชุด" สร้างครบทั้ง 18 ขนาด favicon.ico บรรจุเวอร์ชัน 16, 32 และ 48px ไว้ในไฟล์เดียวเพื่อรองรับเบราว์เซอร์รุ่นเก่า

favicon.ico เป็นรูปแบบคอนเทนเนอร์หลายความละเอียดแบบเดิมที่เบราว์เซอร์ทุกตัวรองรับมาตั้งแต่ IE 5 เบราว์เซอร์สมัยใหม่ (Chrome, Firefox, Safari, Edge) นิยม PNG favicon เพราะรองรับความลึกของสีเต็มรูปแบบและความโปร่งใสพร้อมขนาดไฟล์ที่เล็กกว่า แนวทางที่ดีที่สุด: ใช้ทั้งสองแบบ — favicon.ico สำหรับความเข้ากันได้กับรุ่นเก่า และแท็ก <link rel="icon" type="image/png"> ที่ชี้ไปยังไฟล์ PNG ขนาดเหมาะสมสำหรับเบราว์เซอร์สมัยใหม่

Apple Touch icon (180x180px) ใช้เมื่อผู้ใช้เพิ่มเว็บไซต์ของคุณลงในหน้าจอหลักของ iPhone หรือ iPad หากไม่มี iOS จะใช้ภาพหน้าจอของหน้าเว็บเป็นไอคอนซึ่งดูไม่เป็นมืออาชีพ เพิ่ม <link rel="apple-touch-icon" href="/apple-touch-icon.png"> ในแท็ก <head> ของ HTML เครื่องมือนี้สร้าง PNG ขนาด 180px และรวมบรรทัด HTML ที่ถูกต้องไว้ใน HTML snippet ให้แล้ว iOS เวอร์ชันใหม่ (10 ขึ้นไป) ต้องการเพียง 180px เท่านั้น

Progressive Web Apps (PWAs) ต้องการไอคอน 192x192 และ 512x512 ที่ระบุไว้ในไฟล์ site.webmanifest ไอคอน 192px แสดงบนหน้าจอหลัก Android เมื่อผู้ใช้ติดตั้ง PWA ของคุณ ไอคอน 512px ใช้สำหรับหน้าจอ splash ของ PWA เครื่องมือนี้สร้างไฟล์ PNG ทั้งสองพร้อม site.webmanifest ที่มี icons array ที่ถูกต้อง เพิ่ม <link rel="manifest" href="/site.webmanifest"> ในแท็ก <head> ของ HTML เพื่อเปิดใช้งานการติดตั้ง PWA

HTML snippet ที่สร้างขึ้นประกอบด้วย: แท็ก <link rel="icon"> สำหรับ favicon มาตรฐาน, <link rel="apple-touch-icon"> สำหรับไอคอนหน้าจอหลัก iOS, <link rel="manifest"> ที่ชี้ไปยัง site.webmanifest สำหรับรองรับ PWA และ <meta name="msapplication-config"> ที่ชี้ไปยัง browserconfig.xml สำหรับไทล์ Windows วางทุกบรรทัดในแท็ก <head> ของ HTML ของคุณ อัปเดตพาธหากไอคอนอยู่ในโฟลเดอร์ย่อย

ได้ เบราว์เซอร์สมัยใหม่ (Chrome 80+, Firefox 41+, Safari 15+) รองรับ SVG favicon ผ่าน <link rel="icon" type="image/svg+xml" href="/favicon.svg"> SVG favicon ปรับขนาดได้สมบูรณ์แบบทุกความละเอียดและรองรับ dark mode ผ่าน CSS @media (prefers-color-scheme: dark) เปิดใช้ตัวเลือก "รวม favicon.svg" ในเครื่องมือนี้เพื่อเพิ่ม SVG ในแพ็คเกจของคุณ แต่ควรเก็บไฟล์ ICO และ PNG ไว้ด้วยสำหรับ Safari 14 และเบราว์เซอร์รุ่นเก่าที่ยังไม่รองรับ

ไม่ การปรับขนาด แปลงรูปแบบ และจัดแพ็คเกจทั้งหมดทำงานในเบราว์เซอร์ของคุณผ่าน JavaScript รูปภาพไม่ถูกส่งไปยังเซิร์ฟเวอร์ใดเลย ไม่มีการเก็บบันทึกหรือส่งข้อมูลใดๆ — กระบวนการทั้งหมดเป็นส่วนตัวอย่างสมบูรณ์และทำงานแบบออฟไลน์ได้หลังจากโหลดหน้าเว็บแล้ว

ตัวสร้าง Favicon คืออะไร?

เครื่องมือที่รับรูปภาพหนึ่งรูปแล้วสร้างไอคอนทุกขนาดที่เว็บไซต์ต้องการ -- favicon.ico, Apple touch icon, ไอคอน manifest สำหรับ Android ทุกอย่างครบ อัปโหลดครั้งเดียวแล้วดาวน์โหลดแพ็คเกจพร้อมใช้งาน

สิ่งที่คุณจะได้รับ

ไฟล์ ICO หลายความละเอียด, PNG แยกตั้งแต่ 16x16 ถึง 512x512, Apple touch icon รวมถึง HTML snippet และ site.webmanifest ที่นำไปใส่ในโปรเจกต์ได้เลย

กรณีใช้งานทั่วไป

เปิดเว็บไซต์ใหม่และต้องการจัดการไอคอนทั้งหมดในครั้งเดียว รีแบรนด์และเปลี่ยน favicon ทุกที่ พัฒนา PWA และต้องเตรียมไอคอน manifest ในขนาดที่ถูกต้อง

เคล็ดลับสำหรับผลลัพธ์ที่ดี

เริ่มจากรูปสี่เหลี่ยมจัตุรัสอย่างน้อย 1024x1024 พิกเซล PNG โปร่งใสให้ความยืดหยุ่นสูงสุด ออกแบบให้เรียบง่าย -- favicon มีขนาดเล็กมาก รายละเอียดจะหายไป

ความเป็นส่วนตัว

การปรับขนาดและแพ็คเกจทั้งหมดทำในเบราว์เซอร์ รูปภาพไม่ถูกส่งไปเซิร์ฟเวอร์ใดๆ และไม่มีอะไรถูกเก็บไว้หลังปิดแท็บ

ความปลอดภัยและความเป็นส่วนตัว

ความปลอดภัยของข้อมูลของคุณคือความสำคัญอันดับแรกของเรา

การประมวลผลภายใน

การประมวลผลทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณ

ไม่มีการถ่ายโอนข้อมูล

ข้อมูลของคุณจะไม่ถูกส่งไปยังเซิร์ฟเวอร์ของเรา

ไม่มีการจัดเก็บข้อมูล

ไม่มีข้อมูลถูกเก็บหรือแบ่งปัน

การเข้ารหัส SSL

การเข้ารหัส SSL สำหรับการเชื่อมต่อที่ปลอดภัย

ขั้นตอนถัดไป

เครื่องมือปรับขนาดรูปภาพ

ปรับขนาดรูปภาพด้วยค่าพิกเซลหรือเปอร์เซ็นต์

ตัวแปลง SVG เป็นรูปภาพ

แปลงไฟล์ SVG เป็นรูปแบบ PNG, JPG, GIF หรือ WebP

เครื่องมือนี้มีประโยชน์หรือไม่?

ตัวสร้าง Favicon - ตัวสร้างแพ็คเกจไอคอนที่สมบูรณ์

อัปโหลดรูปภาพต้นฉบับของคุณ

ลากและวางรูปภาพของคุณที่นี่

ขนาดไอคอน

ดูตัวอย่างและดาวน์โหลดไอคอนแต่ละรายการ

แนวทางด่วน

Snippet HTML

ตัวอย่าง Manifest

ทำไมต้องใช้ตัวสร้าง Favicon?

แพ็คเกจสมบูรณ์

การปรับขนาดอัจฉริยะ

Snippet พร้อมใช้

เป็นมิตรต่อความเป็นส่วนตัว

วิธีใช้ตัวสร้าง Favicon?

เพิ่มรูปภาพของคุณ

เลือกขนาดและสไตล์

สร้างตัวอย่าง

ดาวน์โหลดแพ็คเกจ

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

ตัวสร้าง Favicon คืออะไร?

สิ่งที่คุณจะได้รับ

กรณีใช้งานทั่วไป

เคล็ดลับสำหรับผลลัพธ์ที่ดี

ความเป็นส่วนตัว

ความปลอดภัยและความเป็นส่วนตัว

การประมวลผลภายใน

ไม่มีการถ่ายโอนข้อมูล

ไม่มีการจัดเก็บข้อมูล

การเข้ารหัส SSL

ขั้นตอนถัดไป

เครื่องมือปรับขนาดรูปภาพ

ตัวแปลง SVG เป็นรูปภาพ

ตัวสร้าง Favicon - ตัวสร้างแพ็คเกจไอคอนที่สมบูรณ์

อัปโหลดรูปภาพต้นฉบับของคุณ

ลากและวางรูปภาพของคุณที่นี่

Advanced: individual sizes

ขนาดไอคอน

ดูตัวอย่างและดาวน์โหลดไอคอนแต่ละรายการ

แนวทางด่วน

Snippet HTML

ตัวอย่าง Manifest

ทำไมต้องใช้ตัวสร้าง Favicon?

แพ็คเกจสมบูรณ์

การปรับขนาดอัจฉริยะ

Snippet พร้อมใช้

เป็นมิตรต่อความเป็นส่วนตัว

วิธีใช้ตัวสร้าง Favicon?

เพิ่มรูปภาพของคุณ

เลือกขนาดและสไตล์

สร้างตัวอย่าง

ดาวน์โหลดแพ็คเกจ

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

รูปแบบไฟล์ไหนให้ผลดีที่สุดเมื่อใช้เป็นต้นฉบับ?

ตัวสร้างนี้ผลิตไอคอนขนาดอะไรบ้าง?

favicon.ico ต่างจาก PNG favicon อย่างไร?

Apple Touch icon คืออะไร?

ไอคอน PWA ที่รวมมามีอะไรบ้าง และ manifest คืออะไร?

HTML snippet ที่สร้างขึ้นประกอบด้วยอะไรบ้าง?

ใช้ SVG เป็น favicon ได้ไหม?

รูปภาพของฉันถูกอัปโหลดไปที่ใดไหม?

ตัวสร้าง Favicon คืออะไร?

สิ่งที่คุณจะได้รับ

กรณีใช้งานทั่วไป

เคล็ดลับสำหรับผลลัพธ์ที่ดี

ความเป็นส่วนตัว

ความปลอดภัยและความเป็นส่วนตัว

การประมวลผลภายใน

ไม่มีการถ่ายโอนข้อมูล

ไม่มีการจัดเก็บข้อมูล

การเข้ารหัส SSL

ขั้นตอนถัดไป

เครื่องมือปรับขนาดรูปภาพ

ตัวแปลง SVG เป็นรูปภาพ

เครื่องมือที่เกี่ยวข้อง

ตัวเพิ่มประสิทธิภาพ SVG

ตัวสร้างสัญญาณรบกวนรูปภาพ

ตัวตกแต่งภาพหน้าจอ

ตัวอ่านรหัส QR

เครื่องมือสร้างชุดสี

เครื่องมือครอปรูปภาพ