การสร้างไอคอน Fav แบบปรับอัตโนมัติ

ภาพรวมพื้นฐานของวิธีสร้างไอคอน Fav แบบปรับอัตโนมัติ

Adam Argyle

ในโพสต์นี้ ฉันต้องการแชร์ความคิดเห็นเกี่ยวกับวิธีสร้างไอคอน Fav แบบปรับอัตโนมัติ SVG ทดลองใช้การสาธิต

แท็บเบราว์เซอร์ที่แสดงซึ่งปรับให้เข้ากับการเปลี่ยนแปลงธีมสว่างและธีมมืดของระบบ MacOS ทดลองใช้

หากต้องการดูวิดีโอ โปรดใช้โพสต์นี้ในเวอร์ชัน YouTube

ภาพรวม

ไอคอน Fav ที่กำหนดเองคือ วิธีที่ยอดเยี่ยมในการขัดเกลาโปรเจ็กต์เว็บ โดยจะแสดงในแท็บเบราว์เซอร์ในเดสก์ท็อป และ ภายใน "บันทึกไว้ภายหลัง" ด้วยเช่นกัน ผู้อ่าน บล็อกโพสต์อื่นๆ ที่ลิงก์มายังเว็บไซต์ของคุณ และ และอีกมากมาย เดิมทีวิธีนี้ใช้กับไฟล์ประเภท .ico แต่เมื่อเร็วๆ นี้ เบราว์เซอร์อนุญาตให้ใช้ SVG ซึ่งเป็นรูปแบบเวกเตอร์ การใช้ โพรเกรสซีฟ การเพิ่มประสิทธิภาพ คุณสามารถแสดงไอคอน Fav ของ .ico ที่รองรับและอัปเกรดเป็น .svg หาก พร้อมใช้งาน

SVG สามารถเพิ่มและลดขนาดได้โดยไม่ต้อง การสูญเสียคุณภาพ และ อาจมีขนาดเล็กมาก ได้เช่นกัน CSS แบบฝัง รวมถึงคำค้นหาสื่อแบบฝัง หมายความว่าถ้าใช้ไอคอน Fav ของ SVG ในแอปโปรแกรมอ่านหรือแถบบุ๊กมาร์ก ก็จะมีโอกาสได้รับธีม ที่เกี่ยวข้อง (สว่างหรือมืด) เนื่องจากรูปแบบค่ากำหนดมืดที่ให้ไว้ด้านใน SVG จากนั้น SVG จะปรับเปลี่ยนโดยใช้การจัดรูปแบบที่ฝังอยู่สำหรับผู้ใช้สีอ่อนและสีเข้ม การตั้งค่าเริ่มต้น

ตัวอย่างไอคอน Fav ด้านสว่างและมืดและแยกความแตกต่างได้ง่าย

วันที่ แท็บสีอ่อนและสีเข้มในแต่ละเบราว์เซอร์มอบ ภาพรวมของไอคอนแบบปรับอัตโนมัติจากบนลงล่าง Safari, Firefox, Chrome
แท็บสีอ่อนและสีเข้มในแต่ละเบราว์เซอร์มอบ ภาพรวมของไอคอนแบบปรับอัตโนมัติจากบนลงล่าง Safari, Firefox, Chrome

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 แบบปรับอัตโนมัติ

ในแท็ก <head> ของ HTML หลังไอคอน Fav ของ .ico ให้เพิ่มข้อมูลต่อไปนี้

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

เนื่องจากไอคอนใหม่อาจดูเหมือนกับเวอร์ชัน .ico โปรดยืนยันว่าไอคอนใหม่กำลังอยู่จริง เปิดแผงเครือข่ายของเครื่องมือสำหรับนักพัฒนาเว็บ กรองตามรูปภาพและค้นหา ไอคอน Fav:

ภาพหน้าจอของแผงเครือข่ายจากเครื่องมือสำหรับนักพัฒนาเว็บพร้อมด้วยตัวกรองการค้นหา ไอคอน Fav และแหล่งข้อมูล favicon.svg

รูปแบบ

คุณเพิ่มแท็ก <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 ของธีมสว่าง

ต่อไปคือส่วนที่สนุกที่สุดกับการจัดรูปแบบไอคอน 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

เว็บไซต์ของฉันออกมาแบบนี้

<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>

ตัวอย่างการแสดงตัวอย่างไอคอน Fav ในธีมมืด

ฉันเลือกสลับขอบสีม่วงสว่างเป็นสีเทาเข้มแบบเย็น (#343a40) เปลี่ยนสีกระดูกหัวกะโหลกจากสีขาวเป็นสีเทาอ่อนๆ (#adb5bd) แต่ เหลือแต่หมวกสีชมพู

แสดงตัวอย่างไอคอน Fav ทั้งสีอ่อนและสีเข้มคู่กัน

บทสรุป

ตอนนี้คุณก็รู้แล้วว่าฉันทำท่านั้นได้อย่างไร คุณจะทำยังไงบ้างคะ‽ 🙂

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

รีมิกซ์ในชุมชน

  • แหล่งที่ฉันได้เรียนรู้เกี่ยวกับเทคนิคนี้: @tomayac ของเขา บล็อก