Tạo favicon: ICO, biểu tượng PNG và Manifest

Favicon là biểu tượng nhỏ xuất hiện trên thẻ trình duyệt, dấu trang, lịch sử và kết quả tìm kiếm cạnh tên trang của bạn. Trên điện thoại, phiên bản lớn hơn xuất hiện trên màn hình chính khi ai đó lưu trang. Biểu tượng rõ ràng giúp trang dễ tìm giữa hàng chục thẻ đang mở và trông chuyên nghiệp hơn.

Những nơi khác nhau cần kích thước và định dạng khác nhau. Trình duyệt vẫn tìm favicon.ico, thiết bị Apple dùng PNG 180 px, Android và ứng dụng web cài đặt được đọc biểu tượng từ web manifest, và công cụ tìm kiếm ưu tiên biểu tượng ít nhất 48 px.

Những kích thước bạn cần

Giải thích kích thước favicon, mỗi loại một dòng: 16 và 32 px cho thẻ trình duyệt, 48 px cho Windows và kết quả tìm kiếm, 180 px cho Apple touch icon, 192 và 512 px cho Android và web app manifest. Công cụ này tạo tất cả, cộng thêm các phiên bản 64, 96, 128, 256 và 384 px cho mục đích khác.

Thêm logo, lý tưởng là vuông và ít nhất 512 x 512 điểm ảnh. PNG nền trong suốt hoặc SVG cho kết quả sắc nét nhất. Chọn nền trong suốt hoặc đặc, thêm khoảng đệm nếu hình chạm cạnh, và bo góc nếu muốn biểu tượng kiểu ứng dụng. Bản xem trước hiển thị biểu tượng ở 16, 32, 48 và 180 px trên cả nền sáng và tối, để bạn đánh giá nó trông thế nào trên thẻ thật.

Nhập tên ứng dụng và màu chủ đề cho manifest, rồi nhấn Tải gói favicon. Bạn cũng có thể chỉ tải favicon.ico hoặc PNG 512 px.

Bắt đầu từ PNG

Để tạo favicon từ hình PNG, hãy bắt đầu với phiên bản lớn nhất bạn có. Thu nhỏ ảnh lớn cho biểu tượng nhỏ sắc nét, còn phóng to ảnh nhỏ gây mờ. Nếu logo dài ngang, hãy cân nhắc chỉ dùng biểu tượng hoặc chữ cái đầu, vì chữ không đọc được ở 16 px.

favicon.ico

Tệp favicon.ico được tạo bằng chuyển đổi PNG sang ICO, lưu ảnh 16, 32 và 48 px trong một tệp. Trình duyệt hiện đại và Windows đọc được biểu tượng nén PNG, giữ tệp nhỏ và cạnh sạch.

Thiết bị Apple

Kích thước Apple touch icon là 180 x 180 điểm ảnh. iOS lấp vùng trong suốt bằng màu đen, nên khi nền trong suốt, công cụ tự động cho biểu tượng này nền đặc bằng màu chủ đề của bạn.

Android và ứng dụng web

Biểu tượng web manifest trong site.webmanifest là PNG 192 và 512 px, gồm cả phiên bản maskable cho Android, vốn cắt biểu tượng thành hình tròn hoặc vuông bo góc. Giữ phần hình quan trọng trong 80% trung tâm của biểu tượng để không bị cắt mất.

Giải nén gói và tải tệp lên thư mục gốc của trang web, cùng chỗ với trang chủ. Rồi sao chép đoạn mã HTML vào phần head của mọi trang, hoặc vào mẫu trang. Đoạn mã liên kết ICO, PNG 16 và 32 px, biểu tượng Apple và manifest.

Các công cụ tạo web và hệ thống quản lý nội dung thường có cài đặt biểu tượng trang thay vào đó. Khi đó, hãy tải PNG 512 px lên đó, và nền tảng sẽ tự tạo các cỡ khác.

Khắc phục sự cố

Khi bạn thấy favicon không hiển thị sau khi tải lên, trình duyệt có thể đang dùng bản lưu đệm. Mở trực tiếp URL biểu tượng, rồi tải lại trang bằng làm mới cứng, hoặc thử cửa sổ riêng tư. Công cụ tìm kiếm có thể mất vài ngày hoặc vài tuần để cập nhật biểu tượng trong kết quả tìm kiếm.

