Cách tạo favicon cho website từ logo: kích thước và cách khai báo
Favicon là biểu tượng nhỏ xuất hiện trên tab trình duyệt, trong danh sách dấu trang và cạnh tên website trên kết quả tìm kiếm Google điện thoại. Một website thiếu favicon sẽ hiện biểu tượng mặc định màu xám — trông thiếu chuyên nghiệp và khó nhận ra giữa hàng chục tab đang mở.
Bài này hướng dẫn tạo đủ bộ favicon từ logo có sẵn và khai báo đúng cách trong mã HTML.
Chuẩn bị logo
- Hình vuông, đơn giản. Favicon chỉ 16–32 pixel; logo dài có chữ sẽ thành một vệt mờ. Hãy dùng biểu tượng (icon) hoặc chữ cái đầu của thương hiệu.
- Độ phân giải cao. Bắt đầu từ ảnh ít nhất 512×512 pixel để thu nhỏ vẫn nét.
- Nền trong suốt (PNG) hoặc nền màu đặc. Nhớ thử trên cả tab sáng và tab tối của trình duyệt.
- Chừa lề. Để một khoảng trống nhỏ quanh biểu tượng, tránh bị cắt khi hiển thị bo tròn trên điện thoại.
Những file favicon cần có
File quan trọng nhất là favicon.ico. Định dạng ICO đặc biệt ở chỗ một file chứa được nhiều kích thước, trình duyệt tự chọn kích thước phù hợp. Đặt file này ở thư mục gốc website (/favicon.ico) — nhiều trình duyệt và công cụ tự tìm ở đây kể cả khi bạn quên khai báo.
Tạo favicon.ico từ logo
- Mở công cụ tạo favicon ICO trên Convert.com.vn.
- Tải lên logo dạng PNG (nên có nền trong suốt) hoặc JPG.
- Bấm Chuyển sang ICO và tải file về. File ICO đầu ra chứa sẵn các kích thước 16, 32, 48 và 64 pixel.
- Đổi tên thành
favicon.ico(nếu cần) và tải lên thư mục gốc website.
Các file PNG còn lại (180, 192, 512 pixel) bạn có thể tạo bằng công cụ đổi kích thước ảnh: cắt logo thành hình vuông rồi nhập đúng kích thước cần có.
Khai báo favicon trong thẻ head
Thêm các dòng sau vào phần <head> của mọi trang:
<link rel="icon" href="/favicon.ico" sizes="any"><link rel="apple-touch-icon" href="/apple-touch-icon.png"><link rel="manifest" href="/site.webmanifest">
Trong file site.webmanifest, khai báo hai icon 192 và 512 pixel ở mục icons. Nếu website dùng WordPress, vào Giao diện → Tuỳ biến → Nhận diện trang (Site Identity) → Biểu tượng trang và tải ảnh vuông 512×512; WordPress tự tạo các kích thước còn lại.
Favicon có ảnh hưởng SEO không?
Favicon không phải yếu tố xếp hạng trực tiếp. Nhưng trên kết quả tìm kiếm điện thoại, Google hiển thị favicon cạnh tên website; một biểu tượng rõ ràng giúp người dùng nhận ra thương hiệu và có thể tăng tỉ lệ bấm vào. Google yêu cầu favicon là hình vuông, kích thước là bội số của 48 pixel (48×48, 96×96…) và có thể truy cập được bởi Googlebot.
Favicon không hiện, phải làm sao?
- Trình duyệt lưu cache rất lâu. Mở trang ở cửa sổ ẩn danh hoặc thêm tham số phiên bản:
/favicon.ico?v=2. - Đường dẫn sai. Mở trực tiếp
tenmien.com/favicon.icoxem có hiện ảnh không. - Google chưa cập nhật. Kết quả tìm kiếm có thể mất vài ngày đến vài tuần để hiện favicon mới.
Câu hỏi thường gặp
Có dùng favicon dạng PNG thay cho ICO được không?
Được, các trình duyệt hiện đại đều nhận favicon PNG qua thẻ link rel="icon". Tuy vậy, nhiều công cụ và trình duyệt cũ vẫn tự tìm file /favicon.ico ở thư mục gốc, nên có thêm file ICO vẫn là cách an toàn nhất.
Favicon SVG là gì, có nên dùng không?
Các trình duyệt hiện đại hỗ trợ favicon dạng SVG, nét ở mọi kích thước và có thể đổi màu theo chế độ sáng tối bằng CSS bên trong file. Bạn có thể dùng SVG làm favicon chính, kèm favicon.ico làm dự phòng cho trình duyệt cũ.
Logo có chữ dài thì làm favicon thế nào?
Đừng thu nhỏ cả logo. Hãy dùng biểu tượng riêng của thương hiệu, hoặc chữ cái đầu đặt trên nền màu thương hiệu. Ở kích thước 16 pixel, chỉ một hai ký tự hoặc một hình đơn giản là còn nhận ra được.
Đổi favicon có ảnh hưởng thứ hạng Google không?
Không ảnh hưởng thứ hạng. Google chỉ cập nhật biểu tượng hiển thị cạnh tên website trên kết quả tìm kiếm, việc này có thể mất từ vài ngày đến vài tuần.
Favicon có cần đổi khi website đổi giao diện tối không?
Nếu favicon là logo màu đậm trên nền trong suốt, nó có thể khó nhìn trên tab trình duyệt ở chế độ tối. Hãy thêm một viền hoặc nền màu nhẹ quanh biểu tượng, hoặc dùng favicon SVG có khai báo màu riêng cho chế độ tối để hiển thị tốt trên cả hai nền.
Tóm lại
Chuẩn bị logo vuông đơn giản, tạo file favicon.ico nhiều kích thước, thêm ảnh 180, 192, 512 pixel và khai báo trong thẻ head. Mất khoảng mười phút để website của bạn trông chuyên nghiệp hơn trên mọi tab trình duyệt.
