Favicon (viết tắt của Favorites Icon, còn gọi là biểu tượng trang web, biểu tượng đánh dấu) là biểu tượng nhỏ hiển thị trên tab trình duyệt, thanh đánh dấu, lịch sử, thanh địa chỉ, là một trong những yếu tố cơ bản nhất nhận diện thương hiệu trang web. Một trang web không có favicon trong vô số tab sẽ hiển thị biểu tượng tài liệu trống, trông không chuyên nghiệp; một favicon được thiết kế tốt có thể giúp người dùng nhanh chóng tìm thấy trang web của bạn trong đống tab, là tài nguyên cơ bản bắt buộc trước khi ra mắt trang web.
Trang web hiện đại không chỉ cần một favicon.ico. Cùng với sự phổ biến của thiết bị di động và phát triển PWA (ứng dụng web tiến bộ), một gói biểu tượng trang web hoàn chỉnh cần bao gồm đa dạng kích thước và định dạng: favicon.ico truyền thống tương thích trình duyệt cũ, PNG 16/32 dùng cho tab và đánh dấu trình duyệt thông thường, apple-touch-icon 180×180 dùng cho người dùng iPhone/iPad「thêm vào màn hình chính」, PNG 192/512 dùng cho màn hình nền Android và màn hình khởi động PWA, còn có site.webmanifest báo cho trình duyệt vị trí các biểu tượng này và màu chủ đề. Tự tạo tất cả các kích thước này, viết đúng mã tham chiếu HTML đối với nhà phát triển không có nền tảng thiết kế là một việc phiền phức.
Favicon chữ là cách nhanh nhất: đại đa số blog cá nhân, dự án mã nguồn mở, hệ thống nội bộ thực ra không cần thiết kế logo phức tạp, dùng chữ cái đầu thương hiệu (ví dụ G đại diện cho Google, F đại diện cho Facebook) phối hợp với màu thương hiệu làm một biểu tượng chữ đơn giản hiệu ứng là tốt. Công cụ cung cấp 8 font chữ hệ thống phổ biến, điều chỉnh cỡ chữ, tùy chỉnh màu sắc, không cần mở Photoshop/Figma, một phút là có thể tạo một favicon chuyên nghiệp.
Favicon Emoji là giải pháp đơn giản phổ biến những năm gần đây: bản thân Emoji chính là biểu tượng nhỏ do nhà thiết kế vẽ sẵn, màu sắc tươi sáng độ nhận diện cao, dự án cá nhân, nguyên mẫu, trang tài liệu dùng một Emoji liên quan (ví dụ tên lửa 🚀 đại diện cho nhanh chóng, bóng đèn 💡 đại diện cho sáng tạo, lửa 🔥 đại diện cho phổ biến) làm favicon vừa thú vị lại tiết kiệm việc, tốt hơn nhiều so với biểu tượng trống, và tự mang tính nhất quán đa nền tảng (mặc dù hiển thị giữa các hệ thống hơi khác nhau).
Chế độ ảnh phù hợp tình huống đã có logo: nếu bạn đã có ảnh logo thương hiệu, sau khi tải lên công cụ tự động cắt căn giữa thành hình vuông, tạo tất cả kích thước cần thiết. Lưu ý ở kích thước nhỏ biểu tượng chỉ rộng 16 pixel, logo phức tạp sau khi thu nhỏ sẽ bị mờ thành một đám, vì vậy favicon thường không phải logo phiên bản hoàn chỉnh, mà là phần biểu tượng/dấu hiệu của logo——ví dụ dấu勾 của Nike, quả táo của Apple, chữ M của McDonald, hình dạng đơn giản ở kích thước nhỏ vẫn rõ ràng phân biệt được.
Tại sao phải tạo cục bộ không tải lên máy chủ? Một là riêng tư: logo thương hiệu chưa phát hành, bản thảo thiết kế của khách hàng thuộc tài sản nhạy cảm, tải lên máy chủ công cụ bên thứ ba có rủi ro rò rỉ; hai là nhanh chóng: vẽ Canvas cục bộ hoàn thành tức thì, không cần chờ tải lên tải xuống; ba là đáng tin cậy: không cần mạng, môi trường mạng nội bộ cũng dùng được. Tất cả xử lý ảnh dùng Canvas API gốc trình duyệt, đóng gói ZIP dùng thư viện JSZip JS thuần, không cần dịch vụ backend.
Ba hình dạng (vuông, bo tròn, tròn) là để thích ứng phong cách nền tảng khác nhau: Windows truyền thống dùng biểu tượng vuông, iOS/iPadOS dùng chữ nhật bo tròn (Squircle), Android và một phần trang web dùng biểu tượng tròn. Bo tròn 22% trong công cụ là kích thước bo tròn khá thông dụng, gần với phong cách UI hiện đại. Lưu ý khi trình duyệt hiển thị favicon thực tế thường không cắt biểu tượng thành hình tròn (ngoại trừ một số trình duyệt riêng), hình tròn chủ yếu ảnh hưởng giao diện sau khi thêm vào màn hình nền điện thoại.
Cần lưu ý: ①hiệu ứng favicon phụ thuộc cao vào tính đơn giản của thiết kế, họa tiết phức tạp ở 16×16 chắc chắn mờ, khuyến nghị sử dụng chữ/hình dạng/Emoji đơn giản; ②hiệu ứng hiển thị Emoji phụ thuộc font hệ điều hành, các hệ thống khác nhau thấy Emoji có thể hơi khác nhau; ③tệp ICO được tạo dựa trên nhúng PNG 32×32, đáp ứng đại đa số nhu cầu tương thích; ④nền trong suốt ở một số trình duyệt cũ có thể hiển thị thành nền đen hoặc trắng, khuyến nghị trang chính sử dụng có màu nền an toàn hơn.
