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

ภาพรวมพื้นฐานเกี่ยวกับวิธีสร้าง Favicon แบบปรับอัตโนมัติ

Adam Argyle

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

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

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

ภาพรวม

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

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

ตัวอย่าง Favicon แบบสว่างและแบบมืดที่มีขนาดใหญ่และแยกแยะได้ง่าย

แท็บแบบสว่างและแบบมืดในแต่ละเบราว์เซอร์ที่แสดงภาพรวมของไอคอนที่ปรับเปลี่ยนได้ตั้งแต่บนลงล่าง ได้แก่ 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 Illustrator เราเพิ่มประสิทธิภาพอย่างมาก เราส่งผ่าน SVG ผ่าน 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>

โปรดสังเกตตัวเลือกที่มีรหัสซึ่งมนุษย์อ่านได้ เช่น #eyes-and-nose และคลาส เช่น .favicon-stroke รายการเหล่านี้มาจากการแก้ไขด้วยตนเองเพื่อเตรียมพร้อมสำหรับ CSS คุณไม่จำเป็นต้องเพิ่มคลาสและรหัสเพื่อให้ SVG เป็น Favicon แบบปรับเปลี่ยนได้

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

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

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

ภาพหน้าจอของแผงเครือข่ายจากเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ที่มีตัวกรองที่ค้นหา favicon และไฮไลต์ทรัพยากร favicon.svg

รูปแบบ

เช่นเดียวกับ HTML คุณสามารถเพิ่มแท็ก <style> ลงในมาร์กอัปเพื่อใช้กับขอบเขตเอกสารนั้นได้ ดังนี้

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
  <style>
    
  </style>
  …
</svg>

เวอร์ชันธีมสว่างจะเป็นสีเริ่มต้นของ Favicon SVG รูปแบบที่ฉันเขียนส่วนใหญ่เป็นสีเส้นโครงร่างและสีเติม

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

ตัวอย่างตัวอย่าง Favicon ในธีมสว่าง

ถัดไปเป็นขั้นตอนที่สนุกที่สุด ซึ่งเป็นการจัดสไตล์ไอคอน 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>

ภาพหน้าจอของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์แสดง Media Query ธีมมืดที่เขียนทับสีของเส้นขอบตาและจมูกของ 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>

ตัวอย่างตัวอย่าง Favicon ในธีมมืด

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

ตัวอย่าง Favicon ทั้งแบบสว่างและแบบมืดวางคู่กัน

บทสรุป

ตอนนี้คุณรู้วิธีที่เราทำแล้ว คุณจะทำอย่างไรบ้าง 🙂

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

รีมิกซ์ของชุมชน

  • ฉันได้เรียนรู้เทคนิคนี้จาก @tomayac ในบล็อกของเขา