เครื่องมือสร้าง Favicon

เปลี่ยนโลโก้หรือภาพใดก็ได้ให้เป็นชุด favicon ที่ครบถ้วน: favicon.ico หลายขนาด, apple-touch-icon, ไอคอน Android/เว็บแอป และสตริป HTML ที่พร้อมวาง เลือกรูปทรงสี่เหลี่ยม มุมมน หรือวงกลม เพิ่มระยะขอบในหรือสีพื้นหลัง แล้วดาวน์โหลดทั้งแพ็กเกจเป็นไฟล์ ZIP ทุกอย่างถูกสร้างขึ้นภายในเบราว์เซอร์ของคุณ — ภาพของคุณไม่เคยถูกอัปโหลด

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

เครื่องมือสร้าง favicon ของ PixelVault เปลี่ยนภาพใดก็ได้ให้เป็นชุดไอคอนเว็บไซต์และแอปที่ครบถ้วนโดยไม่ต้องอัปโหลดอะไรเลย เว็บ “favicon generator” ส่วนใหญ่ขอให้คุณส่งโลโก้ไปยังเซิร์ฟเวอร์ของพวกเขาก่อนที่คุณจะได้ไอคอนสักไฟล์กลับมา ที่นี่ ทุกไฟล์ — ทั้ง favicon.ico หลายความละเอียด ไอคอน PNG และไฟล์ manifest — ถูกสร้างขึ้นภายในเบราว์เซอร์ของคุณ งานออกแบบแบรนด์ของคุณจึงไม่เคยออกจากอุปกรณ์

เว็บไซต์สมัยใหม่ต้องการไอคอนมากกว่าหนึ่งไฟล์ เบราว์เซอร์อ่าน favicon.ico ขนาดเล็กสำหรับแถบที่อยู่และแท็บ, iOS ต้องการ apple-touch-icon ขนาด 180×180 สำหรับหน้าจอโฮม ส่วน Android และ PWA ใช้ PNG ขนาด 192 และ 512px ที่อ้างอิงจากไฟล์ web manifest PixelVault สร้างทั้งหมดนี้พร้อมกันจากภาพต้นฉบับเพียงภาพเดียว และมอบสตริป HTML ที่พร้อมวางให้คุณ การเชื่อมต่อทั้งหมดจึงใช้เวลาไม่กี่วินาที

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

วิธีการทำงาน

เมื่อคุณเพิ่มภาพ เบราว์เซอร์จะถอดรหัสภาพลงในหน่วยความจำ และ PixelVault จะวาดภาพนั้นใหม่ลงบนแคนวาสสี่เหลี่ยมจัตุรัสที่ขนาดไอคอนแต่ละขนาด พร้อมใช้มาสก์รูปทรง ระยะขอบใน และพื้นหลังที่คุณเลือก แคนวาสแต่ละอันถูกเข้ารหัสเป็น PNG ด้วยตัวเข้ารหัสในตัวของเบราว์เซอร์ และ PNG ขนาด 16, 32 และ 48px ถูกห่อรวมเป็น favicon.ico ไฟล์เดียว (คอนเทนเนอร์ PNG-in-ICO ที่รองรับกันอย่างกว้างขวาง) โลโก้ SVG จะถูกแปลงเป็นภาพแรสเตอร์ภายในเครื่องที่ความละเอียดสูงก่อน ไอคอนจึงยังคมชัด

ทำไมการประมวลผลในเครื่องจึงสำคัญ

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

รูปแบบที่รองรับ

  • ICO — favicon.ico หลายความละเอียด (16/32/48px) สำหรับแท็บและแถบที่อยู่
  • PNG — apple-touch-icon (180px) และไอคอน Android/PWA (192 และ 512px)
  • SVG — รับเป็นอินพุตเท่านั้น — โลโก้เวกเตอร์ถูกแปลงเป็นภาพแรสเตอร์ภายในเครื่องเพื่อไอคอนที่คมชัดที่สุด
  • JPG / WebP — รับเป็นภาพต้นฉบับได้เช่นเดียวกับ PNG

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

  • สร้าง favicon.ico และไอคอนแอปสำหรับเว็บไซต์หรือแลนดิงเพจใหม่
  • แปลงโลโก้ PNG หรือ SVG ให้เป็นไฟล์ ICO หลายขนาดที่ถูกต้อง
  • สร้าง apple-touch-icon และไอคอน web manifest สำหรับ PWA
  • ปรับชุด favicon ของแบรนด์ให้ใหม่โดยไม่ต้องส่งโลโก้ให้บริการออนไลน์

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

ภาพของฉันถูกอัปโหลดเพื่อสร้าง favicon หรือไม่?
ไม่ ทั้ง favicon.ico ไอคอน PNG และไฟล์ manifest ถูกสร้างขึ้นภายในเบราว์เซอร์ของคุณด้วย Canvas API ภาพของคุณไม่เคยออกจากอุปกรณ์
ฉันจะได้ขนาดและไฟล์อะไรบ้าง?
favicon.ico หลายความละเอียด (16, 32 และ 48px), ไอคอน PNG ขนาด 16, 32, 48, 180 (apple-touch-icon), 192 และ 512px, ไฟล์ site.webmanifest และสตริป HTML สำหรับวางลงใน <head> ของคุณ
ฉันแปลง PNG หรือ SVG เป็น ICO ได้หรือไม่?
ได้ ลากไฟล์ PNG, JPG, SVG หรือ WebP เข้ามาแล้วดาวน์โหลด favicon.ico ของจริง โลโก้ SVG จะถูกแปลงเป็นภาพแรสเตอร์ภายในเครื่องที่ความละเอียดสูงก่อน
ภาพแบบไหนได้ผลดีที่สุด?
ภาพสี่เหลี่ยมจัตุรัสที่มีโลโก้เรียบง่ายและคอนทราสต์สูง ภาพที่ไม่เป็นสี่เหลี่ยมจัตุรัสจะถูกครอบตัดจากกึ่งกลางให้พอดี ใช้ตัวควบคุมระยะขอบในและรูปทรงเพื่อจัดกรอบตามที่คุณต้องการ
ฉันติดตั้ง favicon อย่างไร?
แตกไฟล์แพ็กเกจลงในโฟลเดอร์รากของเว็บไซต์ แล้ววางสตริป HTML ที่ให้มาไว้ใน <head> ของหน้าเว็บ เบราว์เซอร์ส่วนใหญ่จะรับ favicon.ico ไปใช้โดยอัตโนมัติ