Favicon website: công dụng và cách làm

Để thu hút và tạo hình ảnh ghi nhớ về thương hiệu trong tâm trí người dùng khi truy cập vào một website thì hình ảnh Logo xuất hiện tại nhiều nơi là một lợi thế rất lớn. Favicon là một trong những yếu tố giúp bạn thực hiện được điều đó.

Favicon cho website là gì?

Định nghĩa về favicon website

Vị trí của Favicon trên Tab trình duyệt

Favicon được ghép từ hai chữ là “favourite” và “icon”, có nghĩa là biểu tượng và sự yêu thích. Tuy nhiên, ý nghĩa của favicon trong thiết kế trang web là mang tính biểu tượng cho website doanh nghiệp.

Nếu logo đại diện cho thương hiệu thì favicon cũng vậy. Đây là một dạng logo được rút gọn và đơn giản hoá. Vị trí hiển thị của favicon nằm ở góc trái của tab. Vì kích thước nhỏ như vậy nên favicon càng đơn giản, dễ nhận diện sẽ giúp người dùng ghi nhớ được website của doanh nghiệp.

Tại sao website của bạn cần favicon?

Trong quá trình xây dựng trang web, xây dựng thương hiệu, có thể nói favicon chiếm một công đoạn rất nhỏ trong quá trình ấy. Nhưng tại sao khi trang web của doanh nghiệp sở hữu favicon sẽ tốt hơn là để biểu tượng trên tab trống hay sử dụng biểu tượng mặc định?

• Cũng tương tự như logo, favicon không chỉ là biểu tượng web mà còn mang tính đại diện cho thương hiệu. Điều này giúp gia tăng trải nghiệm của người dùng hơn. Đặt trường hợp khách hàng tiềm năng của bạn mở rất nhiều tab một lúc, làm sao để họ có thể để ý đến trang web của bạn chỉ trong một cú liếc mắt?
• Vì mang tính đại diện cho thương hiệu nên favicon ấn tượng có thể gia tăng cơ hội đặt thương hiệu của bạn vào tâm trí người dùng. Gia tăng khả năng nhận diện về thương hiệu. Và bởi vì những điều này sẽ đến lý do tiếp theo là…
• Tăng tính chuyên nghiệp của website hơn. Khi gia tăng được tính chuyên nghiệp của website bạn sẽ dễ gây ấn tượng và lấy lòng tin từ khách hàng hơn. Bên cạnh đó, website có tính chuyên nghiệp cao sẽ được các công cụ tìm kiếm đánh giá cao hơn. Từ đó có thể góp phần xây dựng dịch vụ SEO Mona Media.

Như vậy, chỉ với một biểu tượng nhỏ trên góc trái của thanh tab, favicon mang lại nhiều lợi ích cho website doanh nghiệp hơn là bạn nghĩ.

Cần đáp ứng những gì để tạo ra favicon chuẩn?

Bởi ngày nay người dùng lướt web bằng nhiều trình duyệt cũng như là trên nhiều thiết bị khác nhau. Vì thế khi thiết kế favicon bạn cần đảm bảo chúng hiển thị đúng trên tất cả những trường hợp này. Chỉ cần ghi nhớ những thông tin sau là có thể đảm bảo hầu hết các favicon sẽ được hiển thị chuẩn.

• Nên có nhiều kích thước của favicon. Điều này giúp cho việc hiển thị ở các trình duyệt hay giữa phiên bản máy tính và điện thoại được chuẩn xác hơn. Các thông số thông thường là: 16×16 px, 20×20 px, 24×24 px,… 
• Định dạng đuôi của file favicon nên đa dạng. Đuôi phổ biến nhất của favicon thường là .ico. Tuy nhiên, bạn có thể thiết kế đuôi file của favicon theo định dạng .gif và .png. Tuỳ vào nền tảng website mà bạn xây dựng.
• Favicon cũng có thể lấy logo của doanh nghiệp. Nhưng nên nhớ, vì kích thước của favicon khi hiển thị sẽ rất nhỏ nên favicon càng đơn giản nhưng vẫn mang dấu ấn doanh nghiệp càng tốt.

Đó là một số thông tin tổng quan về favicon, sau đây bài viết sẽ hướng dẫn cho các bạn cách xây dựng một favicon hiệu quả như thế nào.

