Favicon là gì và vì sao cái icon tí hon lại quan trọng

Mỗi khi mở web, bạn để ý cái hình tí xíu nằm bên trái tên trang trên tab trình duyệt chưa? Đấy chính là thứ mà nhiều người tò mò hỏi favicon là gì mà sao bé tẹo vậy lại có tên riêng. Nói gọn: favicon (favorite icon — biểu tượng yêu thích, cái icon nhỏ trên tab trình duyệt) là hình nhận diện của một website, hiện trên tab, khi bạn lưu bookmark (đánh dấu trang), và đôi khi ngay trên kết quả tìm kiếm Google trên điện thoại. Nó nhỏ, thường chỉ 16 hoặc 32 pixel mỗi cạnh, nhưng vai trò không nhỏ chút nào.

Mười mấy năm làm web, mình gặp không ít trang đẹp lung linh nhưng tab trình duyệt lại trơ ra cái biểu tượng quả địa cầu xám xịt mặc định, hoặc tệ hơn là logo bị thu nhỏ thành một cục mờ chẳng nhìn ra gì. Khách mở mười mấy tab cùng lúc, web bạn lẫn vào đám đông không dấu vết. Bài này mình kể cho bạn nghe favicon thực ra là gì, vì sao bé mà quan trọng, làm thế nào cho đẹp, nó khác logo ở đâu, và cách tự kiểm xem web mình đã có favicon tử tế chưa.

Cái icon đó xuất hiện ở những đâu

Nhiều người nghĩ favicon chỉ nằm trên tab, nhưng thực ra nó len lỏi vào nhiều chỗ hơn bạn tưởng. Mình liệt kê những nơi nó hay xuất hiện để bạn hình dung:

• Trên tab trình duyệt, ngay cạnh tiêu đề trang. Đây là chỗ quen thuộc nhất.
• Khi khách lưu bookmark hay kéo web vào thanh dấu trang, favicon là thứ giúp họ nhận ra trang giữa cả chục mục.
• Trên lịch sử duyệt web và ô gợi ý khi gõ địa chỉ.
• Trên kết quả tìm kiếm Google ở điện thoại, favicon hiện cạnh tên miền — góp phần khiến trang bạn trông chính chủ, đáng tin.
• Khi người dùng thêm web vào màn hình chính điện thoại (kiểu như một ứng dụng), bản icon độ phân giải cao sẽ thành biểu tượng app.

Để ý mà xem, tất cả những chỗ này đều là lúc khách đang phải chọn giữa nhiều thứ giống nhau. Tab nào cũng là chữ, bookmark nào cũng là dòng text. Cái icon màu sắc đập vào mắt chính là lối tắt để não nhận ra "à, đây là trang đó".

Vì sao nhỏ vậy mà lại quan trọng

Câu hỏi hợp lý: một hình 16 pixel thì ảnh hưởng được bao nhiêu? Theo mình quan sát, ảnh hưởng nhiều hơn vẻ ngoài của nó. Có ba thứ favicon âm thầm làm được.

Thứ nhất là nhận diện thương hiệu. Khi khách thấy đi thấy lại cái icon của bạn — trên tab, trong bookmark, trên kết quả tìm kiếm — họ ghi nhớ thương hiệu mà không cần cố. Đây là kiểu quảng cáo miễn phí, lặp đi lặp lại mỗi lần họ ghé.

Thứ hai là cảm giác chuyên nghiệp. Một web để trơ cái icon mặc định trông như hàng làm dở, làm vội. Người dùng tinh ý, dù không nói ra, vẫn ngầm trừ điểm tin tưởng. Ngược lại, một favicon gọn gàng đúng màu thương hiệu khiến cả trang trông được đầu tư tử tế. Chi tiết nhỏ nói lên thái độ với chi tiết lớn.

Thứ ba là chuyện thực dụng: giúp khách tìm lại tab của bạn. Người ta giờ mở chục tab là bình thường. Khi mỗi tab co lại chỉ còn cái icon, web nào có favicon dễ nhận thì khách quay về nhanh; web nào trơ icon xám thì lẫn vào đám đông, khách lướt qua mất.

Favicon khác logo ở chỗ nào

Đây là chỗ nhiều chủ web nhầm nhất, nên mình tách rõ. Rất nhiều người cứ lấy nguyên cái logo công ty nhét vào làm favicon rồi tự hỏi sao nhìn nó nhoè nhoẹt.

Logo là bộ nhận diện đầy đủ: thường có cả hình lẫn chữ tên thương hiệu, được nhìn ở kích thước lớn — trên bảng hiệu, danh thiếp, đầu trang web. Logo có chỗ để thở, có chi tiết, có khẩu hiệu kèm theo.

Favicon thì sống trong một ô vuông tí hon. Ở 16 pixel, mọi dòng chữ đều biến thành vệt mờ không đọc nổi, mọi chi tiết nhỏ đều dính bết vào nhau. Cho nên favicon không phải là logo thu nhỏ, mà là phần tinh tuý nhất của logo được rút gọn lại: thường chỉ giữ cái biểu tượng (mark — phần hình của logo) hoặc một chữ cái đầu, bỏ hết phần chữ.

