Cách tạo favicon cho website của bạn

Favicon là biểu tượng nhỏ trên tab trình duyệt, thanh dấu trang, danh sách lịch sử, màn hình chính iPhone và bên cạnh tên website trong kết quả tìm kiếm. Đó thường là mảnh duy nhất của thương hiệu mà khách truy cập nhìn thấy khi họ đang mở hai mươi tab. Trước đây, làm favicon cho đúng nghĩa là phải xoay xở với cả chục kích thước. Ngày nay, chỉ vài tệp là đủ cho mọi nền tảng quan trọng.

Hướng dẫn này nói về những gì cần tạo, cách thiết kế biểu tượng vẫn rõ ràng ở 16 pixel, cách cài đặt, và cách chẩn đoán những lỗi thường gặp nhất.

Các tệp một website hiện đại cần có

• favicon.ico chứa các ảnh 16, 32 và 48 px. Trình duyệt tự yêu cầu /favicon.ico ngay cả khi không có dòng HTML nào, Windows dùng nó cho lối tắt, và đây là phương án dự phòng an toàn nhất.
• apple-touch-icon.png kích thước 180×180. Được dùng khi ai đó thêm website vào màn hình chính trên iPhone hoặc iPad.
• icon-192.png và icon-512.png. Biểu tượng màn hình chính Android và màn hình chờ của ứng dụng web đã cài đặt.
• site.webmanifest. Một tệp JSON nhỏ trỏ đến hai biểu tượng Android và, nếu bạn muốn website cài đặt được như ứng dụng, mô tả website đó.
• Tùy chọn: icon.svg. Một biểu tượng vector duy nhất mà các trình duyệt hỗ trợ favicon SVG hiển thị sắc nét ở mọi kích thước, và có thể đổi màu cho chế độ tối.

Mọi thứ khác bạn có thể thấy trong các hướng dẫn cũ, như hàng chục kích thước PNG và ảnh ô vuông riêng cho từng trình duyệt, đều không còn cần thiết với một website thông thường.

Tạo trọn bộ từ một logo

1. Chuẩn bị một ảnh nguồn hình vuông. SVG là lý tưởng; nếu không, dùng PNG tối thiểu 512×512.
2. Mở Tạo favicon và thả tệp vào. Hỗ trợ PNG, JPG, WebP và SVG tối đa 20 MB.
3. Tải tệp ZIP về. Trong đó có favicon.ico (bên trong gồm 16, 32 và 48 px), apple-touch-icon.png, icon-192.png, icon-512.png và site.webmanifest.
4. Chép các tệp vào thư mục gốc của website, cạnh trang chủ.

Mỗi kích thước được vẽ trực tiếp từ bản gốc, nên SVG được raster hóa nguyên bản ở 16 px thay vì thu nhỏ từ một ảnh bitmap lớn. Quá trình hiển thị diễn ra trong trình duyệt; logo không bị tải lên. Ảnh nguồn không vuông sẽ được co cho vừa và căn giữa, với khoảng trong suốt ở hai cạnh ngắn hơn.

Công cụ không tạo icon.svg. Nếu bạn muốn có favicon SVG, hãy chép logo SVG của bạn vào thư mục gốc của website với tên đó.

Thêm mã HTML

Đặt các dòng sau vào <head> của mọi trang, hoặc vào template bố cục dùng chung:

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

<link rel="icon" href="/icon.svg" type="image/svg+xml">

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<link rel="manifest" href="/site.webmanifest">

Bỏ dòng SVG nếu bạn không có tệp này. Thuộc tính sizes="32x32" ở dòng ICO quan trọng khi có SVG: nó ngăn một số trình duyệt chọn ICO thay vì SVG sắc nét hơn.

Tệp manifest được tạo ra liệt kê các biểu tượng bằng đường dẫn tuyệt đối như /icon-192.png. Nếu website của bạn nằm trong thư mục con chứ không phải ở gốc tên miền, hãy sửa các đường dẫn đó cho khớp.

Thiết kế biểu tượng vẫn rõ ràng ở 16 pixel

Ở 16×16 chỉ có tổng cộng 256 pixel. Không thiết lập xuất nào cứu được một thiết kế cần nhiều hơn thế.

• Dùng biểu trưng, không dùng cả logo. Một chữ cái, một chữ lồng hoặc biểu tượng không kèm phần chữ. Chữ sẽ biến thành một vệt xám khi nhỏ hơn 32 px.
• Hình khối dày, ít màu. Nét mảnh hơn khoảng 1/16 chiều rộng biểu tượng sẽ biến mất ở kích thước nhỏ nhất. Hai màu có độ tương phản mạnh là dễ đọc nhất.
• Lấp đầy hình vuông. Cắt bỏ lề trống trong ảnh nguồn. Logo lơ lửng giữa khoảng trong suốt sẽ trở nên bé xíu trên tab.
• Kiểm tra với cả hai giao diện tab. Thanh tab có thể sáng hoặc tối. Biểu trưng màu đen trên nền trong suốt sẽ biến mất trên giao diện tối. Một hình khối màu đặc phía sau biểu trưng, chẳng hạn hình vuông bo góc, hoạt động tốt trên cả hai.

