SVG กับไอคอน ICO

SVG favicons เป็นเอกสาร XML เดียวที่ปรับขนาดเป็นแท็บขนาดใดก็ได้โดยไม่มีไบต์เพิ่มเติม ไฟล์ ICO เป็นคอนเทนเนอร์ไบนารี่ที่บรรจุเฟรมที่แรสเตอร์ไว้ล่วงหน้าตั้งแต่หนึ่งเฟรมขึ้นไป

สมัยใหม่ Chromium, Firefox และ Safari สามารถแสดงผล SVG ในแท็บได้ เชลล์ Windows การฝังแบบเก่า และการดึงข้อมูล /favicon.ico โดยนัยยังคงต้องการข้อมูลแรสเตอร์ ICO

คำถามไม่ใช่ SVG หรือ ICO แต่เป็น SVG บวก ICO โดยที่ SVG อยู่ในรายการสำหรับเบราว์เซอร์ที่มีความสามารถ และ ICO เป็นเครือข่ายความปลอดภัย

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.

ไฟล์หนึ่งไฟล์ครอบคลุมพิกเซลลอจิคัลขนาด 16×16 ถึง 256×256 ไม่มีการตั้งค่า mipmap ที่จะบำรุงรักษา

ขนาดไฟล์มักจะต่ำกว่า 2KB สำหรับเครื่องหมายธรรมดา ซึ่งเล็กกว่า .ico แบบหกเฟรมมาก

CSS ที่ฝังไว้สามารถกลับสีเติมภายใต้ @media (prefers-color-scheme: dark) ทำให้คุณมีแท็บที่ปรับเปลี่ยนได้โดยไม่ต้องส่งออกเนื้อหากลางคืนแยกกัน

SVG เป็นข้อความ คุณสามารถแยกการเปลี่ยนแปลง favicon ใน Git ได้เหมือนกับเนื้อหาต้นทางอื่นๆ

เบราว์เซอร์ขอ /favicon.ico แม้ว่าคุณจะละเว้นจาก HTML ก็ตาม คำขอนั้นจะต้องส่งคืนคอนเทนเนอร์ไอคอนที่ถูกต้อง ไม่ใช่ SVG ที่เปลี่ยนชื่อเป็น .ico

หมุด Windows, ลิงก์ Outlook คลี่ออก และโปรแกรมอ่าน RSS บางตัวจะเพิกเฉยต่อ SVG โดยสิ้นเชิง คาดว่าการแสดงผลประมาณ 5% จะใช้เส้นทาง ICO เท่านั้น

ICO ยังให้พิกเซลที่คาดเดาได้ ตัวกรอง SVG ที่ซับซ้อนอาจแสดงผลแตกต่างกันไปตามเครื่องยนต์ ทางเลือกแรสเตอร์ทำให้รูปลักษณ์มีเสถียรภาพ

ประกาศ ICO ก่อนเพื่อความเข้ากันได้สูงสุด จากนั้นจึงประกาศ SVG เพื่อการปรับปรุง:

<link rel="icon" href="/favicon.ico" size="any">

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

เบราว์เซอร์ที่มีความสามารถจะเลือกใช้ SVG เมื่อประเภทและ MIME ถูกต้อง คนอื่นๆ กลับไปใช้ ICO โดยไม่มีสัญลักษณ์รูปภาพที่เสียหาย

ใช้ร่วมกับกับไอคอน apple-touch-icon ขนาด 180×180 PNG เนื่องจาก iOS ไม่ได้ใช้ SVG สำหรับไอคอนบนหน้าจอหลัก

ตัวอักษรขาวดำ: SVG พร้อม <path> เดียวและการสลับการเติมโหมดมืด ICO สร้างจากรูปร่างเดียวกันสำหรับทางลัด Windows

โลโก้ไล่ระดับสี: ทำให้ง่ายขึ้นสำหรับ SVG (การเติมแบบเรียบเท่านั้น) เก็บการไล่ระดับสีทางการตลาดไว้บนเว็บไซต์ ไม่ใช่ในแท็บ 16×16

