Favicon động và biểu tượng ICO tĩnh dự phòng

Favicon động là một hành vi của website cần được kiểm tra trên các trình duyệt mục tiêu. ImgConvert có thể tạo ICO tĩnh dự phòng từ khung hình đầu tiên của GIF. Công cụ không có tùy chọn giữ hoạt ảnh và không tạo ICO động.

Favicon động là gì?

Favicon (viết tắt của "favorite icon") là biểu tượng nhỏ xuất hiện trên thẻ trình duyệt, trong dấu trang và trên thanh địa chỉ. Favicon động hiển thị luân phiên nhiều khung hình để tạo hiệu ứng chuyển động ngay trên thẻ trình duyệt.

Các trường hợp sử dụng phổ biến gồm:

• Chỉ báo thông báo — Nhấp nháy hoặc co giãn nhịp nhàng để báo có tin nhắn mới
• Hoạt ảnh tải nội dung — Biểu tượng xoay trong khi nội dung đang được xử lý
• Thể hiện thương hiệu — Chuyển động nhẹ của logo thể hiện cá tính
• Sự kiện theo mùa — Biểu tượng động tạm thời cho dịp lễ hoặc chương trình khuyến mãi

Chuẩn bị khung hình đầu tiên phù hợp

Chọn một hình đơn giản vẫn dễ nhận biết ở kích thước 16×16 hoặc 32×32. Nếu GIF bắt đầu bằng khung hình trống hoặc hiệu ứng hiện dần, hãy chọn một hình tĩnh phù hợp hơn trong trình chỉnh sửa ảnh trước. Công cụ chuyển đổi không có bộ chọn khung hình.

Nguyên tắc thiết kế hoạt ảnh

Đây là những gợi ý ban đầu để thiết kế hoạt ảnh trong một trình chỉnh sửa riêng, không phải giới hạn hay tùy chọn của công cụ chuyển đổi ICO. Hãy điều chỉnh thời gian theo chuyển động thực tế và tránh nhấp nháy không cần thiết.

Giữ thiết kế đơn giản

Favicon động hiệu quả cần tiết chế. Ở kích thước từ 16×16 đến 32×32 pixel, thiết kế phức tạp sẽ gây rối mắt:

• Tối đa 2-4 khung hình cho phần lớn hiệu ứng
• Chuyển động đơn giản — co giãn nhịp nhàng, nhấp nháy, xoay hoặc trượt
• Hình dáng rõ ràng trong mọi khung hình
• Nhịp chuyển chậm — 500ms trở lên cho mỗi chu kỳ khung hình

Chọn thời gian theo loại hoạt ảnh

Nguyên tắc cho khung hình đầu tiên

Công cụ dùng khung hình đầu tiên để tạo ICO tĩnh. Khung hình đó phải tự thể hiện được ý nghĩa, bất kể hoạt ảnh được triển khai riêng có chạy hay không:

• Dấu hiệu thương hiệu dễ nhận biết mà không cần ngữ cảnh
• Rõ ràng ở cả kích thước 16×16 và 32×32 pixel
• Tương phản tốt với giao diện trình duyệt sáng và tối
• Không có chữ (khó đọc ở kích thước favicon)

Quy trình tạo từng bước

Đây là những gợi ý ban đầu để thiết kế hoạt ảnh trong một trình chỉnh sửa riêng, không phải giới hạn hay tùy chọn của công cụ chuyển đổi ICO. Hãy điều chỉnh thời gian theo chuyển động thực tế và tránh nhấp nháy không cần thiết.

Bước 1: Thiết kế các khung hình

Tạo 2-4 khung hình riêng biệt cho hoạt ảnh:

Với hiệu ứng thông báo co giãn theo nhịp:

• Khung hình 1: Biểu tượng bình thường (trạng thái cơ bản)
• Khung hình 2: Biểu tượng phát sáng nhẹ hoặc lớn hơn
• Khung hình 3: Trở về bình thường (để lặp mượt mà)

Với hoạt ảnh tải nội dung:

• Khung hình 1: Biểu tượng ở vị trí 12 giờ
• Khung hình 2: Biểu tượng ở vị trí 3 giờ
• Khung hình 3: Biểu tượng ở vị trí 6 giờ
• Khung hình 4: Biểu tượng ở vị trí 9 giờ

Bước 2: Xuất từng khung hình

Xuất mỗi khung hình thành PNG ở kích thước 32×32 pixel:

• Xuất PNG có kênh alpha khi cần khung hình trong suốt.
• Giữ nền trong suốt ở những nơi cần thiết
• Cố gắng giữ mỗi khung hình dưới 5KB

Bước 3: Ghép thành GIF

Ghép các khung hình thành GIF động:

Tạo gói ICO tĩnh

1. Mở GIF sang ICO và chọn một GIF có dung lượng tối đa 20 MB.
2. Chọn các kích thước cần dùng: 16, 32, 48, 64, 128 hoặc 256 px. Mặc định chọn 32, 64 và 128.
3. Chuyển đổi, tải xuống và giải nén icons.zip.
4. Dùng một biểu tượng riêng lẻ hoặc tệp favicon.ico đi kèm chứa tất cả kích thước đã chọn. Đây là các phiên bản kích thước của cùng một hình tĩnh, không phải các khung hình hoạt ảnh.

Ảnh chữ nhật được thu phóng theo tỷ lệ để vừa khung vuông, với phần đệm trong suốt. Nền không trong suốt có sẵn trong ảnh nguồn vẫn được giữ nguyên. Để tạo gói dùng cho website gồm biểu tượng PNG và manifest, hãy dùng công cụ tạo favicon.

Cài biểu tượng dự phòng lên website

Sau khi đưa tệp đã giải nén vào thư mục gốc của website, hãy khai báo tệp trong phần head của trang:

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

Điều chỉnh đường dẫn theo cách triển khai website. Công cụ chuyển đổi không cài tệp hay chỉnh sửa website. Tài liệu về icon của MDN giải thích cách khai báo HTML này.

Khi favicon cần chuyển động

Giữ lại hoạt ảnh gốc. Dùng ảnh động làm favicon hoặc thay đổi khung hình biểu tượng bằng JavaScript trên website là công việc triển khai riêng. Không nên cho rằng một tệp chuyển động trong trình xem ảnh cũng sẽ chuyển động trên thẻ trình duyệt, trong dấu trang hay ở lối tắt. Hãy kiểm tra từng trình duyệt cần hỗ trợ và cung cấp biểu tượng tĩnh dự phòng dễ nhận biết.

Ví dụ JavaScript cho website

Người xây dựng website có thể thử thay đổi URL của một thẻ liên kết favicon hiện có. Đây là mã riêng của website; tải GIF lên đây không tự thêm tệp vào website hay cài hoạt ảnh. Hãy giữ các tệp tĩnh cho từng khung hình và bắt đầu bằng một biểu tượng tĩnh phù hợp.

Ví dụ dưới đây luân phiên hai URL PNG mỗi 500 ms khi trang đang hiển thị. Việc này dừng lại khi trang bị ẩn hoặc người dùng yêu cầu giảm chuyển động. Ví dụ minh họa cơ chế cập nhật, không đảm bảo biểu tượng trên mọi thẻ trình duyệt, dấu trang hay lối tắt của hệ điều hành đều chuyển động. Hãy kiểm tra nơi sử dụng thực tế trước khi dựa vào cơ chế này.

<link id="favicon-demo" rel="icon" type="image/png" href="/icon-1.png">
<script>
  const icon = document.getElementById('favicon-demo');
  const frames = ['/icon-1.png', '/icon-2.png'];
  const motion = window.matchMedia('(prefers-reduced-motion: reduce)');
  let timer = null;
  let frameIndex = 0;

  function stopAnimation() {
    if (timer !== null) window.clearInterval(timer);
    timer = null;
    frameIndex = 0;
    icon.href = frames[0];
  }

  function syncAnimation() {
    stopAnimation();
    if (document.hidden || motion.matches) return;
    timer = window.setInterval(() => {
      frameIndex = (frameIndex + 1) % frames.length;
      icon.href = frames[frameIndex];
    }, 500);
  }

  document.addEventListener('visibilitychange', syncAnimation);
  motion.addEventListener('change', syncAnimation);
  syncAnimation();
