Công cụ tạo favicon

Favicon là gì và xuất hiện ở đâu

Favicon là biểu tượng vuông nhỏ đại diện cho trang web. Tên này là cách viết tắt của cụm tiếng Anh “favorite icon”, nghĩa là biểu tượng yêu thích. Trình duyệt đầu tiên dùng favicon đặt nó cạnh các dấu trang trong mục Yêu thích.

Bạn thấy favicon cạnh tiêu đề trang trên thẻ trình duyệt, thường rộng 16 điểm ảnh hoặc 32 điểm ảnh trên màn hình có độ phân giải cao. Nó còn giúp nhận ra trang web trong dấu trang và lịch sử duyệt web. Khi người dùng lưu trang web vào màn hình chính của điện thoại, nó trở thành biểu tượng ứng dụng. Google cũng hiển thị nó cạnh tên trang web trong kết quả tìm kiếm.

Ở đâu cũng vậy, favicon giúp người dùng nhận ra trang web ngay giữa nhiều biểu tượng khác.

Vì sao một favicon cần nhiều tệp

Mỗi nơi hiển thị xuất hiện vào một thời điểm khác nhau và cần một loại tệp riêng. Công cụ tạo favicon ở trên tạo tất cả từ một ảnh.

Thẻ trình duyệt, dấu trang và lịch sử dùng favicon.ico, một tệp chứa các bản 16, 32 và 48 điểm ảnh. Đây là định dạng lâu đời nhất: nếu trang không chỉ định biểu tượng, trình duyệt vẫn tìm favicon.ico trong thư mục gốc của trang web.

Nếu bắt đầu bằng SVG, bạn còn nhận được favicon.svg để các trình duyệt hỗ trợ biểu tượng SVG sử dụng. Vì được tạo từ hình dạng thay vì điểm ảnh, SVG luôn sắc nét trên mọi màn hình.

iPhone và iPad dùng apple-touch-icon.png, ảnh vuông 180 điểm ảnh, khi người dùng thêm trang web vào màn hình chính. iPhone tô đen vùng trong suốt, nên biểu tượng này luôn có nền màu đồng nhất: màu bạn chọn hoặc màu trắng nếu bạn chọn trong suốt.

Điện thoại Android và các trang web được cài thành ứng dụng từ trình duyệt dùng icon-192.png và icon-512.png. Các tệp này được chỉ định trong site.webmanifest, một tệp văn bản nhỏ cho trình duyệt biết tên trang web nếu bạn đã nhập, cùng vị trí các biểu tượng lớn.

Các tệp PNG riêng từ 16 đến 48 điểm ảnh dành cho những dịch vụ yêu cầu PNG. Google đọc các liên kết biểu tượng trong HTML của trang chủ để hiển thị trên kết quả tìm kiếm.

Cách thêm tệp favicon vào trang web

Nếu bạn hoặc lập trình viên có thể sửa các tệp của trang web, chỉ cần hai bước.

Trước hết, giải nén tệp tải xuống rồi đặt các tệp vào thư mục gốc của trang web, tức thư mục cao nhất chứa trang chủ. Để kiểm tra, thêm /favicon.ico vào cuối địa chỉ trang web: biểu tượng phải mở được.

Sau đó, dán các dòng HTML trong README vào phần head của các trang, là phần đầu mã HTML chứa tiêu đề trang. Công cụ cũng hiển thị các dòng này. Mỗi tệp ICO, biểu tượng màn hình chính Apple và tệp kê khai có một dòng riêng, cùng dòng SVG nếu có.

Thông thường mọi trang dùng chung một mẫu bố cục, nên bạn chỉ cần dán một lần. Xóa các dòng biểu tượng cũ trước, nếu không trình duyệt có thể tiếp tục chọn biểu tượng cũ.

Nếu dùng công cụ dựng trang web, bạn có thể bỏ qua cả hai bước: tải icon-512.png lên trong phần cài đặt biểu tượng trang web. Công cụ dựng trang sẽ tự thêm HTML.

Giữ logo dễ nhận ra ở kích thước 16 điểm ảnh

Ở kích thước 16 × 16, toàn bộ biểu tượng chỉ gồm 256 ô màu nhỏ. Phần lớn logo không được vẽ cho kích thước đó.

Hãy bắt đầu bằng biểu tượng thay vì tên. Nếu ép tên tám chữ cái vào 16 điểm ảnh, mỗi chữ chỉ còn rộng hai điểm ảnh. Không có biểu tượng? Hãy dùng chữ cái đầu thật lớn và đậm. Chữ có nét dày vẫn rõ khi thu nhỏ lâu hơn chữ có nét mảnh.

Tiếp theo, bớt chi tiết. Nét quá mảnh và khe nhỏ sẽ hòa vào phần xung quanh, còn khẩu hiệu sẽ thành một vệt mờ.

Điều quan trọng là độ tương phản sáng tối, không chỉ bản thân màu sắc. Thẻ có nền sáng hoặc tối tùy giao diện; biểu tượng xanh đậm sẽ chìm trên thanh thẻ tối. Nếu logo tối màu, hãy chọn nền sáng trong công cụ, và ngược lại.

Khoảng đệm là phần trống giữa logo và cạnh ô vuông, cần vừa đủ. Quá nhiều thì logo nhỏ xíu trên thẻ. Quá ít thì iPhone, vốn bo góc biểu tượng màn hình chính, có thể cắt mất góc logo.

Cuối cùng, xem các bản xem trước thẻ sáng và tối ở trên theo kích thước thật, không phóng to. Công cụ kiểm tra logo miễn phí còn thu logo xuống 32 điểm ảnh và đo xem giữ lại được bao nhiêu chi tiết.

Khi nào nên vẽ lại thay vì chỉ thu nhỏ

Đôi khi không thể cứu bằng vài điều chỉnh. Với hình minh họa nhiều chi tiết hoặc thiết kế 3D dựa vào bóng đổ, chi tiết chính là ý tưởng; thu xuống 16 điểm ảnh sẽ mất chúng. Công cụ này thay đổi kích thước chứ không vẽ lại logo.

Điều đó không có nghĩa logo kém, chỉ là nó được thiết kế cho chỗ lớn hơn. Hãy tạo riêng một bản nhỏ: biểu tượng đơn giản hóa hoặc chữ cái đầu bằng phông chữ thương hiệu. Giữ màu sắc và một nét đặc trưng của hình dạng để mọi người nhận ra mối liên hệ. Một chữ cái rõ ràng vẫn tốt hơn hình thu nhỏ mờ nhòe.

Bạn cần biểu tượng mới? Công cụ tạo logo bằng AI thiết kế từ tên thương hiệu và mô tả ngắn nếu bạn muốn. Logo từ mẫu logo có tệp biểu tượng riêng khi thiết kế chứa biểu tượng, và mọi logo mua tại DepthLogo đều có bộ favicon.