ไซต์ของรัฐบาลหรือองค์กรที่มีข้อกำหนด IE เดิม: จัดลำดับความสำคัญ ICO; เพิ่ม SVG หลังจากที่การวิเคราะห์แสดงการรับส่งข้อมูล IE เล็กน้อยเท่านั้น

ออกแบบระบบด้วยสีของแบรนด์ที่เข้มงวด: เก็บ SVG ใน repo รันงาน CI เพื่อสร้าง .ico ใหม่ในแต่ละแท็ก release

ฉันสามารถใช้เฉพาะ SVG ได้หรือไม่ ไม่ใช่หากคุณสนใจเกี่ยวกับทางลัด Windows และการดึงข้อมูล .ico โดยนัย

Safari รองรับ SVG favicon หรือไม่ Safari 15+ บนเดสก์ท็อปทำได้ หน้าจอหลัก iOS ยังต้องการ PNG

SVG จะทำให้การทาสีครั้งแรกช้าลงหรือไม่? SVG ขนาด 1–2KB นั้นไม่สำคัญเลยเมื่อเทียบกับรูปภาพหลัก

ฉันสามารถฝังบิตแมปภายใน SVG ได้หรือไม่ คุณทำได้ แต่คุณสูญเสียความสามารถในการปรับขนาด — ใช้ ICO แทน

SVG favicon มองไม่เห็นในโหมดมืด: การเติมตรงกับพื้นหลังของแท็บ เพิ่มการเติมที่ชัดเจนหรือกฎ prefers-color-scheme

Chrome ใช้ ICO ไม่ใช่ SVG: ตรวจสอบ type="image/svg+xml" และตรวจสอบว่าเซิร์ฟเวอร์ Content-Type เป็น image/svg+xml

SVG ดูเป็นรอยหยัก: คุณแรสเตอร์ตัวกรองที่ซับซ้อน ลดความซับซ้อนของเส้นทางหรือใช้ ICO สำหรับแท็บ

ไฟล์ SVG ขนาดใหญ่: ส่งออกด้วย SVGO; ลบข้อมูลเมตาของ Illustrator และ defs ที่ไม่ได้ใช้

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

ต้องการการเติมแบบธรรมดามากกว่าตัวกรอง มาสก์ และการฝังวัตถุแปลกปลอม แถบบริบทการแสดงผล Favicon มีคุณสมบัติ SVG แบบเต็มหน้า

อินไลน์ทุกสไตล์ สไตล์ชีตภายนอกอาจไม่โหลดสำหรับคำขอ favicon เท่านั้น

ทดสอบกฎ prefers-color-scheme ในการตั้งค่าระบบปฏิบัติการทั้งแบบสว่างและมืดบนเครื่องเดียวกันก่อนที่จะปรับใช้

เรียกใช้ SVGO ด้วยปลั๊กอินแบบอนุรักษ์นิยมเพื่อลดขนาดไฟล์ แต่เก็บ viewBox และข้อมูลพาธที่สำคัญไว้เหมือนเดิม

การควบคุมเวอร์ชัน favicon.svg เช่นรหัสแอปพลิเคชัน การกระจาย XML เต้นเปรียบเทียบไบนารี ICO ในคำขอดึง

ค่าใช้จ่ายในการแยกวิเคราะห์ SVG นั้นน้อยมากเมื่อเทียบกับรูปภาพหลัก แต่การส่งออก SVG จำนวนมหาศาลจาก Illustrator (100KB+) ยังคงสิ้นเปลืองไบต์ในทุกแท็บ

เบราว์เซอร์แคช favicon แยกจากการควบคุมแคช HTTP บน HTML การเปลี่ยนชื่อ favicon.svg เป็น favicon-v2.svg จะบังคับให้รีเฟรชเมื่อฝ่ายการตลาดต้องการ

พนักงานบริการที่แคช HTML ไม่ควรแคชการตอบสนองของไอคอนด้วยการอัปเดตเก่าขณะตรวจสอบใหม่ตลอดไป — เพิ่มคีย์แคชในการรีแบรนด์

