ภาพรวมพื้นฐานของวิธีสร้างไอคอน Fav แบบปรับอัตโนมัติ
ในโพสต์นี้ ฉันต้องการแชร์ความคิดเห็นเกี่ยวกับวิธีสร้างไอคอน Fav แบบปรับอัตโนมัติ SVG ทดลองใช้การสาธิต
หากต้องการดูวิดีโอ โปรดใช้โพสต์นี้ในเวอร์ชัน YouTube
ภาพรวม
ไอคอน Fav ที่กำหนดเองคือ
วิธีที่ยอดเยี่ยมในการขัดเกลาโปรเจ็กต์เว็บ โดยจะแสดงในแท็บเบราว์เซอร์ในเดสก์ท็อป และ
ภายใน "บันทึกไว้ภายหลัง" ด้วยเช่นกัน ผู้อ่าน บล็อกโพสต์อื่นๆ ที่ลิงก์มายังเว็บไซต์ของคุณ และ
และอีกมากมาย เดิมทีวิธีนี้ใช้กับไฟล์ประเภท .ico
แต่เมื่อเร็วๆ นี้
เบราว์เซอร์อนุญาตให้ใช้
SVG ซึ่งเป็นรูปแบบเวกเตอร์ การใช้
โพรเกรสซีฟ
การเพิ่มประสิทธิภาพ
คุณสามารถแสดงไอคอน Fav ของ .ico
ที่รองรับและอัปเกรดเป็น .svg
หาก
พร้อมใช้งาน
SVG สามารถเพิ่มและลดขนาดได้โดยไม่ต้อง การสูญเสียคุณภาพ และ อาจมีขนาดเล็กมาก ได้เช่นกัน CSS แบบฝัง รวมถึงคำค้นหาสื่อแบบฝัง หมายความว่าถ้าใช้ไอคอน Fav ของ SVG ในแอปโปรแกรมอ่านหรือแถบบุ๊กมาร์ก ก็จะมีโอกาสได้รับธีม ที่เกี่ยวข้อง (สว่างหรือมืด) เนื่องจากรูปแบบค่ากำหนดมืดที่ให้ไว้ด้านใน SVG จากนั้น SVG จะปรับเปลี่ยนโดยใช้การจัดรูปแบบที่ฝังอยู่สำหรับผู้ใช้สีอ่อนและสีเข้ม การตั้งค่าเริ่มต้น
![แท็บสีอ่อนและสีเข้มในแต่ละเบราว์เซอร์มอบ
ภาพรวมของไอคอนแบบปรับอัตโนมัติจากบนลงล่าง
Safari, Firefox, Chrome](https://web.dev/static/articles/building/an-adaptive-favicon/image/light-dark-tabs-each-br-1bd458c8c5743.png?authuser=1&hl=th)
Markup
มาร์กอัป SVG คือ
XML โดยใช้
นามสกุลไฟล์ .svg
ซึ่งทำให้เก็บประเภท
โค้ด
เริ่มด้วยการสร้าง favicon.svg
สร้างไฟล์ใหม่ชื่อ favicon.svg
และเพิ่มข้อมูลต่อไปนี้
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
</svg>
นี่คือไฟล์ SVG ของฉัน ฉันปรับขนาด viewBox
ที่เกี่ยวข้องกับอาร์ตเวิร์กของฉันแล้ว
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
</svg>
การเพิ่มรูปร่างและเส้นทาง
จากนั้นให้เพิ่มโค้ดเส้นทาง SVG ซึ่งมักหมายถึงการเปิด SVG ในโปรแกรมแก้ไขโค้ด โค้ดนั้นไม่เหมาะกับมนุษย์ ต่อไปนี้คือคู่มือดีๆ ที่จะแนะนำคุณ ผ่านการส่งออกและเพิ่มประสิทธิภาพ SVG จาก เครื่องมือออกแบบ
อาร์ตเวิร์กสำหรับชาเลนจ์ GUI นี้มาถึงแล้ว จากนักออกแบบใน Adobe ผู้วาดภาพประกอบ ข้อมูลส่วนของฉัน ก็เพิ่มประสิทธิภาพให้ ฉันแปลผ่าน SVGOMG แล้ว จากนั้นก็แก้ไขสิ่งที่ไม่ต้องการจากภาพ
นี่คือตัวอย่างกลุ่มเส้นทางอาร์ตเวิร์ก skull
จากของฉันหลังจากทำความสะอาด
ดังนี้
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<g id="skull">
<path id="skull-outline" class="favicon-stroke" stroke-linejoin="round" d="M19.62 188.39A166.62 166.62 0 0 1 186.24 21.77c115.25 0 166.61 74.59 166.61 166.62 0 1.83-.08 3.64-.13 5.46h.13s.68 175.09.68 178.65c0 30.11-16.26 41.67-36.32 41.67-12.7 0-35.22-3.93-36.22-32.69h-.2c-1 28.76-16.81 32.69-36.22 32.69-18 0-32.87-6.78-35.77-32.53-2.9 25.75-17.8 32.53-35.8 32.53-20.06 0-36.32-11.56-36.32-41.67 0-2.48.36-24.88.36-24.88A166.68 166.68 0 0 1 19.62 188.39Z" />
<path id="eyes-and-nose" d="M180.77 205.76c0 23.64 12.84 42.81 28.68 42.81s28.68-19.17 28.68-42.81-12.84-42.82-28.68-42.82-28.68 19.17-28.68 42.82M275 205.76c0 23.64 12.84 42.81 28.68 42.81s28.68-19.17 28.68-42.81-12.84-42.82-28.68-42.82S275 182.11 275 205.76M264.51 276.85s-29.26 43.53-20.12 49.23c7.07 4.41 20.49-16.71 20.49-16.71s12.82 22.58 16.76 20c16.24-10.71-17.13-52.5-17.13-52.5"/>
<path id="jawline" class="favicon-stroke" fill="none" stroke-linecap="round" d="M114.92 284.33c22.54-1 22 7 22 62.48" />
</g>
</svg>
สังเกตที่ ID ที่มนุษย์อ่านได้
ตัวเลือกที่ชอบ
#eyes-and-nose
และ
ชั้นเรียนที่มีการกดชอบ
.favicon-stroke
นี่เป็นคำขอจากการแก้ไขด้วยมือของเรา เพื่อเตรียมพร้อมสำหรับ CSS
คุณไม่จำเป็นต้องเพิ่มคลาสและรหัสเพื่อให้ SVG เป็นไอคอน Fav แบบปรับอัตโนมัติ
ลิงก์ SVG ไอคอน Fav จาก HTML
ในแท็ก <head>
ของ HTML หลังไอคอน Fav ของ .ico
ให้เพิ่มข้อมูลต่อไปนี้
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
เนื่องจากไอคอนใหม่อาจดูเหมือนกับเวอร์ชัน .ico
โปรดยืนยันว่าไอคอนใหม่กำลังอยู่จริง
เปิดแผงเครือข่ายของเครื่องมือสำหรับนักพัฒนาเว็บ กรองตามรูปภาพและค้นหา
ไอคอน Fav:
รูปแบบ
คุณเพิ่มแท็ก <style>
ลงในมาร์กอัปเพื่อใช้กับ HTML ได้เช่นเดียวกับ HTML
ขอบเขตของเอกสาร:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
</style>
…
</svg>
เวอร์ชันธีมสว่างจะเป็นสีเริ่มต้นของ SVG ของไอคอน Fav สไตล์ที่ผมเขียนไว้ส่วนใหญ่จะเป็นสีเส้นโครงร่างและสีเติม
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
.favicon-stroke {
stroke-width: 8px;
stroke: #8929ff;
}
#skull-outline { fill: white }
#eyes-and-nose, #hat-outline { fill: #8929ff }
#hat-fill, #hat-bill { fill: #e662e6 }
</style>
…
</svg>
ต่อไปคือส่วนที่สนุกที่สุดกับการจัดรูปแบบไอคอน Fav ในเวอร์ชันธีมมืด รูปแบบดังกล่าวจะเข้าไปอยู่ในคิวรี่สื่อภายในแท็กรูปแบบ:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
…
@media (prefers-color-scheme: dark) {
/* dark theme styles */
}
</style>
…
</svg>
เว็บไซต์ของฉันออกมาแบบนี้
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
…
@media (prefers-color-scheme: dark) {
.favicon-stroke { stroke: #343a40 }
#skull-outline { fill: #adb5bd }
#hat-outline { fill: #343a40 }
#eyes-and-nose { fill: #343a40 }
}
</style>
…
</svg>
ฉันเลือกสลับขอบสีม่วงสว่างเป็นสีเทาเข้มแบบเย็น (#343a40
)
เปลี่ยนสีกระดูกหัวกะโหลกจากสีขาวเป็นสีเทาอ่อนๆ (#adb5bd
) แต่
เหลือแต่หมวกสีชมพู
บทสรุป
ตอนนี้คุณก็รู้แล้วว่าฉันทำท่านั้นได้อย่างไร คุณจะทำยังไงบ้างคะ‽ 🙂
มาเพิ่มความหลากหลายให้กับแนวทางของเราและเรียนรู้วิธีทั้งหมดในการสร้างเนื้อหาบนเว็บกัน สร้างลิงก์สาธิต ทวีตฉัน แล้วฉันจะเพิ่มให้เอง ที่ส่วนรีมิกซ์ของชุมชนด้านล่างนี้ได้เลย