Cùng một thương hiệu, logo và favicon nên cùng tông màu, cùng tinh thần để khách thấy là liền nhận ra. Nhưng favicon phải được vẽ riêng cho cỡ nhỏ, chứ không phải kéo logo cho bé lại rồi xong.

Làm một favicon đẹp cần để ý gì

Một favicon tốt không phải thứ cầu kỳ. Ngược lại, càng đơn giản càng tốt, vì khoảng không gian có hạn. Mình gom mấy nguyên tắc xương sống mà bên mình luôn bám khi làm icon cho khách.

Một, giữ thật đơn giản. Một biểu tượng, một chữ cái, hoặc một hình khối gọn. Đừng cố nhồi cả con voi vào lỗ kim. Nhìn vào phải hiểu ngay trong nửa giây.

Hai, phải đọc được ở 16 pixel. Đây là phép thử sống còn. Trước khi chốt, bạn thu cái icon xuống bằng cỡ móng tay rồi nhìn từ xa nửa mét. Nếu vẫn nhận ra là gì thì đạt; nếu thành cục mờ thì làm lại.

Ba, chọn nền và màu tương phản rõ. Trình duyệt có cả nền sáng lẫn nền tối. Favicon mỏng manh màu nhạt trên nền sáng sẽ biến mất. Nên dùng màu đậm, tương phản tốt, và cân nhắc nền đặc thay vì nền trong suốt để icon luôn nổi.

Bốn, dùng đúng định dạng và đủ kích thước. Thời nay nên xuất favicon dạng PNG hoặc SVG (định dạng ảnh vector — phóng to không vỡ) ở nhiều cỡ: 16, 32, 48 pixel cho trình duyệt, và bản 180 pixel trở lên cho icon khi lưu ra màn hình điện thoại. Khai báo đúng trong phần đầu trang web để trình duyệt nào cũng lấy được bản hợp cỡ.

Tự kiểm web bạn đã có favicon tử tế chưa

Phần này để bạn tự soi web mình ngay bây giờ, không cần biết kỹ thuật. Làm theo mấy bước đời thường sau:

Mở web của bạn lên ở máy tính, nhìn cái tab trên cùng. Nếu thấy biểu tượng quả địa cầu xám hoặc một mảnh giấy trắng thì coi như chưa có favicon — cần làm gấp. Nếu thấy icon riêng thì xem tiếp nó có rõ không, hay là một cục mờ nhoè.

Tiếp, thử lưu web vào bookmark rồi nhìn xem trong danh sách dấu trang nó hiện ra hình gì. Rồi mở web trên điện thoại, gõ tên thương hiệu lên Google, xem cạnh tên miền có cái icon của bạn không. Cuối cùng, mở cùng lúc năm sáu tab các web khác nhau rồi tự hỏi: tab của mình có dễ nhận ra giữa đám đông không, hay chìm nghỉm?

Nếu trả lời "chưa ổn" ở bất kỳ bước nào thì favicon là việc đáng sửa sớm. Nó rẻ, làm nhanh, mà hiệu quả nhận diện thì kéo dài mãi về sau. Nếu bạn đang mơ hồ về chuyện làm web đẹp mà dễ dùng, mình có viết riêng bài UX UI là gì và vì sao quyết định web giữ khách để bạn đọc thêm. Còn nếu muốn web không chỉ đẹp mà còn lên được Google, thế nào là website chuẩn SEO là bài nên xem, vì favicon cũng là một mảnh ghép nhỏ trong bức tranh đó. Ai dùng nền tảng quản trị nội dung thì bài CMS là gì sẽ giúp hiểu chỗ để thay favicon nằm ở đâu.

Đừng để chi tiết nhỏ này bị bỏ quên

Favicon là kiểu chi tiết mà có thì chẳng ai khen, nhưng thiếu thì người tinh ý sẽ thấy ngay là web làm chưa tới. Nó không tốn mấy công, không tốn mấy tiền, nhưng góp phần khiến thương hiệu của bạn trông chỉn chu và dễ nhớ hơn mỗi lần khách ghé. Theo mình, đã bỏ tiền làm web thì đừng tiếc cái icon tí hon này — nó là một trong những thứ rẻ nhất mà đáng làm nhất.

Bên mình — Thiết Kế Web Giá Rẻ — làm web trọn gói từ 1.990.000đ gói Cơ bản, 3.990.000đ gói Pro, từ 7.990.000đ gói VIP. Mọi gói tặng tên miền, hosting và chứng chỉ bảo mật SSL năm đầu, bàn giao trong 3–7 ngày, và tất nhiên có favicon đúng chuẩn cùng bộ nhận diện gọn gàng. Mời bạn xem bảng giá trọn gói, còn muốn tư vấn riêng thì cứ nhắn qua trang liên hệ hoặc Zalo 0777 716 863 nhé.