คู่มือ Favicon แบบโปร่งใส

แท็บเบราว์เซอร์ แถบบุ๊กมาร์ก และตัวเรียกใช้งานมือถือวางอยู่บนพื้นหลังที่คาดเดาไม่ได้ เช่น สีขาว สีเทาเข้ม วอลเปเปอร์เบลอ หรือสีอ่อนของแบรนด์

favicon ที่มีสี่เหลี่ยมสีขาวอบดูเหมือนสติกเกอร์ในโหมดมืด อัลฟ่าแบบโปร่งใสทำให้ UI Chrome แสดงผ่านเครื่องหมายของคุณ

ความโปร่งใสไม่ใช่ความไร้สาระ นี่คือวิธีที่อินเทอร์เฟซสมัยใหม่ผสมผสานไอคอนเข้ากับการออกแบบแท็บ Material, Fluent และ Safari

Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.

ส่งออกโลโก้ของคุณเป็น PNG-32 ด้วยอัลฟ่า หรือ SVG โดยไม่มีเลเยอร์สี่เหลี่ยมผืนผ้าพื้นหลัง

จุดบกพร่องไวท์บ็อกซ์ส่วนใหญ่มีต้นกำเนิดในไฟล์ต้นฉบับ ไม่ใช่ตัวแปลง favicon ตรวจสอบเลเยอร์ Photoshop หรือการเติม Figma ก่อนที่จะตำหนิเครื่องมือ

หากคุณต้องเริ่มจาก JPG ให้ตัดพื้นหลังออกด้วยตนเองหรือยอมรับการเติมสีทึบ — JPG ไม่มีช่องอัลฟา

รายการที่บีบอัด PNG ภายใน .ico จะรักษาอัลฟ่าแบบเต็มไว้ รายการ BMP ที่ไม่มีการบีบอัดภายในตัวเข้ารหัสรุ่นเก่ามักจะทำให้ความโปร่งใสลดลง

ใช้ตัวสร้างที่เลือกการบีบอัด PNG ต่อเฟรมเมื่อขนาดเกิน 64×64 นั่นคือแนวปฏิบัติมาตรฐานในการใช้เครื่องมือปี 2026

ตรวจสอบความโปร่งใสโดยเปิด .ico บนพื้นหลังเดสก์ท็อปทั้งแบบสว่างและสีเข้มในหน้าตัวอย่าง File Explorer

แรสเตอร์ ICO เป็นแบบคงที่ — ออกแบบเครื่องหมายที่อ่านได้ทั้งบนแท็บสว่างและมืดโดยไม่ต้องเขียนพิกเซลใหม่

SVG สามารถปรับเปลี่ยนได้: ฝัง <style>@media (prefers-color-scheme: dark) { ... }</style> เพื่อกลับสีเติมหรือสลับสีเฉพาะจุด

บางทีมจัดส่งโหมดมืด SVG บวกกับทางเลือก .ico ที่เป็นกลางสำหรับลูกค้าที่ไม่เคยดึงข้อมูล SVG ซึ่งครอบคลุมเส้นทางการปรับตัวและมรดก

เครื่องหมายโลโก้สีน้ำเงินเท่านั้น: แหล่งที่มา PNG โปร่งใส → .ico หลายขนาด → ดูถูกต้องบนแท็บ Safari สีขาวและแท็บ Firefox สีเข้ม

เครื่องหมายตัวอักษรสีดำ: เพิ่มเส้นขอบสีอ่อนๆ หรือใช้ SVG โหมดมืด CSS สีดำบริสุทธิ์จะหายไปบนแท็บสีเข้ม

โลโก้ป้ายแบบวงกลม: เว้นช่องว่างภายใน 10% ไว้ภายในผืนผ้าใบสี่เหลี่ยมจัตุรัส เพื่อไม่ให้ขอบที่เป็นรอยหยักติดกัน

ไอคอนสไตล์อิโมจิ: สีเรียบพร้อมมุมโปร่งใส หลีกเลี่ยงการไล่ระดับสีที่วงดนตรีที่ 16 × 16

ทุกเบราว์เซอร์เคารพ ICO alpha หรือไม่ เบราว์เซอร์สมัยใหม่จะดำเนินการเมื่อเฟรมถูกบีบอัด PNG