มัลติเพล็กซ์แบบ HTTP/2 หมายความว่าไฟล์ไอคอนขนาดเล็กสามไฟล์ไม่ใช่ปัญหาน้ำตก จัดส่งรูปแบบที่ถูกต้อง อย่ารวม SVG และ ICO ให้เป็นไฟล์เดียว

faviconicon ได้รับการตกแต่งในแท็บ โดยไม่จำเป็นต้องใช้ข้อความแสดงแทนใน HTML ชื่อไซต์ที่มีความหมายยังคงอยู่ใน <title>

เครื่องหมาย SVG ที่มีคอนทราสต์ต่ำล้มเหลว WCAG สำหรับ UI Chrome เช่นเดียวกับที่ล้มเหลวในเนื้อหาของหน้า ทดสอบความคมชัดบนพื้นหลังทั้ง #fff และ #323232

เครื่องหมายแบรนด์ที่มีสีเพียงอย่างเดียวทำให้ผู้ใช้สับสนกับการมองเห็นสีบกพร่อง เพิ่มรูปร่างที่โดดเด่น ไม่ใช่แค่การเปลี่ยนสีในภาพเงาขนาด 16×16

เก็บ favicon.svg ใน Git บนแท็ก release ให้เรียกใช้สคริปต์ headless หรือขั้นตอนตัวสร้างด้วยตนเองเพื่อสร้าง favicon.ico และคอมมิตไบนารีหรือแนบเพื่อปรับใช้อาร์ติแฟกต์

ล้มเหลว CI หาก favicon.ico เก่ากว่า favicon.svg mtime — จับการสร้างใหม่ที่ถูกลืมหลังจากปรับแต่งโลโก้

สภาพแวดล้อมการแสดงตัวอย่างควรใช้เส้นทางไอคอนเดียวกันกับการใช้งานจริงเพื่อตรวจจับ 404 ก่อนผสาน

เอกสารในคู่มือสไตล์ของคุณ: SVG เป็นแหล่งที่มา, ICO เป็นสิ่งประดิษฐ์ที่สร้างขึ้น, ขนาด PNG เป็นเป้าหมายในการส่งออก

ระบุน้ำหนักเส้นขีดขั้นต่ำและช่องว่างภายในที่ 16×16 เพื่อไม่ให้หน่วยงานภายนอกจัดส่งเครื่องหมายนอกแบรนด์

รวมภาพหน้าจอสีอ่อนและสีเข้มใน PDF ของแบรนด์ ทีมการตลาดอ้างอิงแท็บได้บ่อยพอๆ กับหัวจดหมาย

เนื้อหาเวอร์ชัน favicon พร้อมแท็ก semver ที่ตรงกับการเผยแพร่ผลิตภัณฑ์ เมื่อไอคอนเปลี่ยนแปลงเมื่อมีการเปิดตัวฟีเจอร์

ดำเนินการตรวจสอบรายไตรมาส: หากการวิเคราะห์แสดงว่าผู้ชมของคุณรองรับ SVG มากกว่า 98% ให้คง ICO ไว้ — ส่วนท้ายยาวสำคัญสำหรับการติดตั้งระดับองค์กร

ปรับใช้ favicon.ico ก่อน และตรวจสอบคำขอ /favicon.ico โดยนัยส่งคืน 200

เพิ่ม favicon.svg ด้วย MIME ที่ถูกต้องในการจัดเตรียม เรียกใช้การตรวจสอบอัตโนมัติว่า Content-Type เป็น image/svg+xml

จัดส่งไปยังการใช้งานจริง, ล้างข้อมูล CDN, รีเฟรชแคชสามเบราว์เซอร์, ยืนยันแท็บ SVG บนทางเลือก Chromium และ ICO ตามที่คาดไว้

ตรวจสอบตั๋วสนับสนุนเป็นเวลาหนึ่งสัปดาห์ — ไอคอนจะออกคลัสเตอร์ทันทีหลังจากการรีแบรนด์ หาก QA ข้ามทางลัด Windows

บันทึกภาพหน้าจอพื้นฐานในตั๋วการเผยแพร่ของคุณ เพื่อให้มองเห็นการถดถอยในอนาคตได้ชัดเจนในระหว่างการตรวจสอบโค้ด