Cách tạo favicon cho website đơn giản

Phương pháp tạo favicon thủ công bằng phần mềm

Để làm favicon thủ công đòi hỏi bạn cần biết về photoshop một chút cũng như là kỹ năng design. Các bạn có thể sử dụng bất kỳ phần mềm nào mà mình quen thuộc như Adobe Photoshop, Adobe Illustrator, Lightroom hay thậm chí là Paint. Mặt khác, có thể tự sử dụng file logo vốn có của mình.

Những gì bạn cần chuẩn bị là một hình ảnh hình vuông, kích thước 32px hoặc 256px. Sau đó mọi thiết kế của bạn nên được gói gọn vào trong hình vuông này. Hãy lưu file favicon mà bạn thiết kế ở đuôi .png hoặc .gif như đã hướng dẫn ở trên.

Ngoài ra, tuỳ vào nhà cung cấp hosting cho trang web của bạn mà việc đưa file favicon lên sẽ bắt buộc đổi sang đuôi .ico. Trong trường hợp đó, bạn có thể vào trang web convertico.com hay favicon-generator.com để chuyển sang đuôi .ico. Các thao tác rất đơn giản.

Các trang web trực tuyến hỗ trợ tạo favicon miễn phí

Một cách nữa để tạo ra favicon ấn tượng mà không cần kỹ năng photoshop hay thiết kế là sử dụng những công cụ trực tuyến miễn phí. Đây là những công cụ hỗ trợ bạn tạo ra các favicon bằng những layout và biểu tượng có sẵn, việc bạn cần làm là ghép chúng lại với nhau.

1. Favicon.io

Công cụ tạo favicon website

Bên cạnh đổi file thiết kế của bạn sang đuôi .ico thì trang web Favicon.io còn hỗ trợ người dùng tạo favicon trực tuyến. Đây là tính năng mà các bạn có thể tận dụng. Tuy nhiên có lẽ bạn sẽ cần nhiều thời gian để làm quen với công cụ này nếu chưa bao giờ sử dụng qua.

2. Favicon.cc

Favicon.cc sở hữu nhiều tính năng hỗ trợ

Favicon.cc có nhiều tính năng hỗ trợ bạn hơn. Điểm đặc biệt ở công cụ này là nó có thể giúp bạn tạo ra favicon hoạt ảnh, tính năng trong suốt.

3. Genfavicon

Giao diện Genfavicon

Đây là công cụ thân thiện với người dùng bởi giao diện dễ nắm bắt. Tuy vậy thì trang web này cũng còn một số hạn chế. Genfavicon không hỗ trợ người dùng tạo ra favicon ngay từ đầu mà chỉ chỉnh sửa lại từ hình ảnh có sẵn.

4. Favic-O-Matic

Giao diện Favic-O-Matic

Favic-O-Matic là công cụ vô cùng tiện lợi và có nhiều tính năng tích hợp để bạn sử dụng. Bên cạnh giúp bạn tạo một favicon, công cụ này có thể kiểm tra xem favicon của bạn có đạt chuẩn chưa và cấp mã HTML cho các favicon mà bạn tạo.

5. Real Favicon Generator

Giao diện Real Favicon Generator

Tương tự như Favic-O-Matic, Real Favicon Generator có nhiều tính năng tích hợp. Ngoài ra, nó còn giúp bạn xem được demo của favicon mà mình tạo ra để bạn có thể chỉnh sửa tùy vào từng trình duyệt hay hệ điều hành.

Cách đưa favicon lên website

Sau khi đã tạo ra favicon, để đưa được lên website của mình bạn cần liên hệ với nhà cung cấp hosting để hiểu rõ hơn quy trình thực hiện. Mỗi nhà cung cấp trang web sẽ có sự khác nhau nên sẽ không thể đưa ra một quy trình chung cho việc này.

Tuy nhiên, bạn có thể nắm bắt một vài điểm như sau trong quá trình tải file favicon lên trang web. Đó là favicon sẽ được đặt ngang tên miền của website. Nếu bạn muốn thay đổi vị trí cần sự tư vấn của developer trong vấn đề này.

