เครื่องสร้างชุดไฟล์ Favicon

สร้างชุดไฟล์ favicon แบบครบชุด — ICO, PNG, Apple touch icon, ไอคอน PWA, web manifest และ HTML snippet — ภายในเบราว์เซอร์ของคุณ

ภาพต้นฉบับ
ลากวางหรือเลือกไฟล์ PNG, JPEG, WebP หรือ SVG ทุกแพลตฟอร์มจะใช้ภาพนี้เว้นแต่คุณจะกำหนดค่าทับด้านล่าง
ข้อมูลเว็บไซต์
ใช้โดย manifest, apple-touch-icon และ HTML snippet

แสดงเมื่อชื่อแอปยาวเกินไปสำหรับพื้นที่นั้น

ไม่บังคับ จะถูกตัดออกจาก manifest เมื่อเว้นว่าง

ตำแหน่งที่ PWA ที่ติดตั้งแล้วจะเปิดขึ้น

คำนำหน้าที่ใช้กับทุก href ใน HTML snippet และทุก src ในอาร์เรย์ icons ของ manifest

กำหนด theme_color ใน manifest และแท็ก HTML <meta name="theme-color">

background_color ใน manifest ใช้โดยเบราว์เซอร์เพื่อวาด splash screen ของ PWA

Favicon สำหรับเบราว์เซอร์เดสก์ท็อป
ควบคุม favicon.ico, favicon-16x16.png, favicon-32x32.png และ (เมื่อต้นฉบับเป็น SVG) favicon.svg

ระยะห่างเชิงสายตารอบภาพต้นฉบับภายในไอคอน

แท็บเบราว์เซอร์เดสก์ท็อป
แท็บเบราว์เซอร์เดสก์ท็อป (dark)
ผลลัพธ์ของเครื่องมือค้นหา
iOS web clip
ควบคุม apple-touch-icon.png ขนาด 180×180 ที่ใช้บนหน้าจอหลักของ iOS

ไอคอน Apple ต้องทึบแสง ดังนั้นการเติมสีนี้จะถูกใช้เสมอ

ระยะห่างเชิงสายตารอบภาพต้นฉบับภายในไอคอน

หน้าจอหลัก iOS
ไอคอน PWA
ควบคุม pwa-192x192.png, pwa-512x512.png และเวอร์ชัน maskable

ระยะห่างเชิงสายตารอบภาพต้นฉบับภายในไอคอน

พื้นที่ปลอดภัยที่ W3C แนะนำคือ 40% เนื้อหาต้นฉบับจะยังคงมองเห็นได้ภายในมาสก์ของทุกแพลตฟอร์ม

Taskbar ของ Windows
Launcher ของ Android
ชุดไฟล์ที่สร้างขึ้น
คลิก Generate เพื่อเรนเดอร์ทุก asset, สร้างไฟล์ zip และคัดลอก HTML snippet
ยังไม่มีชุดไฟล์
เลือกภาพแล้วคลิก Generate เพื่อรวมชุดไฟล์ favicon

เครื่องมือนี้สร้างอะไรบ้าง

ตัวสร้างนี้แปลงรูปภาพเพียงรูปเดียวให้กลายเป็นชุดไฟล์ favicon ที่ครบถ้วนและทันสมัย — ไฟล์ .ico หลายขนาดสำหรับเบราว์เซอร์รุ่นเก่า, ไฟล์ PNG ในขนาด 16 / 32 / 180 / 192 / 512, ไฟล์ .svg ต้นฉบับเป็นทางเลือก, ไฟล์ site.webmanifest สำหรับ PWA, และโค้ด HTML ที่คุณนำไปวางใน <head> ได้ ทุกไบต์ถูกสร้างขึ้นภายใน เบราว์เซอร์ของคุณ ไม่มีการอัปโหลด ไม่มีเซิร์ฟเวอร์ ไม่มี analytics

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

  • favicon.ico — รูปหลายขนาดในไฟล์เดียว (16 / 32 / 48) สำหรับแท็บเบราว์เซอร์, บุ๊กมาร์ก และทางลัด Windows รุ่นเก่า
  • favicon-16x16.png และ favicon-32x32.png — รูปแบบ PNG สมัยใหม่ที่ เบราว์เซอร์ปัจจุบันใช้งาน
  • favicon.svg — รวมอยู่ในชุดไฟล์เฉพาะเมื่อรูปต้นฉบับของคุณเป็น SVG และ สวิตช์ “Use original SVG” เปิดอยู่
  • apple-touch-icon.png — ขนาด 180×180, ทึบแสง, ใช้กับหน้าจอหลักของ iOS
  • pwa-192x192.png และ pwa-512x512.png — ไอคอน PWA มาตรฐาน
  • pwa-maskable-192x192.png และ pwa-maskable-512x512.png — เวอร์ชัน maskable พร้อมพื้นที่ปลอดภัยตามคำแนะนำของ W3C
  • site.webmanifest — manifest ของ PWA ที่เชื่อมโยงกับไอคอนข้างต้น

ระยะขอบ, พื้นหลัง และพื้นที่ปลอดภัยของ maskable ทำงานอย่างไร

แต่ละแพลตฟอร์มมีระยะขอบของตัวเอง (“Margin”) เพื่อให้คุณสามารถเว้นพื้นที่หายใจ ภายในผืนผ้าใบของไอคอนได้ สวิตช์ “Add background” จะวาดสี่เหลี่ยมทึบแสง ไว้ด้านหลังรูปต้นฉบับ — มีประโยชน์เมื่อรูปต้นฉบับโปร่งใสและ ปลายทางต้องการความทึบแสง (หน้าจอหลักของ Apple) หรือเพียงเพื่อความ ตัดกันทางสายตาในแท็บเบราว์เซอร์ ไอคอน PWA แบบ maskable ใช้พื้นที่ปลอดภัย เพิ่มเติมนอกเหนือจากระยะขอบของแพลตฟอร์ม: สิ่งใดก็ตามที่อยู่นอกพื้นที่ ตรงกลางประมาณ 80% อาจถูกตัดโดย Android, Windows หรือ ChromeOS เมื่อ แพลตฟอร์มเหล่านั้นใช้มาสก์รูปวงกลม, มุมโค้ง หรือทรง squircle

การเชื่อมชุดไฟล์เข้ากับเว็บไซต์ของคุณ

  1. แตกไฟล์ archive ที่ดาวน์โหลดมาลงในรูทของเว็บไซต์ (เพื่อให้ไฟล์อยู่ที่ /favicon.ico, /site.webmanifest ฯลฯ)
  2. วางโค้ด HTML ลงใน <head> ของเว็บไซต์
  3. หากคุณให้บริการ asset จากเส้นทางย่อย (ตัวอย่างเช่น /static/icons/) ให้ตั้งค่า “Asset path” ก่อนสร้าง เพื่อให้โค้ดและ manifest ใช้ URL ที่ถูกต้อง
  4. หากคุณปรับแต่ง manifest เกินกว่าที่เครื่องมือนี้รองรับ (ตัวอย่างเช่น เพิ่ม categories หรือ screenshots) ให้เปิด site.webmanifest ในโปรแกรมแก้ไขข้อความและแก้ไขโดยตรง — มันเป็น JSON ธรรมดา