Nếu logo nằm ngang, hãy cắt lấy phần biểu tượng bằng Cắt ảnh online ở tỷ lệ 1:1 trước khi tạo favicon. Nếu logo dạng raster chỉ có ở kích thước nhỏ, phóng to bằng Phóng to ảnh bằng AI sẽ cho biểu tượng 512 px đường viền sạch hơn so với kéo giãn thông thường.

Chế độ tối với favicon SVG

Favicon SVG có thể chứa một CSS media query cho prefers-color-scheme: dark và đổi màu tô khi trình duyệt dùng giao diện tối. Đây là cách gọn gàng nhất để khắc phục biểu trưng màu tối bị chìm trên tab tối. Hãy giữ ICO làm phương án dự phòng, vì không phải trình duyệt nào cũng dùng favicon SVG.

Cần PNG ở kích thước khác

Một số nền tảng, plugin và kho ứng dụng yêu cầu một kích thước PNG cụ thể mà bộ tệp không có. Chuyển SVG sang PNG online xuất logo vector của bạn ở bất kỳ chiều rộng nào bạn nhập, với nền trong suốt.

Chi tiết nền tảng đáng biết

Màn hình chính iPhone

iOS không hiển thị độ trong suốt trên biểu tượng màn hình chính; vùng trong suốt bị tô màu, thường là đen, và các góc được hệ thống tự bo tròn. Vì công cụ giữ nguyên độ trong suốt, hãy dùng ảnh nguồn có màu nền đặc cho Apple touch icon. Đừng tự bo góc.

Android và website cài đặt được

Trình khởi chạy Android có thể cắt biểu tượng thành hình tròn hoặc hình dạng khác. Để website cài đặt được như ứng dụng, hãy mở site.webmanifest bằng trình soạn thảo văn bản và thêm ít nhất name, short_name, start_url, display (ví dụ standalone) và theme_color. Nếu bạn đánh dấu một biểu tượng là "purpose": "maskable", hãy giữ phần quan trọng của thiết kế trong 80% trung tâm của hình vuông, vì phần rìa có thể bị cắt mất.

Kết quả tìm kiếm

Google hiển thị biểu tượng website bên cạnh kết quả. Hướng dẫn của Google yêu cầu biểu tượng hình vuông có kích thước là bội số của 48 px, được khai báo từ trang chủ và cho phép thu thập dữ liệu. Lớp 48 px trong tệp ICO và tệp PNG 192 px đều đạt yêu cầu. Thay đổi trong kết quả tìm kiếm có thể mất vài ngày đến vài tuần mới xuất hiện, vì biểu tượng chỉ được làm mới khi trang chủ được thu thập dữ liệu lại.

Khắc phục sự cố

• Favicon cũ vẫn hiển thị. Trình duyệt lưu đệm favicon rất mạnh, tách biệt với trang. Hãy mở trực tiếp /favicon.ico và tải lại, hoặc thêm tham số phiên bản như ?v=2 vào các liên kết biểu tượng.
• Biểu tượng trống hoặc bị lỗi. Mở từng URL tệp trong trình duyệt. Lỗi 404 thường có nghĩa là các tệp nằm trong thư mục con thay vì thư mục gốc của website, hoặc máy chủ cần khai báo đúng kiểu cho .webmanifest.
• Biểu tượng trông mờ trên tab. Các phiên bản 16 và 32 px được tạo từ ảnh nguồn quá nhiều chi tiết. Hãy chuẩn bị một phiên bản đơn giản hóa cho các kích thước nhỏ.
• Ô vuông đen trên màn hình chính iPhone. Ảnh nguồn có nền trong suốt. Hãy tạo lại từ phiên bản có nền màu đặc.
• Một đường mảnh ở giữa hình vuông. Ảnh nguồn là logo chữ nằm ngang. Hãy cắt lấy phần biểu tượng trước.

Danh sách kiểm tra

1. Đơn giản hóa logo thành biểu trưng đọc được ở 16 px và hiển thị tốt trên cả tab sáng lẫn tối.
2. Làm cho nó vuông, lý tưởng là SVG, nếu không thì PNG 512×512 trở lên.
3. Tạo bộ tệp và chép tất cả vào thư mục gốc của website.
4. Thêm bốn thẻ link vào head, chỉ thêm icon.svg nếu bạn có.
5. Hoàn thiện manifest nếu website cần cài đặt được.
6. Kiểm tra trực tiếp từng URL tệp, sau đó thử trên màn hình chính điện thoại.