This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.
Author Image Thursday, 12 July 2018

[Blogger] Tạo bộ favicon hoàn chỉnh cho website


Favicon là hình đại diện của website được hiển thị ở trên cùng của tabbar trong các trình duyệt web. Khi người dùng truy cập vào website, biểu tượng này sẽ xuất hiện và trở thành hình ảnh đại diện cho website. Trong bài viết này tôi sẽ hướng dẫn bạn cách cài đặt bộ favicon đầy đủ cho website/blog

Nhìn chung theo khảo sát sơ bộ, phần lớn blogger đều làm rất tốt phần hiển thị favicon trên trình duyệt web, tuy nhiên phần hiển thị trên Android, IOS, Windows,... thì rất ít người làm thậm chí là chưa từng nghĩ tới nó và đó là một thiếu xót rất lớn cho 1 webmaster chuyên nghiệp.

Lấy ví dụ với trang của tôi khi bạn thêm shortcut trên thiết bị di động

- Android



- Táo cắn dở


Đương nhiên là nó không phải tự nhiên mà có, bạn phải cài đặt nó bằng code

Trước tiên bạn cần tạo cho mình 1 ảnh hình vuông tên favicon, định dạng .png kích thước tối thiểu 512 x 512. Cái này có thể dùng Photoshop hoặc bất kì phần mềm làm logo nào tùy bạn

1. Favicon cho web