ความโปร่งใสจะส่งผลเสียต่อความแตกต่างในผลการค้นหาหรือไม่ Google อาจวางไอคอนของคุณเป็นสีขาว ทดสอบความชัดเจนอยู่แล้ว

ฉันสามารถใช้แสงกึ่งโปร่งใสได้หรือไม่? แสงนวลๆ ไม่ค่อยรอดจากระยะ 16×16 — ลดความซับซ้อนของเอฟเฟ็กต์

เติมสีขาวเคยได้ไหม? เฉพาะในกรณีที่เครื่องหมายแบรนด์ของคุณตั้งใจให้เป็นแผ่นสี่เหลี่ยมทึบเท่านั้น

กล่องสีขาวหลังจากส่งออก ICO: แหล่งที่มาเปิดใช้งานเลเยอร์พื้นหลัง หรือเครื่องมือที่ใช้การเข้ารหัส BMP ส่งออก PNG-32 อีกครั้งและสร้างใหม่

ไอคอนมองไม่เห็นบนแท็บสีเข้ม: สัญลักษณ์สีเข้มบนพื้นหลังโปร่งใส ทำให้ SVG สว่างขึ้นหรือเพิ่มลายเส้นเล็กๆ น้อยๆ

ขอบพิกเซลรอบๆ โลโก้: ปัญหาอัลฟ่าที่มีการคูณล่วงหน้า — ส่งออกซ้ำจากเครื่องมือออกแบบด้วยอัลฟ่ามาตรฐาน

ความโปร่งใสใน Chrome แต่ไม่ใช่ Edge: Edge แคช ICO เก่าไว้ รีเฟรชแคชหรือชนชื่อไฟล์หนึ่งครั้ง

เครื่องหมายรูปเงาดำที่มีหนึ่งหรือสองสีจะรอดพ้นจากการลดขนาดได้ดีที่สุด ลองนึกถึงนกใน Twitter ไม่ใช่บริบทที่ใช้งานการถ่ายภาพ

สไตล์เค้าร่างต้องมีความกว้างของเส้นขีดอย่างน้อย 2px ที่ 16×16 ในต้นแบบของคุณ — เส้นที่บางลงจะหายไป

การไล่ระดับสีไม่ค่อยรอด 16 × 16; ปรับให้เป็นสีทึบของแบรนด์สำหรับรุ่น favicon แม้ว่าเว็บไซต์จะคงการไล่ระดับสีไว้ก็ตาม

การเสริม: เว้นพื้นที่ว่างไว้ 10–15% ภายในผืนผ้าใบสี่เหลี่ยมจัตุรัส เพื่อให้มาสก์ OS ไม่ตัดมุม

ทดสอบทั้ง #ffffff และ #1e1e1e พื้นหลังในเครื่องมือแสดงตัวอย่างก่อนเปิดตัว

Figma: ส่งออก PNG ที่ 512×512 โดยเปิดใช้งานความโปร่งใส ปิดการใช้งาน รวมการเติมขอบกล่อง

Photoshop: ใช้บันทึกสำหรับเว็บ PNG-24 ด้วยความโปร่งใส ละทิ้ง ICC หากขนาดไฟล์มีความสำคัญ

ผู้วาดภาพประกอบ: ส่งออก SVG ด้วยคุณลักษณะการนำเสนอ จากนั้นลดความซับซ้อนด้วย SVGO ก่อนใช้งาน favicon

ร่าง: ตรวจสอบให้แน่ใจว่าพื้นหลัง Artboard ไม่ได้ส่งออกเป็นเลเยอร์สี่เหลี่ยมผืนผ้าสีขาว

การส่งออกแบบฟรีของ Canva บางครั้งจะทำให้ความโปร่งใสลดลง — ตรวจสอบในการแสดงตัวอย่างบน macOS ก่อนที่จะเชื่อถือไฟล์

ไอคอนแท็บเบราว์เซอร์เป็นจุดสนใจหลัก แต่แหล่งที่มาของ PNG แบบโปร่งใสยังปรับปรุงการรวม PWA Splash บน Android อีกด้วย