Việc này sẽ liên quan đến sự thay đổi của mã code trong header, vì vậy đòi hỏi bạn cần kiến thức về nó. Trong trường hợp bạn sử dụng nền tảng WordPress để làm website thì có thể tham khảo các bước sau đây trong việc thay đổi favicon.

Những cách tạo Favicon trong WordPress

WordPress hiện đang là nền tảng xây dựng website miễn phí được nhiều người Việt Nam sử dụng. Nền tảng này cho phép người dùng tự quản lý và xây dựng trang web riêng. Vì thế việc tạo một favicon trong WordPress cũng khá đơn giản và nếu bạn đang sử dụng nền tảng này, bạn cũng có thể thực hiện điều đó.

1. Tính năng thay đổi có sẵn của WordPress

Cách thứ nhất là bạn có thể thay đổi favicon bằng tính năng thay đổi của WordPress dành cho admin:

• Bước 1: Vào phần bảng điều khiển của Admin (Admin Dashboard).
• Bước 2: Chọn Appearance, sau đó click vào Customize.
• Bước 3: Chọn phần Site Identity.
• Bước 4: Dưới phần Site Icon, chọn Select Image.
• Bước 5: Upload file favicon từ máy tính.
• Bước 6: Xuất bản (publish).

Sau 6 bước trên bạn có thể vào giao diện trang web chính để xem thử.

2. Sử dụng Plugin để thêm Favicon cho WordPress

Plugin có thể hỗ trợ để thêm favicon vào Website WordPress cho bạn là Real Favicon Generator. Công cụ này đã được giới thiệu phía trên và nó có tính năng hỗ trợ kết nối với WordPress. Đây là những bước đơn giản để thực hiện bằng công cụ này:

• Bước 1: Truy cập Bảng điều khiển dành cho Admin.
• Bước 2: Chọn phần Plugin và click vào Add New.
• Bước 3: Tìm kiếm từ khóa “Favicon by Real Favicon Generator”.
• Bước 4: Sau đó cài đặt và kích hoạt plugin.
• Bước 5: Sau khi kích hoạt thành công chọn Appearance. Sau đó click vào Favicon.
• Bước 6: Upload file favicon. Đây là điểm thú vị của plugin này, bạn không cần chỉnh sửa hình ảnh nào trước đó. Plugin này sẽ hỗ trợ tạo ngay cho bạn một favicon và upload vào WordPress. Chỉ cần chọn file có kích thước chuẩn (260x260px).
• Bước 7: Khi upload hình ảnh, chọn Generate Favicon. Sau đó bạn sẽ được điều hướng sang trang web của Real Favicon Generator.
• Bước 8: Tại giao diện của website, hãy chọn Generate your Favicon and HTML code.

Sau khi kết thúc bước 8, bạn sẽ được điều hướng trở lại giao diện Bảng điều khiển của admin. Lúc này sẽ nhận được thông báo cài đặt thành công.

3. Thêm Favicon thủ công bằng cách tạo code

Một cách nữa để bạn tham khảo để đưa favicon lên WordPress, đó là tạo code. Cách này đòi hỏi bạn cần hiểu biết về code một ít.

• Bước 1: Truy cập vào website bằng FTP client hoặc file manager.
• Bước 2: Tìm thư file /wp-content/themes/your-theme.
• Bước 3: Đưa file favicon vào file theme.
• Bước 4: Lưu lại link dẫn.
• Bước 5: Tìm file function.php và thêm vào đoạn code như sau.

• Bước 6: Điền đường link của favicon vào sau href=”‘.get_template_directory_uri(). Lưu ý, bạn cần điền đúng tên file và đường link thì code mới hiệu quả. Ví dụ đuôi file là .ico thì đoạn code sẽ như sau.

Đó là toàn bộ thông tin cần biết về favicon website cũng như kinh nghiệm về cách xây dựng chúng. Favicon là một khái niệm quen thuộc trong xây dựng web. Tuy chỉ chiếm một phần nhỏ nhưng đem lại nhiều giá trị khác cho website.

Hiện nay khi các doanh nghiệp tiến hành xây dựng thương hiệu thì mọi yếu tố dù nhỏ nhất như favicon của website cũng cần được quan tâm. Tạo một favicon cho website rất nhanh và dễ dàng nhưng lại đem đến nhiều lợi ích về mặt thương hiệu, hình ảnh của doanh nghiệp.