Bạn truy cập một trang convert png to ico bất kì trên mạng (ví dụ https://www.icoconverter.com/) upload file favicon đã tạo lên, do blogger chỉ support ico có kích thước 16x16 nên bạn chỉ cần chọn kích thước đó là đủ.

Tải file ico về và tải nó lên blog


Bây giờ bạn upload file .png lên host của google để có thể chỉnh sửa kích thước ảnh dễ dàng


Lấy link ảnh

Liên kết ảnh thu được bạn có thể đổi googleusercontent thành ggphth120 thành h0 để link ngắn hơn

Truy cập vào trang chỉnh sửa mã HTML và chèn code sau vào sau thẻ <head...>

<!-- For Web -->
<!-- Remove this line if exist <b:include data='blog' name='all-head-content'/> --> <link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>
<b:with value='"https://lh3.ggpht.com/-Qf6b_K-8aTQ/W0bTniwhLTI/AAAAAAAABF8/EThloABBThkdZrZedPorl5BPrwtXwEHAACLcBGAs/h0/favicon.png"' var='faviUri'>
  <b:loop values='[16,32,48,96,192]' var='faviSize'>
    <link expr:href='resizeImage(data:faviUri, data:faviSize, "1:1")' expr:sizes='data:faviSize + "x" + data:faviSize' rel='icon' type='image/png'/>
  </b:loop>
</b:with>

Bạn thay link ảnh tương ứng (tuyệt đối không dùng ảnh từ các hosting khác, vì chúng không thể resize như ảnh khi upload lên server của google !)

2. Cho IOS


Dán tiếp code sau vào

<!-- For IOS -->
<b:with value='"https://lh3.ggpht.com/-Qf6b_K-8aTQ/W0bTniwhLTI/AAAAAAAABF8/EThloABBThkdZrZedPorl5BPrwtXwEHAACLcBGAs/h0/favicon.png"' var='faviUri'>
  <b:loop values='[57,60,72,76,114,120,144,152,180]' var='faviSize'>
    <link expr:href='resizeImage(data:faviUri, data:faviSize, "1:1")' expr:sizes='data:faviSize + "x" + data:faviSize' rel='apple-touch-icon'/>
  </b:loop>
</b:with>

Tiếp tục thay link ảnh tương ứng (lưu ý nếu background của favicon bạn để transparent táo cắn dở sẽ fill thành màu đen nếu icon mà đen nữa thì ra toàn đen, vì vậy bạn với phần này bạn nên làm một favicon riêng với màu nền và màu icon hòa hợp với nhau)

3. MS Application


Tạo cho thằng này hơi phức tạp vì nó yêu cầu bạn phải có file browserconfig.xml đặt trong thư mục root của website, dở cái là blogger không có hosting như wordpress nên ta sẽ sử dụng hosting bên thứ 3, ở đây tôi sẽ sử dụng github

Bạn mở notepad ra và dán nội dung sau

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="https://lh3.ggpht.com/-Qf6b_K-8aTQ/W0bTniwhLTI/AAAAAAAABF8/EThloABBThkdZrZedPorl5BPrwtXwEHAACLcBGAs/w70-h70-p-k-no-nu/favicon.png"/>
            <square150x150logo src="https://lh3.ggpht.com/-Qf6b_K-8aTQ/W0bTniwhLTI/AAAAAAAABF8/EThloABBThkdZrZedPorl5BPrwtXwEHAACLcBGAs/w150-h150-p-k-no-nu/favicon.png"/>
            <square310x310logo src="https://lh3.ggpht.com/-Qf6b_K-8aTQ/W0bTniwhLTI/AAAAAAAABF8/EThloABBThkdZrZedPorl5BPrwtXwEHAACLcBGAs/w310-h310-p-k-no-nu/favicon.png"/>
            <wide310x150logo src="https://lh3.ggpht.com/-Qf6b_K-8aTQ/W0bTniwhLTI/AAAAAAAABF8/EThloABBThkdZrZedPorl5BPrwtXwEHAACLcBGAs/w310-h150-p-k-no-nu/favicon.png"/>
            <TileColor>#fe6602</TileColor>
        </tile>
    </msapplication>
</browserconfig>

Lần lượt thay link ảnh, kích thước ảnh trong link ảnh, mã màu và lưu lại với tên browserconfig.xml định dạng Encode UTF-8

Upload file lên hosting và lấy link ! Tiếp tục chèn code sau nối tiếp phần IOS

<!-- For MS Application -->
<meta expr:content='data:view.title.escaped' name='application-name'/>
<meta content='link_toi_file/browserconfig.xml' name='msapplication-config'/>

4. Chrome Android


Một số phiên bản chrome android cũ nó dùng luôn thẻ khai báo của ios, một số mới thì không, bạn cần tạo 1 file json có tên site.webmanifest để khai báo các thành phần cần thiết

Tiếp tục mở notepad và dán nội dung sau

{
    "name": "Hung1001 Feed",
    "short_name": "Hung1001 Feed",
    "icons": [
        {
            "src": "https://lh3.ggpht.com/-Qf6b_K-8aTQ/W0bTniwhLTI/AAAAAAAABF8/EThloABBThkdZrZedPorl5BPrwtXwEHAACLcBGAs/w192-h192-p-k-no-nu/favicon.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "https://lh3.ggpht.com/-Qf6b_K-8aTQ/W0bTniwhLTI/AAAAAAAABF8/EThloABBThkdZrZedPorl5BPrwtXwEHAACLcBGAs/w512-h512-p-k-no-nu/favicon.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

Thay tên, link ảnh, kích thước ảnh trong link ảnh, mã màu,... thành của bạn. Lưu file với tên site.webmanifest và Encode UTF-8 và cũng upload lên hosting của mình

Dán tiếp code nối tiếp phần 3

<!-- For Chrome Android -->
<link href='link_toi_file/site.webmanifest' rel='manifest'/>

Cuối cùng bạn lưu mẫu lại để kiểm tra kết quả.

Mã nguồn khi render


* Quan trọng 1: Để cập nhật favicon trên web, bạn cần xóa sạch cache đi

* Quan trọng 2: Tôi mất gần 1 ngày để tìm ra cái lỗi khỉ khô này khi đã tích hợp đúng mà nó vẫn không hiển thị trên ios và android đó là nếu blog bạn có đoạn này

<include expiration='7d' path='*.css'/>
<include expiration='7d' path='*.js'/>
<include expiration='3d' path='*.gif'/>
<include expiration='3d' path='*.jpeg'/>
<include expiration='3d' path='*.jpg'/>
<include expiration='3d' path='*.png'/>

thì hãy xóa nó đi

+ Cách hiển thị icon trên chrome android




+ Thêm shortcut trên safari ios




Bạn có thể so sánh lúc trước và sau khi tích hợp để thấy sự khác biệt

Ngoài ra tôi giới thiệu cho bạn trang https://realfavicongenerator.net/ dùng để check favicon cũng như giúp bạn tạo bộ favicon như tôi trình bày ở trên, có thời gian bạn tự tìm hiểu thêm nhé

Chúc thành công !
Comments:
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

  • Please wait while i am loading Facebook SDK js