Tạo favicon

Vì sao một icon lại thành chín file

Mỗi file trong bộ tồn tại vì có một thứ cụ thể đọc nó và chỉ đọc nó. favicon.ico chứa các cỡ 16, 32 và 48 vẫn là file trình duyệt mặc định tìm ở thư mục gốc của trang, và là thứ rất nhiều phần mềm cũ kiểm tra đầu tiên. favicon-16x16.png và favicon-32x32.png là những file trình duyệt hiện nay ưu tiên cho tab, vì PNG đúng kích thước tốt hơn ảnh phải co giãn. apple-touch-icon.png cỡ 180 pixel là icon iOS đặt lên màn hình chính — iOS không hỗ trợ nền trong suốt, nên icon được ghép lên một nền đặc thay vì hiện ra với bốn góc đen. android-chrome-192x192.png và 512x512.png là icon mà một progressive web app đã cài dùng cho trình khởi chạy và màn hình chờ, được khai báo trong site.webmanifest.

Dùng một file PNG lớn cho tất cả hiển thị kém ở mọi nơi, dù đó là lối tắt phổ biến nhất. Trình duyệt tải nửa megabyte chỉ để vẽ mười sáu pixel, iOS bỏ qua quy tắc trong suốt và đặt logo của bạn lên một ô vuông đen, còn icon trình khởi chạy bị cắt theo mặt nạ mà nền tảng áp dụng. Bộ file này rườm rà chính vì mỗi nơi dùng đều có yêu cầu riêng.

Đoạn mã HTML quan trọng không kém các ảnh. Trình duyệt không tự tìm thấy phần lớn các file này — chỉ favicon.ico ở thư mục gốc được tìm thấy theo quy ước — nên các thẻ link là thứ kết nối chúng, và manifest cần thẻ riêng của nó. Đoạn mã dùng đường dẫn tương đối từ thư mục gốc, dùng được nguyên như vậy miễn là các file nằm ở thư mục gốc của web; nếu bạn đặt chúng trong một thư mục con, đường dẫn trong cả đoạn mã và manifest đều cần chỉnh lại.

Hãy thiết kế cho 16 pixel trước tiên. Ở cỡ đó bạn chỉ đủ chỗ cho một hình khối và có lẽ hai màu — không chữ, không gradient, không chi tiết nhỏ, và chắc chắn không phải cả logo chữ đầy đủ. Một ảnh gốc vuông, nổi bật, tương phản cao, tối thiểu 512 pixel, hoặc một file SVG, sẽ cho bộ icon rõ nét nhất; bản xem trước hiển thị cỡ 16px một cách trung thực chứ không tô vẽ, vì đó là cỡ sẽ khiến bạn thất vọng về sau. Ảnh gốc không vuông được thêm lề trong suốt cho thành hình vuông thay vì bị cắt hay kéo giãn.

Khi bạn cần công cụ khác

Bộ icon tạo ở đây là phần cốt lõi thiết thực của web hiện đại. Nếu bạn cần cả phần đuôi dài — ảnh tile của Windows, mask icon cho tab ghim của Safari, browserconfig của Microsoft, các cỡ Apple cũ — RealFaviconGenerator hỗ trợ đầy đủ và còn kiểm tra website đang chạy của bạn sau đó, một việc thực sự hữu ích mà công cụ này không làm được.

Với quy trình build, tạo icon thủ công hoàn toàn không phải cách làm phù hợp. favicons, pwa-asset-generator và các plugin framework xây trên sharp tạo toàn bộ bộ icon từ một file gốc mỗi lần bạn deploy, nên icon không thể bị lỗi thời khi logo thay đổi — điều mà trên thực tế luôn luôn xảy ra.