Đơn giản hóa. Ở 16 x 16 điểm ảnh, đường mảnh và chữ nhỏ biến mất. Dùng biểu tượng đậm, một chữ cái hoặc phiên bản đơn giản của logo, với độ tương phản mạnh. Kiểm tra cả bản xem trước sáng và tối: logo tối trên nền trong suốt có thể biến mất trên giao diện trình duyệt tối, đó là lý do tốt để thêm nền đặc hoặc viền sáng.

Tính nhất quán cũng quan trọng. Dùng cùng màu với thương hiệu, mà bạn có thể lấy mẫu bằng công cụ lấy màu của chúng tôi, và giữ biểu tượng dễ nhận ra ở mọi kích thước.

Ảnh được xử lý trong trình duyệt và không bao giờ được tải lên. Tệp SVG được làm sạch khỏi script và tham chiếu bên ngoài trước khi hiển thị. Hỗ trợ đầu vào PNG, JPG, WebP, GIF và SVG. Công cụ miễn phí, không giới hạn và không dùng tín dụng EnhancerPro.

Bước tiếp theo

Nếu logo chỉ có dạng ảnh điểm, công cụ chuyển ảnh sang SVG của chúng tôi có thể tạo phiên bản vector, và công cụ SVG sang PNG xuất logo vector ở mọi kích thước.

Thẻ trình duyệt

Trình duyệt máy tính thường hiển thị biểu tượng 16 hoặc 32 px trên thẻ, và phiên bản 32 px trên màn hình độ phân giải cao. Chrome và Edge cũng dùng biểu tượng PNG lớn hơn cho lối tắt và trang thẻ mới. Vì các cỡ này rất nhỏ, hãy kiểm tra kỹ bản xem trước 16 px; nếu biểu tượng trông nhòe, hãy đơn giản hóa hình hoặc tăng khoảng đệm một chút.

Kết quả tìm kiếm

Công cụ tìm kiếm hiển thị favicon cạnh trang của bạn trong kết quả trên di động và máy tính. Chúng ưu tiên biểu tượng vuông có kích thước là bội số của 48 px và trình thu thập của chúng truy cập được. Liên kết biểu tượng trong phần head của trang chủ, như trong đoạn mã được tạo, là cách chuẩn để chúng dễ tìm thấy.

Màn hình chính

Khi mọi người thêm trang của bạn vào màn hình chính điện thoại, iPhone dùng Apple touch icon và điện thoại Android dùng biểu tượng từ manifest. Cả hai đẹp nhất với nền đặc và chút khoảng đệm, để biểu tượng không chạm vào góc bo mà hệ thống thêm vào.

Chế độ tối

Nhiều người dùng giao diện trình duyệt tối. Logo đen trên nền trong suốt sẽ biến mất ở đó. Bản xem trước tối trong công cụ cho thấy điều này ngay lập tức. Màu nền đặc, viền sáng hoặc phiên bản hai màu của logo giữ biểu tượng hiển thị ở mọi nơi.

Cập nhật biểu tượng hiện có

Khi thay favicon, hãy giữ nguyên tên tệp để các liên kết hiện có vẫn hoạt động. Trình duyệt lưu đệm biểu tượng rất mạnh, nên biểu tượng mới có thể mất một lúc mới hiện ra với khách quay lại. Thêm truy vấn phiên bản, như favicon.ico?v=2, vào liên kết trong HTML buộc trình duyệt tải tệp mới.

Danh sách kiểm tra trước khi xuất bản

Trước khi xuất bản, hãy kiểm tra bốn điều. Tệp favicon.ico mở được trong trình duyệt tại tên-miền-của-bạn/favicon.ico. Đoạn mã HTML nằm trong phần head của trang chủ. Biểu tượng Apple có nền đặc và trông đẹp khi bạn thêm trang vào màn hình chính iPhone. Tên manifest và màu chủ đề khớp với thương hiệu. Khi đã có những điều đó, biểu tượng sẽ xuất hiện nhất quán trên thẻ, dấu trang, kết quả tìm kiếm và màn hình chính, và khách truy cập sẽ nhận ra trang của bạn ngay lập tức.

Giữ tệp nguồn

Giữ logo gốc và tệp ZIP cùng nhau trong dự án. Khi bạn đổi màu hoặc thiết kế lại logo sau này, bạn có thể tạo lại cả bộ trong một phút với cùng cài đặt, và mọi kích thước sẽ nhất quán. Hãy lưu cả màu chủ đề đã dùng, để manifest và biểu tượng lại khớp với thương hiệu. Một thư mục gọn gàng gồm logo, cài đặt và tệp đã tạo tiết kiệm thời gian cho bất kỳ ai duy trì trang sau bạn, kể cả chính bạn trong tương lai.