Biểu tượng yêu thích cho Webflow

Tải lên favicon của Webflow là một phần của bảng Cài đặt dự án, tách biệt với canvas Nhà thiết kế. Nhấp vào tên dự án trong bảng điều khiển Webflow, sau đó điều hướng đến Cài đặt dự án > Chung. Cuộn xuống phần Favicon & App Icon, nhấp vào khu vực tải lên và chọn tệp hình ảnh của bạn. Webflow chấp nhận các định dạng PNG, ICO và GIF.

PNG 32×32 pixel là kích thước bắt buộc tối thiểu đối với trình tải lên favicon của Webflow, nhưng bắt đầu từ 512×512 sẽ tạo ra kết quả sắc nét hơn nhiều. Webflow lấy mẫu xuống hình ảnh của bạn để hiển thị tab và mọi biến thể do CDN tạo. Luôn cung cấp nguồn sạch lớn nhất mà bạn có — trình tạo giúp bạn dễ dàng tạo 512×512 PNG từ bất kỳ logo nào.

Webflow lưu trữ favicon trên CDN của chính nó với URL được tạo tự động (thường ở định dạng uploads-ssl.webflow.com/...). Bạn không cần phải cung cấp đường dẫn CDN theo cách thủ công. Sau khi tải lên, nhấp vào Lưu và sau đó Xuất bản dự án của bạn. Biểu tượng yêu thích được đưa vào khi xuất bản chứ không chỉ khi lưu — những thay đổi chưa được xuất bản sẽ không hiển thị trên miền trực tiếp của bạn.

Nền trong suốt hoạt động chính xác khi tải lên favicon Webflow. CDN bảo tồn các kênh alpha PNG, do đó biểu tượng nền trong suốt hiển thị rõ ràng trên các chủ đề trình duyệt ở chế độ tối. Nếu biểu tượng của bạn có nền màu trắng hoặc màu đồng nhất, biểu tượng đó sẽ xuất hiện dưới dạng hộp vuông trong tab trình duyệt. Xuất logo của bạn không có nền trước khi tải lên.

Trình tải lên favicon tích hợp của Webflow không hỗ trợ các tệp SVG. Nếu bạn muốn một favicon vector SVG để hiển thị sắc nét ở mọi tỷ lệ và hỗ trợ chế độ tối, hãy thêm nó thông qua tính năng chèn mã tùy chỉnh. Đi tới Cài đặt dự án > Mã tùy chỉnh > Mã đầu và thêm: `<link rel='icon' type='image/svg+xml' href='https://yourdomain.com/favicon.svg'>`. Lưu trữ tệp SVG trên máy chủ của riêng bạn hoặc dịch vụ CDN.

Việc thêm apple-touch-icon cho các lượt cài đặt trên màn hình chính iOS cũng yêu cầu mã tùy chỉnh trong Webflow vì trình tải lên tích hợp sẵn chỉ xử lý favicon tiêu chuẩn. Tải 180×180 apple-touch-icon.png của bạn lên máy chủ lưu trữ tệp (hoặc Nội dung Webflow nếu gói của bạn hỗ trợ), sau đó đưa `<link rel='apple-touch-icon'size='180x180' href='URL_TO_YOUR_FILE'>` vào trường Cài đặt dự án > Mã tùy chỉnh > Mã đầu.

Hỗ trợ biểu tượng PWA của Webflow bị hạn chế so với các khung như Next.js. Không có trình tạo tệp kê khai web gốc trong Webflow. Để được hỗ trợ cài đặt PWA đầy đủ, hãy tạo tệp JSON site.webmanifest theo cách thủ công, lưu trữ tệp bên ngoài và đưa thẻ liên kết tệp kê khai qua mã tùy chỉnh. Bao gồm các mục nhập 192×192 và 512×512 PNG trong mảng biểu tượng tệp kê khai.

Nếu bạn đang xây dựng trang Webflow cho khách hàng, favicon thường được đặt muộn trong dự án và sau đó bị lãng quên. Một quy trình làm việc hữu ích là sớm đặt một biểu tượng giữ chỗ trong dự án và thay thế nó trước khi chuyển giao. Webflow không phiên bản lịch sử favicon — sau khi bạn lưu favicon mới, favicon cũ sẽ biến mất khỏi Cài đặt dự án, mặc dù nó vẫn có thể truy cập được qua URL CDN của nó trong một thời gian.

Các trang web Webflow nhiều miền — nơi cùng một dự án được xuất bản lên nhiều miền tùy chỉnh — chia sẻ một biểu tượng yêu thích Cài đặt dự án duy nhất. Không có ghi đè favicon trên mỗi tên miền trong Webflow gốc. Biểu tượng tương tự xuất hiện trên tất cả các miền được xuất bản. Nếu bạn cần biểu tượng trên mỗi miền, hãy sử dụng tính năng chèn mã tùy chỉnh để ghi đè thẻ liên kết biểu tượng một cách có điều kiện (việc này yêu cầu CMS XXH7XX hoặc logic tùy chỉnh).

Các bản cập nhật Favicon trong Webflow có thể mất thời gian để phổ biến do bộ nhớ đệm CDN. Sau khi xuất bản favicon mới, favicon cũ có thể xuất hiện trên trình duyệt trong 24-48 giờ. Mở trang web trực tiếp của bạn trong cửa sổ riêng tư/ẩn danh để xem biểu tượng được cập nhật mà không bị bộ nhớ đệm của trình duyệt cục bộ can thiệp. Nếu đối tượng của bạn sử dụng các trang được lưu trong bộ nhớ đệm CDN thì độ trễ truyền sẽ phụ thuộc vào cài đặt CDN TTL của Webflow.

Đối với người dùng Webflow Editor (khách hàng chỉnh sửa nội dung mà không có quyền truy cập vào Trình thiết kế), không thể thay đổi biểu tượng yêu thích thông qua Trình chỉnh sửa — nó bị khóa trong Cài đặt dự án. Chỉ những cộng tác viên có quyền truy cập vào Nhà thiết kế hoặc chủ sở hữu tài khoản mới có thể cập nhật biểu tượng yêu thích. Truyền đạt điều này rõ ràng cho khách hàng để họ biết nơi yêu cầu cập nhật favicon trong tương lai.

Sau khi xuất bản favicon Webflow của bạn, hãy sử dụng favicon tester để xác nhận nó được giải quyết tại miền sản xuất của bạn. So sánh kết quả với kích thước dự kiến: 32×32 cho tab, 180×180 cho iOS nếu bạn đã thêm apple-touch-icon. Đồng thời xem lại hướng dẫn best favicon size để hiểu kích thước nào cải thiện điểm hoàn chỉnh của biểu tượng trên trang web của bạn.