Favicon Là gì? Cách Tạo Favicon Cho Website Đơn Giản Nhất!

Favicon là gì? Tất tần tật về Favicon sẽ có trong bài viết này: kích thước, định dạng chuẩn, cách tạo favicon cho website đơn giảngiúp SEO TOP website dễ dàng.
Tác giả
Tất Thành
277 lượt xem
Font chữ aA aA tru cong
Nội dung chính[ẩn][hiện]
Tà cha hảo. Chào các bạn, lại là mình đây. Trước khi trả lời cho câu hỏi "Favicon là gì?", mình muốn cho các bạn xem hình ảnh dưới đây.

Chắc hẳn khi lướt facebook, youtube, hay bất kỳ 1 trang web nào, các bạn đều đã không ít lần nhìn thấy cái biểu tưởng khoanh tròn nhỏ nhỏ ở góc trái tab trình duyệt chứ? 

Favicon Là gì?

Đó chính là hình ảnh Favicon của trang web mà bạn đang xem đó. Đừng xem thường Favicon, nó "nhỏ mà có võ" à nghen. 

Nào, bây giờ mình sẽ giúp bạn khai thông xem Favicon là gì? tại sao các website phải có favicon? Nó đem lại lợi ích gì? Cách tạo favicon cho website ra sao? Lét gô!

Favicon là gì?

Favicon là viết tắt của cụm từ Favorite Icon, có thể hiểu như là shortcut icon, website icon, tab icon, URL icon, hay bookmark icon.

Favicon là một hình ảnh nhỏ hiển thị bên trái Tiêu đề của trang web trên tab trong trình duyệt, là biểu tượng riêng để phân biệt các website với nhau. Giống như logo dùng để phân biệt các thương hiệu với nhau, chữ ký cá nhân phân biệt con người với nhau.

Kích thước chuẩn của Favicon là gì?

  • Các kích thước chuẩn của Favicon trên website là: 16x16 pixel ( khuyến nghị dùng nhất); 32x32 hoặc 48x48, 64x64
  • Bạn cũng có thể sử dụng các kích thước Favicon lớn hơn hoặc bé hơn nhưng có thể làm phí dung lượng tải web hoặc hình ảnh hiển thị không đẹp.
  • Kích thước của file favicon.ico nên nhỏ hơn 100kb

Định dạng của Favicon là gì?

Định dạng phổ biến là .ico ngoài ra còn có png, gif., jpeg, svg.  Hầu hết các trình duyệt sẽ tự động xác định file favicon.ico trong thư mục gốc website và đặt nó làm icon của website

Trước đây Favicon không được chú trọng lắm nhưng bây giờ thì hầu như mọi thiết kế website đều phải có, không thể thiếu được.
 
Favicon Là gì? 4

Tầm quan trọng của Favicon với website?

Làm trang web hiển thị nổi bật trên tab trình duyệt.

Một trang web không có favicon trông thật tẻ nhạt và thiếu sức hút.

Favicon Là gì? 2
 
 
Khi website không có Favicon - trình duyệt sẽ hiển thị thành trang lỗi 404
 

Giúp người duyệt web dễ dàng phân biệt được các trang web khác nhau:

  • Khi mở nhiều tab trên trình duyệt, chỉ cần nhìn Favicon website là bạn có thể nhận ra tab nào là của web nào không cần đọc tiêu đề trang web. 
  • Tiết kiệm diện tích trình duyệt, người dùng có thể mở một lúc hàng chục tab mà vẫn phân biệt được các trang web trong từng tab
  • Hoặc khi đánh dấu (bookmarks) các web lại, nhờ có favicon bạn cũng dễ dàng nhận ra các trang web trong danh sách bookmark. 
Favicon Là gì? 3
 

Favicon hỗ trợ cho việc SEO web, xây dựng nhận diện thương hiệu.

Rõ ràng, hình ảnh luôn thu hút và dễ dàng ghi nhớ hơn vào bộ não con người. Do đó, Favicon đóng vai trò như một đại sứ thương hiệu, luôn luôn xuất hiện một cách tự nhiên khi người dùng truy cập website của bạn. Từ đó, hình ảnh thương hiệu của bạn được khéo léo khắc sâu vào tiềm thức của họ. 

Update mới nhất: Ngày 23/09/2019, trang kết quả tìm kiếm của Google đã cập nhật lại cách hiển thị các trang web. Theo đó, Favicon và URL hiển thị trước Title và description của bài viết. (Như hình bên dưới)

Hình ảnh Favicon đẹp giúp trang web của bạn nổi bật trên kết quả tìm kiếm

Đặc biệt, các máy tìm kiếm cũng dựa vào file favicon.ico để xếp hạng các trang web. Vì vậy, bạn không thể không tạo Favicon cho website một cách ấn tượng, đúng chuẩn và tương thích với các trình duyệt trên cả máy tính và các thiết bị di động được.

Hướng dẫn tạo Favicon cho Website

Vậy làm thế nào để tạo ra một Favicon ưng ý cho website của bạn.

B1: Thiết kế 1 file ảnh đúng kích thước chuẩn của Favicon

Thông thường sẽ chính là file logo thương hiệu của web. Để Favicon khi hiển thị trên trình duyệt đẹp nhất, các bạn phải chú ý kích thước file theo đúng chuẩn nêu trên

B2: Chuyển file hình ảnh sang định dạng .ico. 

Để chuyển định dạng, bạn có thể dùng:

Các chương trình chỉnh sửa hình ảnh nào như Photoshop, Gimp…
  • Đối với các bạn sử dụng photoshop để tạo favicon các bạn cần phải có phần mở rộng cho file .ico
  • Bạn cần phải download file tại địa chỉ sau: http://www.telegraphics.com.au/sw/files/ICOFormat-1.6f9-win.zip
  • Sau đó các bạn copy file vào thư mục cài đặt photoshop: (C:\Program Files\Adobe\Photoshop \Plug-Ins\File Formats)
