Tạo biểu tượng trang web thích ứng

Tổng quan cơ bản về cách tạo biểu tượng trang chủ thích ứng.

Trong bài đăng này, tôi muốn chia sẻ suy nghĩ về cách tạo biểu tượng trang web thích ứng bằng SVG. Hãy dùng thử bản minh hoạ.

Các thẻ trình duyệt hiển thị để thích ứng với các thay đổi về giao diện sáng và tối của hệ thống MacOS. Dùng thử bản minh hoạ

Nếu bạn thích xem video hơn, sau đây là phiên bản của bài đăng này trên YouTube:

Tổng quan

Biểu tượng trang web tuỳ chỉnh là một cách tuyệt vời để hoàn thiện dự án web. Thẻ này hiển thị trên các thẻ trình duyệt trên máy tính, cũng như trong trình đọc "lưu để xem sau", các bài đăng khác trên blog liên kết đến trang web của bạn, v.v. Thông thường, việc này được thực hiện với loại tệp .ico, nhưng gần đây các trình duyệt đã cho phép sử dụng SVG, một định dạng vectơ. Sử dụng lũy tiến nâng cao bạn có thể phân phát các biểu tượng trang web .ico được hỗ trợ tốt và nâng cấp lên .svg nếu sẵn có.

SVG có thể tăng và giảm tỷ lệ mà không làm giảm chất lượng, đồng thời có thể có kích thước rất nhỏ, cũng có thể có CSS nhúng, thậm chí là các truy vấn nội dung đa phương tiện được nhúng. Điều này có nghĩa là nếu bạn sử dụng biểu tượng trang chủ SVG trong ứng dụng trình đọc hoặc thanh dấu trang, thì có thể người dùng sẽ thấy biểu tượng liên quan đến giao diện (sáng hoặc tối) do các kiểu ưu tiên tối được cung cấp bên trong SVG. Sau đó, SVG sẽ điều chỉnh bằng cách sử dụng kiểu được nhúng cho các tuỳ chọn sáng và tối của người dùng.

Ví dụ về biểu tượng trang web có kích thước lớn và dễ phân biệt sáng và tối.

Các tab sáng và tối trong mỗi trình duyệt mang lại 
    tổng quan về biểu tượng thích ứng từ trên xuống dưới: 
    Safari, Firefox, Chrome.
Các tab sáng và tối trong mỗi trình duyệt mang lại tổng quan về biểu tượng thích ứng từ trên xuống dưới: Safari, Firefox, Chrome.

Markup (note: đây là tên ứng dụng)

Mã đánh dấu SVG là XML sử dụng một tiện ích loại tệp .svg cho phép tệp này chứa nhiều loại tệp động hơn .

Bắt đầu bằng cách thanh toán favicon.svg

Tạo một tệp mới có tên là favicon.svg rồi thêm nội dung sau đây:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">

</svg>

Dưới đây là tệp SVG của tôi, tôi đã định cỡ viewBox phù hợp với hình minh hoạ:

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

</svg>

Thêm hình dạng và đường dẫn

Tiếp theo, hãy thêm mã đường dẫn SVG. Thông thường, điều này có nghĩa là mở SVG trong một trình soạn thảo mã, nhưng mã đó thường không thân thiện với con người. Sau đây là hướng dẫn tuyệt vời hướng dẫn bạn cách xuất và tối ưu hoá SVG từ các công cụ thiết kế.

Hình minh hoạ cho Thử thách GUI này đã được đưa ra từ một nhà thiết kế tạo ra nó bằng Adobe Hoạ sĩ vẽ tranh minh hoạ. Tôi rất cân nhắc đã tối ưu hoá chiến dịch. Tôi đã chạy mã này qua SVGOMG rồi chỉnh sửa thủ công các phần thừa.

Sau đây là ví dụ về nhóm đường dẫn hình minh hoạ skull của tôi, sau khi dọn dẹp:

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

Lưu ý các bộ chọn mã nhận dạng mà con người có thể đọc được như #eyes-and-nose và các lớp như .favicon-stroke. Đây là những nội dung tôi tự chỉnh sửa để chuẩn bị cho CSS. Bạn không cần thêm các lớp và mã nhận dạng để SVG trở thành biểu tượng trang chủ thích ứng.

Trong thẻ <head> của HTML, sau biểu tượng trang chủ .ico, hãy thêm nội dung sau:

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

Vì biểu tượng mới có thể trông giống với phiên bản .ico, hãy xác minh rằng biểu tượng này đang đã sử dụng. Mở bảng điều khiển Mạng của Công cụ dành cho nhà phát triển. Lọc theo hình ảnh và tìm kiếm biểu tượng trang web:

Ảnh chụp màn hình ngăn Mạng từ Công cụ cho nhà phát triển với bộ lọc được tìm kiếm
biểu tượng trang web và tài nguyên biểu tượng trang web.svg được làm nổi bật.

Kiểu

Giống như HTML, bạn có thể thêm thẻ <style> vào thẻ đánh dấu để sử dụng với thẻ đó phạm vi tài liệu:

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

Phiên bản giao diện sáng sẽ là màu mặc định của biểu tượng trang web SVG của tôi. Chiến lược phát hành đĩa đơn những kiểu tôi đã viết chủ yếu là nét vẽ và màu nền:

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

Ví dụ về bản xem trước biểu tượng trang chủ trong giao diện sáng.

Tiếp theo là phần thú vị nhất, tạo kiểu cho phiên bản favicon có giao diện tối. Các kiểu cho nội dung đó sẽ chuyển vào truy vấn nội dung nghe nhìn trong thẻ kiểu:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
  <style>
    
    @media (prefers-color-scheme: dark) {
      /* dark theme styles */
    }
  </style>
  
</svg>

Ảnh chụp màn hình Công cụ cho nhà phát triển cho thấy truy vấn nội dung nghe nhìn giao diện tối ghi đè
tô màu cho mắt và mũi của SVG.

của tôi đã kết thúc như sau:

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

Ví dụ về bản xem trước biểu tượng trang chủ ở giao diện tối.

Tôi đã chọn hoán đổi đường viền màu tím sáng thành màu xám đậm mát mẻ (#343a40), thay đổi màu xương sọ từ trắng thành màu xám nhạt mát mẻ (#adb5bd), nhưng vẫn giữ lại chiếc mũ điểm nhấn màu hồng.

Bản xem trước biểu tượng trang chủ sáng và tối cạnh nhau.

Kết luận

Giờ thì bạn đã biết cách tôi làm, còn bạn thì sao‽ 🙂

Hãy đa dạng hoá phương pháp tiếp cận và tìm hiểu tất cả các cách xây dựng ứng dụng trên web. Hãy tạo bản minh hoạ, gửi đường liên kết cho tôi trên Twitter và tôi sẽ thêm bản minh hoạ đó vào phần phối lại của cộng đồng ở bên dưới!

Bản phối lại của cộng đồng

  • Nơi tôi biết về kỹ thuật này: @tomayac trên của anh ấy blog