</script>

Khi nào nên và không nên dùng favicon động?

Trường hợp phù hợp

Trường hợp không phù hợp

Tối ưu hiệu năng

Giữ số khung hình ít, dừng hoạt ảnh khi thông báo không còn cần thiết và kiểm tra trang khi bật lẫn tắt hoạt ảnh. Bộ định thời chạy nhanh hơn không nhất thiết tạo favicon tốt hơn. Tránh chạy nhiều bộ định thời cho cùng một biểu tượng. Nếu tích hợp vào một thành phần giao diện, hãy gỡ trình lắng nghe sự kiện và dừng bộ định thời khi thành phần bị hủy. Ví dụ trên là mã cho một trang độc lập.

Hướng dẫn Page Visibility API của MDN giải thích tín hiệu về trạng thái hiển thị được dùng ở đây. Hoạt ảnh nên bổ sung cho thông báo trạng thái trên trang có hỗ trợ tiếp cận, vì chỉ dùng biểu tượng thì người dùng có thể không nhìn thấy hoặc không được công nghệ hỗ trợ thông báo.

Kiểm tra kết quả

• Mở URL biểu tượng đã triển khai và kiểm tra các kích thước nhỏ.
• Kiểm tra các khai báo biểu tượng hiện có và bộ nhớ đệm trình duyệt nếu biểu tượng cũ vẫn xuất hiện.
• Kiểm tra hoạt ảnh riêng với tệp ICO tĩnh đã tải xuống.

Kiểm tra từng trình duyệt và thiết bị thực sự cần hỗ trợ, gồm cả phiên mới và phiên có bộ nhớ đệm. Kiểm tra khung hình đầu tiên, chuyển động được triển khai riêng nếu có, tùy chọn giảm chuyển động và việc quay lại từ một thẻ đang ẩn. Xem biểu tượng ở 16×16 và 32×32 trên giao diện trình duyệt sáng và tối. Nếu hoạt ảnh không chạy ổn định, hãy giữ biểu tượng tĩnh dự phòng. Mục tiêu dung lượng tệp là giới hạn do dự án đặt ra, không phải giới hạn chung của trình duyệt.

Câu hỏi thường gặp

Chọn nhiều kích thước ICO có giữ được hoạt ảnh GIF không?

Không. Tất cả kích thước đều được tạo từ khung hình đầu tiên. Không có tùy chọn Giữ hoạt ảnh.

Có thể chọn khung hình khác tại đây không?

Không. Hãy chuẩn bị hình tĩnh mong muốn bằng công cụ khác, rồi dùng PNG sang ICO nếu đã lưu hình đó thành PNG.

Vì sao favicon cũ vẫn xuất hiện?

Kiểm tra xem URL tệp đã triển khai có tải được không, xem có các khai báo biểu tượng xung đột hay không và so sánh phiên trình duyệt mới với phiên có bộ nhớ đệm. Biểu tượng trên thẻ, dấu trang và lối tắt đã cài có thể dùng các tệp hoặc bộ nhớ đệm khác nhau. Cập nhật liên kết trên một trang không thay thế tất cả biểu tượng đã lưu.

Chỉ dùng CSS có làm biểu tượng trên thẻ chuyển động được không?

Hoạt ảnh CSS của một ảnh bên trong trang web không làm biểu tượng trên thẻ trình duyệt chuyển động. Hãy coi việc liên kết trực tiếp đến tệp ảnh động hoặc thử đổi URL bằng JavaScript là các cách triển khai riêng và kiểm tra hành vi trên trình duyệt cần hỗ trợ.

Nên dùng mức độ chuyển động nào?

Chỉ dùng đủ chuyển động để truyền đạt trạng thái mong muốn. Đôi khi một huy hiệu tĩnh còn thể hiện rõ hơn. Tránh nhấp nháy nhanh, giữ một hình tĩnh dễ nhận biết và kiểm tra khi bật tùy chọn giảm chuyển động. Hãy đánh giá thời gian ở kích thước hiển thị nhỏ thực tế, thay vì chỉ xem bản xem trước phóng lớn.