Có lẽ bạn đã nghe thoáng ở đâu đó từ “Favicon”? Bạn thắc mắc không biết Favicon là gì? Nó có cần thiết cho website không? Nếu bị lỗi Favicon thì cách khắc phục nó như thế nào. Cùng Én Web tìm hiểu ngay sau đây nhé!
Tìm hiểu Favicon là gì?
Đối với mỗi thương hiệu, nhận diện là điều vô cùng quan trọng để khách hàng ghi nhớ sản phẩm của bạn. Webiste cũng như vậy, biểu tượng web là thứ không thể thiếu để giúp khách hàng nhận biết được webite của mình. Biểu tượng này được gọi là Favicon.
Hay nói một cách đơn giản về favicon là gì chúng ta có thể hiểu favicon là biểu tượng website, được hiển thị ở góc trái trên cùng của mộ tab khi truy cập. Do đó, favicon được xem như là logo đại diện của website.
Bây giờ các bạn đã hiểu favicon là gì rồi phải không? Khi thiết kế website đừng quên favicon nhé! Nó sẽ giúp người dùng nhận biết và phân biệt được website của bạn với đối thủ đấy!
Vì sao Favicon quan trọng với website?
Chỉ nắm bắt về khái niệm favicon là gì có lẽ vẫn làm bạn chưa hiểu hết được ý nghĩa của logo favicon với một webiste. Thật vậy, favicon mang lại cho website rất nhiều lợi ích như:
- Tính thẩm mỹ cao tạo sự nổi bật: Với sự có mặt của favicon sẽ làm cho website thu hút hơn rất nhiều cũng như tạo được ấn tượng với người dùng. Nếu không có nó mọi thứ sẽ trở nên buồn chán và kém hấp dẫn trong mắt ngườu dùng.
- Dễ dàng phân biệt: Favicon giúp người dùng dễ dàng phân biệt các tab với nhau mà không cần đọc tiêu đề. Lợi ích này được phát huy tối đa khi người sử dùng bật rất nhiều tab nhưng vẫn dễ dàng nhận biết được đâu là tab mình cần sử dụng. Đặc biệt, trong bookmarks, nó lại các giúp ngườu dùng nhận biết dễ dàng và nhanh chóng.
- Xây dựng, nhận diện thương hiệu: Nghe thì có vẻ hơi vô lý nhưng đúng như vậy. Bạn có biết việc cài đặt hiện thị favicon sẽ giúp website có kết quả thứ hạng cao hơn trên các công cụ tìm kiếm. Bởi vì các công cụ này một phần dựa vào file favicon.icon để đánh giá các xếp hạng. Nghe đến đây thì làm sao có thể phủ nhận được lợi ích của favicon rồi phải không?
Xem ngay: Slider là gì? Hướng dẫn chèn slider vào website chuẩn đẹp
Kích thước chuẩn và định dạng của favicon
Kích thước Favicon
Mỗi một hình ảnh trên website đều có một kích thước chuẩn riêng, favicon cũng không ngoại lệ. Việc xác định đúng kích thước của favicon sẽ giúp hình ảnh hiện thị đẹp và tiết kiệm dung lượng trang web.
Các kích thước chuẩn của favicon:
- 16x16pixel
- 32x32pixel
- 48x48pixel
- 64x64pixel
Định dạng favicon
Mỗi một trình duyệ sẽ có một yêu cầu khác nhau. Do đó để phát huy được hết tiềm năng của mình trên các công cụ tìm kiếm, favicon phải có những định dang khác nhau hay nhiều kích thước. Lưu ý dung lượng của hình ảnh phải nhỏ hơn 100kb và định dạng favicon.ico nhé!
Xem thêm: Hướng dẫn đăng ký tài khoản Apple Developer chi tiết
Hướng dẫn chèn favicon vào website wordpress
Bước 1: Chuẩn bị hình ảnh favicon dạng hình vuông
Bước 2: Chuyển định dạng hình ảnh sang đuôi .ico
- Truy cập vào đường link https://realfavicongenerator.net/
- Tải file ảnh chuẩn bị tại mục “Select your favicon image”
- Tạo file .ico bằng cách click vào “Generate your favicon anh html code”
- Tại file ảnh về tại mục “Favicon Package”
Xem thêm: Thiết kế website Đà Nẵng
Bước 3: Chèn Favicon vào webite
- Tải flie hình ảnh lên website
- Sao chép mã html
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="manifest" href="/site.webmanifest"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="theme-color" content="#ffffff"> - Dán mã html vừa sao chép vào mục head của website nằm trong file header.php thay thế đường link hình ảnh bằng đường link hình ảnh faicon vừa tải lên có định dạng .ico là đã hoàn thành rồi.
Với những chia sẻ của chúng tôi hy vọng, bạn sẽ hiểu được favicon là gì và cách khắc phục lỗi hiển thị favicon trên website của mình. Chúc các bạn thành công! Nếu có bất cứ thắc mắc gì liên hệ ngay với Enweb để được hỗ trợ.
