Ngoài địa chỉ website mà Puramu đã đề cập trước đó thì Favicon cũng là một trong những thứ không thể thiếu trong khi chuẩn bị thiết kế website. Chắc hẳn bạn đã thấy favicon qua nhưng không biết tên gọi của nó là gì. Cùng đọc tiếp để tìm hiểu Favicon là gì mà lại cần thiết đến thế và cách tạo favicon nhé!
Favicon là gì?
Favicon là viết tắt của từ favorite icon. Vậy favicon là gì? Cái tên rất lạ nhưng lại rất đỗi quen thuộc với bạn đây!
Favicon là một biểu tượng (icon) nhỏ đại diện cho một trang web nằm ở đầu mỗi tab trong cửa sổ trình duyệt. Nó là biểu tượng của trang web (website icon), biểu tượng của tab (tab icon) hay bookmark (bookmark icon),…
Favicon thường sẽ là hình ảnh, biểu tượng hay chữ viết chính của logo. Phần tagline, tên thương hiệu sẽ được lược bỏ cho tinh gọn. Có thể nói favicon là một logo thu nhỏ của mỗi công ty trên nền tảng số, ứng dụng hay trang web. Chi tiết nhỏ này hoàn toàn không ảnh hưởng đến thao tác của người dùng trên website mà còn góp phần thể hiện tính chuyên nghiệp và nâng cao nhận thức về thương hiệu của bạn.
Bạn sẽ bắt gặp favicon ở các tab trình duyệt, bookmark, lịch sử tìm kiếm, trang kết quả tìm kiếm (cả trên máy tính, ti vi và điện thoại), thanh địa chỉ.
Favicon nên được thiết kế một cách đơn giản, dễ nhận diện, độc đáo (nếu có thể), dễ phân biệt và không bị nhầm lẫn với bất kỳ favicon nào trên thị trường.
Lợi ích của việc tạo Favicon là gì?
Dễ dàng phân biệt các tab
Ngày nay, người dùng cần phải thao tác với rất nhiều thứ trên trình duyệt. Vì vậy, họ cần mở rất nhiều tab cùng một lúc trên cửa sổ trình duyệt. Nếu các trang web không có Favicon thì chuyện gì sẽ xảy ra khi họ muốn quay lại một trang web bất kỳ trong số đó? Giờ đây tên của từng tab đã bị ẩn đi một phần hoặc hoàn toàn. Khách hàng phải vất vả nhấp chuột vào từng tab một để quay lại website họ cần sử dụng lại. Do đó, Favicon giúp người dùng dễ dàng trong việc tìm thấy và phân biệt các tab trên cửa sổ trình duyệt của họ. Tương tự như trong bookmark, history cũng vậy. Việc này còn góp phần tăng trải nghiệm người dùng.
Tăng độ nhận diện thương hiệu
Favicon có thể được ví như bộ mặt của website hay công ty bạn. Nó luôn được hiển thị trong tab, bookmark, history, trang kết quả tìm kiếm,… Nên nếu bạn có một Favicon ấn tượng, khác biệt hoặc đơn giản là đẹp mắt, khách hàng sẽ ghi nhớ hình ảnh đó. Đồng nghĩa với việc logo thương hiệu của bạn đã đi vào tiềm thức của người dùng. Khi khách hàng thấy favicon bạn qua một vài lần thì họ sẽ dễ dàng phân biệt trang web của bạn với những trang web khác trong tương lai.
Thu hút khách hàng, tăng doanh thu bán hàng
Trong trang kết quả tìm kiếm, một trang web có favicon sẽ nổi bật và thu hút khách hàng hơn là một trang web không có favicon.
Favicon của bạn có thiết kế thú vị, thu hút thì người dùng sẽ dễ dàng bị hấp dẫn hơn. Một khi khách hàng cảm thấy ấn tượng thì khả năng cao họ sẽ chọn bạn trong hàng loạt các kết quả tìm kiếm hiện ra hoặc chọn mua hàng từ trang web bạn. Càng thu hút được nhiều khách hàng thì bài viết của bạn sẽ dễ lên top hơn, doanh số bán hàng sẽ tăng cao hơn.
Thể hiện tính chuyên nghiệp và thẩm mỹ
Nhìn vào Favicon của một website hay công ty, phần nào khách hàng cũng đánh giá được độ chuyên nghiệp và tính thẩm mỹ của công ty như thế nào. Một favicon chuyên nghiệp sẽ tạo được lòng tin cho khách hàng.
Cách tạo Favicon cho website
Bước 1: Thiết kế file ảnh
Bạn thiết kế file ảnh favicon thông qua các phần mềm như: Photoshop, AI, Gimp, Paint, Sketch hay Canva,.. tuỳ vào thói quen của bạn.
Kích thước favicon thường sẽ là 16×16 (chuẩn nhất), 32×32, 48×48, 64×64,… Vì kích thước favicon nhỏ nên bạn chỉ nên lấy phần chữ viết chính (tối đa 3 ký tự) hoặc hình ảnh nổi bật trên logo của bạn. Phần tagline hay tên thương hiệu nên được lược bỏ. Nếu hiển thị hình ảnh kèm chữ thì phần chữ sẽ không được rõ để người dùng có thể đọc được.
Favicon có nhiều định dạng như: PNG, JPEG, GIF, BMP, ICO (mặc định),… Trong số đó, định dạng ICO có kích thước tệp nhỏ hơn, hỗ trợ nhiều kích thước ảnh trong cùng một tệp. Nó có thể được thu nhỏ và tối ưu hoá một cách độc lập. Ngoài ra, định dạng này còn hiển thị được trong tất cả các trình duyệt chính. Do đó, định dạng ICO được sử dụng nhiều nhất và là lựa chọn tối ưu trong favicon.
Tuy nhiên, các phần mềm thiết kế ảnh không có lựa chọn xuất ảnh với định dạng ICO. Vì thế, chúng ta sẽ xuất sang định dạng khác tạm rồi mới chuyển sang định dạng ICO. Đa số mọi người thường chọn transparent background cho favicon. Với lựa chọn này thì bạn chọn xuất ảnh định dạng PNG và chỉnh nền nhé! Nhưng nếu favicon của bạn sẽ đẹp hơn khi sử dụng khung nền có màu thì bạn xuất ảnh bất kỳ định dạng gì cũng được.
Bước 2: Chuyển file ảnh sang định dạng ICO
Những trang web hỗ trợ chuyển file sang định dạng ICO như: Convertio, Online Convert Free, Favicon Generator, Real Favicon Generator,… Bạn vào một trong những trang này, tải file vừa thiết kế lên và thực hiện các bước chuyển file. Sau đó, tải file về là đã có được file ICO.
Bước 3: Tải file lên website
Upload file vừa tải về lên thư mục gốc website (hosting) thông qua FTP client hay bằng trình quản trị file trong cPanel.
Nếu bạn muốn đặt favicon vào thư mục khác thì bạn điền tên thư mục vào đoạn code bên dưới. Sau đó chèn đoạn code này vào thẻ <head></head> của website.
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />Cách tạo Favicon cho website WordPress
Bước 1: Thiết kế file ảnh
Bạn thiết kế file ảnh favicon thông qua các phần mềm như: Photoshop, AI, Gimp, Paint, Sketch hay Canva,.. tuỳ vào thói quen của bạn. Kích thước chuẩn cho favicon của WordPress là 512×512 pixels. Với kích thước này, chất lượng hình ảnh sẽ sắc nét và hiển thị tốt trên mọi loại thiết bị. Đặc biệt là các thiết bị hiện đại hiện nay có màn hình độ phân giải cao. Nếu hình của bạn vượt quá kích thước thì đừng lo! Ở bước tải hình lên, WordPress vẫn hỗ trợ cắt ảnh và giảm size ảnh cho phù hợp.
Vì kích thước favicon nhỏ nên bạn chỉ nên lấy phần chữ viết chính (tối đa 3 ký tự) hoặc hình ảnh nổi bật trên logo của bạn. Phần tagline hay tên thương hiệu nên được lược bỏ. Nếu hiển thị hình ảnh kèm chữ thì phần chữ sẽ không được rõ để người dùng có thể đọc được.
Với WordPress, bạn nên chọn xuất ảnh định dạng PNG để chất lượng hình ảnh được hiển thị tốt nhất.
Bước 2: Tải file lên website
Với website WordPress bạn có thể thêm favicon ngay trong trang quản trị admin của mình:
Đăng nhập vào trang quản trị admin WordPress. Nhấp vào menu Appearance trong Dashboard WordPress -> chọn mục Customize. Sau đó, chọn Site Identity -> chọn Select site icon để tải favicon của bạn lên.
Sau khi hoàn tất, bạn có thể thấy ngay favicon trong bản xem trước và cả trên tab trình duyệt. Khi đã ưng ý, bạn nhấp vào Publish là xong nhé!
Ngoài cách trên bạn còn có thể sử dụng plugin Favicon để tạo Favicon miễn phí nữa.
Cách thay đổi Favicon cho website WordPress
Với website WordPress bạn có thể thay đổi favicon ngay trong trang quản trị admin của mình.
- Bước 1: Đăng nhập vào trang quản trị admin WordPress.
- Bước 2: Nhấp vào menu Appearance trong Dashboard WordPress -> chọn mục Customize.
- Bước 3: Một cửa sổ mới hiện lên, bạn nhấp vào Site Identity. Tại đây, bạn sẽ thấy bản xem trước favicon hiện tại của mình. Nhấp vào Change Image để tải favicon mới của bạn lên.
- Bước 4: Đến đây, bạn có thể thấy ngay favicon trong bản xem trước và cả trên tab trình duyệt. Khi đã ưng ý, bạn nhấp vào Publish là xong nhé!
Thông thường, khi thêm hay thay đổi favicon cho website thì mất một ngày để Google có thể thu thập dữ liệu từ trang web của bạn và cập nhật lên công cụ tìm kiếm. Vì vậy, khi đã làm theo hướng dẫn của Puramu mà vẫn chưa thấy favicon hiển thị thì bạn đừng lo nhé! Nhưng nếu sau một ngày mà bạn vẫn chưa thấy kết quả thì bạn cần xoá bộ nhớ cache trong trình duyệt hoặc sử dụng một trình duyệt khác thực hiện lại nhé!
Qua bài viết trên bạn thấy đấy! Tạo favicon rất quan trọng nhưng cũng rất đơn giản. Yếu tố quyết định favicon của bạn thành công dựa hầu hết vào tính thẩm mỹ của bạn trong khâu thiết kế web. Dù chỉ là chi tiết nhỏ nhưng favicon thể hiện tính chuyên nghiệp và tăng độ nhận diện thương hiệu cho bạn. Vì thế, hãy làm nó thật chỉn chu nhé!
