Xin chào các bạn ! Trong bài viết này mình xin Hướng dẫn cách thay Favicon cho Blogger. Các bạn hãy theo dõi và làm theo nhé!
Favicon là gì
Hiện nay hầu hết các trình duyệt sẽ tự động sử dụng favicon mặc định ở đường dẫn /favicon.ico nếu bạn không khai báo favicon cho trang web ở phần thẻ <head>. Blogger cũng có sử dụng favicon tại địa đường dẫn gốc của domain.
Lợi ích của Favicon
Cung cấp danh tính cho trang web của bạn.
Điều này sẽ giúp người dùng nhớ đến trang web của bạn
Người dùng có thể dễ dàng xác định trang web của bạn từ kết quả tìm kiếm.
Hướng dẫn thay Favicon cho Blogger
Trước đây, Google cho phép chúng ta thay đổi favicon trong phần Bố cục (Layout). Tuy nhiên, kể từ khi cập nhật lại giao diện trang admin, Blogger đã thay đổi mục này. Nội dung bên dưới sẽ hướng dẫn các bạn thay đổi favicon trong giao diện quản trị mới của Blogger.
Tạo favicon
Để tạo hoặc thiết kế Favicon, các bạn có thể sử dụng các trình chỉnh sửa ảnh chuyển nghiệp như Photoshop, sau đó xuất file ra định dạng .ico.
Một cách khác để nhanh tạo Favicon nhanh gọn, chúng ta có thể tìm kiếm các icon dưới dạng .svg tại https://www.iconfinder.com hoặc các nguồn trên Internet. Sau đó tiến hành chỉnh sửa lại.
Sau đó, bạn truy cập vào https://realfavicongenerator.net, upload file SVG lên để công cụ này tạo favicon.
Hướng dẫn thay favicon cho Blogger
Bên dưới là hướng dẫn cụ thể các bước thay favicon cho Blogger
Cài đặt
Sau khi đăng nhập vào trang quản trị Blogger, ở menu bên trái, các bạn di chuyển đến mục Cài đặt. Sau đó bên dưới nội dung Mã theo dõi Google Analytics, các bạn nhấn chọn Biểu tượng trang web
Upload Favicon
Trong trang popup nổi lên, các bạn chọn tệp và upload lên tệp favicon.ico đã chuẩn bị sẵn ở phần trên.
Lưu ý là dung lượng tệp không quá 100KB và kích thước là 32×32.
Lưu và kiểm tra
Cuối cùng, sau khi upload thành công các bạn nhấn Lưu để tắt popup và kiểm tra lại kết quả. Để kiểm tra kết quả, các bạn truy cập vào đường dẫn /favicon.ico.
Cách thay Favicon Vozshare khuyên bạn nên dùng
Bước 1. Đăng nhập vào Blogger -> Chỉnh sửa HTML
Bước 2. Dán đoạn code bên dưới vào thẻ head
<!--[ Favicon ]--> <link expr:href='data:blog.blogspotFaviconUrl' rel='apple-touch-icon' sizes='120x120'/> <link expr:href='data:blog.blogspotFaviconUrl' rel='apple-touch-icon' sizes='152x152'/> <link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/> <link expr:href='data:blog.blogspotFaviconUrl' rel='shortcut icon' type='image/x-icon'/>{codeBox}
Bước 3. Ấn lưu và chờ giây lát favicon được cập nhật
Lời kết
Cảm ơn bạn đã đọc, Hy vọng bài viết này hữu ích với các bạn. Nếu bạn thích bài viết này hãy chia sẻ nó cho tất cả mọi người. Còn bạn chưa thực hiện được, hãy để lại bình luận để được giúp được. Chúc các bạn thành công.