Tool online: có khá nhiều các trang chuyển định dạng hình ảnh sang file .ico miễn phí như Các trang này khá dễ sử dụng, các bạn chỉ cần làm theo các bước hướng dân, upload file hình ảnh logo lên và dowload file dạng .ico về máy

B3: Up file Favicon.ico lên host website

B4: Nhúng đoạn mã HTML để thiết lập Favicon 

Chèn mã sau vào phần <head>  ... </head> của website
  • <link type=”image/x-icon” href=’Đường dẫn tới file .ico’ rel=”shortcut icon”/>
 
Favicon Là gì? 5
Kết luận:

Trên đây, mình đã cùng các bạn tìm hiểu kỹ về khái niệm "Favicon là gì?" . Hy vọng là đọc xong bài viết này, các bạn đã thực hàng được luôn các bước tạo Favicon cho website của mình. Nếu gặp bất kỳ vấn đề gì về favicon, cứ chat với mình hoặc để lại comment bên dưới. Mình sẵn sàng ở đây hỗ trợ các bạn nha.
Chúc bạn thành công!
 
Bạn muốn có một website đẹp hơn, chuyên nghiệp và hiệu quả hơn?
Liên hệ để được tư vấn
qc blog 1
qc blog 2
qc blog 3
Ý kiến bạn đọc (0)
Gửi bình luận
Chúng tôi rất hy vọng nhận được phản hồi của bạn về bài viết này :)
Bài viết cùng chuyên mục
Ngày đăng: 21/02/2019 23.520 lượt xem
Ngày đăng: 06/10/2018 16.695 lượt xem
Ngày đăng: 06/02/2018 15.452 lượt xem
Ngày đăng: 21/02/2019 14.084 lượt xem
Ngày đăng: 06/02/2018 11.158 lượt xem
Ngày đăng: 06/02/2018 8.572 lượt xem
Ngày đăng: 21/02/2019 6.525 lượt xem
Ngày đăng: 06/02/2018 5.874 lượt xem
Ngày đăng: 06/02/2018 4.315 lượt xem
Ngày đăng: 06/02/2018 4.200 lượt xem
Ngày đăng: 21/02/2019 3.339 lượt xem
Ngày đăng: 06/02/2018 3.058 lượt xem
Ngày đăng: 06/02/2018 2.999 lượt xem
Ngày đăng: 10/11/2018 2.802 lượt xem
Ngày đăng: 06/02/2018 2.688 lượt xem
Ngày đăng: 06/02/2018 2.681 lượt xem
Ngày đăng: 14/02/2019 2.428 lượt xem
Ngày đăng: 06/08/2015 1.060 lượt xem
Ngày đăng: 06/02/2018 889 lượt xem
Ngày đăng: 06/02/2018 662 lượt xem
Ngày đăng: 06/02/2018 487 lượt xem

Các dịch vụ nổi bật của Tất Thành

Chúng tôi đã làm việc cùng nhau, cùng phấn đấu để Tất Thành ngày càng phát triển hơn với chất lượng sản phẩm cao cấp, dịch vụ hoàn hảo hơn, môi trường làm việc tuyệt vời hơn… để phục vụ khách hàng tốt hơn… để mỗi người đều có một tương lai tươi sáng hơn, hạnh phúc hơn, viên mãn hơn…

Thiết kế website bán hàng online

Có một website bán hàng chuyên nghiệp sẽ giúp bạn kinh doanh hiệu quả hơn, nhàn hơn và kiếm được nhiều tiền $$$ hơn.

Dịch vụ SEO tổng thể

Có 50 triệu người Việt Nam sử dụng Google để tìm kiếm thông tin, sản phẩm, dịch vụ. Nếu website của bạn

Thiết kế bộ nhận diện thương hiệu

Doanh nghiệp thành công, phát triển là doanh nghiệp có được những logo nhận diện, profile giới thiệu, catalog sản phẩm

Thiết kế website đào tạo trực tuyến

Giúp giảm thiểu chi phí đào tạo, không phân biệt khoảng cách địa lý, tăng hiệu quả kinh doanh, tiết kiệm chi phí.
Gọi ngay cho chúng tôi để được tư vấn free Gọi ngay cho chúng tôi để được tư vấn free (1)
"NGAY BÂY GIỜ, khách hàng đang trên đường đến với ĐỐI THỦ của bạn. Nếu bạn không có website chuyên nghiệp, không SEO website trên Google và không có một bộ nhận diện thương hiệu chuyên nghiệp, KHÁCH HÀNG sẽ thuộc về đối thủ của bạn!
Đội ngũ tư vấn chuyên nghiệp của Tất Thành sẽ giúp bạn có được nhiều KHÁCH HÀNG hơn, nhiều TIỀN $$$ hơn một cách thường xuyên và liên tục!
Hà Mạnh Linh
Hà Mạnh Linh
Trưởng phòng tư vấn
0988.184.022 lienhe@tatthanh.com.vn
Võ Thị Huyền
Võ Thị Huyền
Trưởng phòng thiết kế
0981.552.379 lienhe@tatthanh.com.vn
Nguyễn Thị Hiền
Nguyễn Thị Hiền
Trưởng phòng SEO website
0942.416.933 lienhe@tatthanh.com.vn
Trần Minh Thắng
Trần Minh Thắng
Chuyên gia tư vấn
0988.56.59.56 lienhe@tatthanh.com.vn
Hoặc bạn có thể gửi yêu cầu tư vấn cho chúng tôi tại đây hoặc chat online qua facebook tại đây! Trân trọng!