โปรแกรมอ่าน RSS บางตัวแสดงฟีด favicon บนแถวที่มีสี — ผสมผสานความโปร่งใส กล่องสีขาวดูเหมือนแมลง

การส่งออก PDF และการพิมพ์ CSS ละเว้น favicon ทั้งหมด อย่าใช้ความโปร่งใสของ favicon สำหรับการสร้างแบรนด์ของสิ่งพิมพ์

ใช้ยูทิลิตีแสดงตัวอย่าง favicon ของเราหรือตารางหมากรุกของโปรแกรมแก้ไขรูปภาพเพื่อระบุพิกเซลขอบกึ่งโปร่งใสก่อนนำไปใช้งาน

ซูมไปที่ 400% ที่เทียบเท่า 32×32 รัศมีสีเทารอบๆ โลโก้หมายความว่าพื้นหลังไม่ได้ถูกลบออกทั้งหมด

ส่งออกซ้ำจากเวกเตอร์เมื่อรัศมียังคงมีอยู่ — การลบแบบแมนนวลในโปรแกรมแก้ไขแรสเตอร์นั้นแทบจะไม่ได้ปรับขนาดไปยังทุกเฟรม ICO

โลโก้ภาพถ่ายไม่ค่อยทำงานในรูปแบบ favicon แม้ว่าจะเป็นแบบอัลฟ่าก็ตาม — ทำให้ง่ายขึ้นเป็นอักษรย่อหรือสัญลักษณ์

ขอบที่มีการลบรอยหยักอย่างมากในภาพถ่ายที่ไม่ว่างจะสร้างรัศมีที่มีเสียงรบกวนที่ขนาด 16×16 ภาพเงาของเวกเตอร์แก้ไขปัญหานี้

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

แคมเปญตามฤดูกาลอาจใช้ไอคอนชั่วคราวที่ไม่โปร่งใส เปลี่ยนกลับหลังจากแคมเปญเพื่อหลีกเลี่ยงความสับสนของผู้ใช้

ยกเว้นเครื่องหมายการค้าตามกฎหมายที่ต้องใส่สีพื้นหลัง โปรดปฏิบัติตามคำแนะนำด้านแบรนด์เกี่ยวกับแนวทางปฏิบัติที่ดีที่สุดด้านความโปร่งใส

สร้างหน้าทดสอบ HTML โดยมีพื้นหลังสีอ่อนและสีเข้มเรียงกัน โหลดเนื้อหา favicon ของคุณเป็นแท็ก img ขนาดใหญ่เพื่อตรวจสอบ

วางซ้อนการเรนเดอร์ 16×16 บนสกรีนช็อตของแท็บเบราว์เซอร์จริงเพื่อตรวจจับปัญหาคอนทราสต์ตั้งแต่เนิ่นๆ

แชร์ลิงก์หน้าทดสอบในการทบทวนการออกแบบแทนที่จะส่งอีเมลแนบไฟล์ PNG ที่ไม่ชัดเจน

เมื่อความโปร่งใสผ่านหน้าแล็บ ให้เลื่อนระดับไฟล์เดียวกันเป็นการใช้งานจริงโดยไม่ต้องส่งออกซ้ำ

บันทึกหน้าแล็บไว้ในวิกิภายในของคุณ เพื่อให้ผู้รับเหมาทำซ้ำขั้นตอน QA เดียวกันทุกครั้ง

ผู้ออกแบบวนซ้ำเมื่อ QA ล้มเหลว ข้อบกพร่องด้านความโปร่งใสมักจะได้รับการแก้ไขในแหล่งที่มา ไม่ใช่ในตัวแปลง

เปรียบเทียบ ICO และ PNG เคียงข้างกันบนหน้าแล็บ — ไม่ตรงกันหมายความว่าตัวสร้างทิ้งอัลฟ่าในรูปแบบเดียว

ทดสอบอีกครั้งหลังจากเปลี่ยนธีม OS ทุกครั้งใน macOS และ Windows — ผู้ใช้สลับโหมดมืดบ่อยกว่าที่ทีมคาดหวัง

เพิ่ม URL ของหน้าห้องปฏิบัติการลงในเทมเพลตคำขอดึงของคุณ เพื่อให้ QA โปร่งใสไม่ถูกข้ามโดยไม่ได้ตั้งใจ