Bạn vốn đã có một logo. Thứ bạn cần là logo đó được biến thành đống file biểu tượng nhỏ xíu mà một trình duyệt mong đợi — một favicon.ico, một nhúm PNG ở các kích thước cụ thể, một web manifest, và HTML để nối tất cả lại. Việc chuyển đổi đó mang tính máy móc, và bạn có thể làm nó trong khoảng một phút mà không cài gì cả.
Điểm vướng là không phải logo nào cũng thu nhỏ một cách duyên dáng. Vậy nên bài này bao cả con đường nhanh và cách sửa một logo biến thành cháo ở 16 pixel.
Bản ngắn
- Lấy logo của bạn dưới dạng một ảnh vuông — lý tưởng là 512×512 hoặc lớn hơn, trên một nền trong suốt hoặc đặc.
- Thả nó vào Công cụ Tạo Favicon.
- Tải bộ được tạo về và thả các file vào gốc trang của bạn.
- Dán đoạn HTML được cung cấp vào
<head>của bạn.
Đó là cả công việc. Công cụ tạo xuất ra favicon.ico, các PNG ở 16, 32, 48, 180, 192, và 512, một webmanifest, và đúng các thẻ <link> — nên bạn không phải cắt tay sáu ảnh hay đoán cú pháp manifest.
Chuẩn bị logo của bạn trước — đây là nơi chất lượng được thắng hay thua
Một favicon sống ở 16×16 trong tab trình duyệt. Bất cứ chi tiết nào không sống sót được kích thước đó là lãng phí. Bỏ ra hai phút ở đây và kết quả trông sắc nét ở mọi nơi.
Làm nó vuông. Favicon là vuông. Một logo rộng, nằm ngang sẽ bị thêm khung đen hoặc bị bóp méo. Cắt về phần tử dễ nhận ra nhất — thường là mark hay một chữ cái đơn — và căn giữa nó trong một khung vuông.
Bỏ wordmark. Tên công ty của bạn đầy đủ sẽ không đọc được ở cỡ tab. "Acme Corporation" trở thành một vệt xám. Giữ biểu tượng, hay một chữ cái đơn, và để tiêu đề tab mang cái tên.
Kiểm tra độ tương phản với cả hai chủ đề. Tab trình duyệt có sáng và tối. Một biểu tượng xanh navy đậm biến mất trên một tab tối; một biểu tượng nhạt biến mất trên một tab sáng. Nếu mark của bạn là một màu phẳng, hãy chắc màu đó đọc được trên cả hai. Một đường viền tinh tế hay một mảnh nền đặc nhỏ có thể giúp.
Chừa không gian thở. Thêm một chút khoảng đệm bên trong hình vuông để biểu tượng không chen sát vào các cạnh. Nó sẽ trông cân đối hơn ở mọi ô.
Bắt đầu lớn. Một nguồn 512×512 (hay lớn hơn) cho công cụ tạo chi tiết sạch để thu nhỏ từ đó. Phóng to một logo nhỏ xíu trước chỉ nướng sẵn cái mờ vào.
Nền trong suốt hay đặc?
Cả hai đều hoạt động — tùy vào vẻ ngoài bạn muốn.
- Trong suốt để nền của tab hay màn hình chính hiện qua. Sạch và hiện đại, và nó thích ứng với môi trường sáng/tối. Tốt nhất khi mark của bạn là một hình dạng rõ ràng.
- Mảnh nền đặc (một hình vuông bo góc có màu phía sau mark) đảm bảo biểu tượng đọc được bất kể cái gì phía sau. Đây là điều hầu hết biểu tượng ứng dụng làm, và là lựa chọn an toàn hơn nếu logo của bạn mảnh hay tương phản thấp.
Nếu phân vân, một mảnh đặc theo màu thương hiệu của bạn là lựa chọn vững chắc — nó không bao giờ biến mất vào một cái nền cùng màu.
Sau khi bạn tải xuống: các file đi đâu
Công cụ tạo đưa bạn một bộ file và một đoạn mã. Hai quy tắc đặt chỗ bao được:
favicon.icođi vào gốc trang của bạn (/favicon.ico). Trình duyệt và Windows tìm nó ở đó theo tên kể cả không có một thẻ<link>.- Mọi thứ khác có thể sống ở bất cứ đâu bạn thích miễn là các đường dẫn trong đoạn HTML khớp. Hầu hết mọi người thả tất cả vào gốc và dán đoạn mã nguyên trạng.
Rồi chỉ còn đoạn <head> — các liên kết biểu tượng, apple-touch-icon, và tham chiếu manifest. Dán, triển khai, làm mới cứng, và bạn sẽ thấy logo của mình trong tab.
Vì sao làm nó trong trình duyệt?
Vì logo của bạn không bao giờ rời khỏi máy. Cả quá trình — đọc ảnh, đổi kích thước về mọi chiều, đóng gói .ico, viết manifest — diễn ra cục bộ trong trình duyệt của bạn bằng Canvas. Không gì được tải lên một máy chủ, không đăng ký hay watermark, và sau lần truy cập đầu tiên công cụ hoạt động offline. Với một tài sản thương hiệu bạn có thể chưa xuất bản, giữ nó ngoài các máy chủ bên thứ ba là mặc định khôn ngoan.
Một khi logo của bạn vuông, tương phản cao, và đọc được ở cỡ nhỏ, tạo cả bộ là phần dễ.