[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 ggpht và h120 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdQsOYSW-vGuiRm6D_KWiDyfTQzVjtzAN-iAWNwohoWCrxsXYJZXf7qtH-0njOOV0A5_8CsQ1ldgIpuE4NjoUyhVxJu6KWrEUBLkT6nK9eTRrFnCWov8rWHp_oyf28AvfiCuByMZVy-tU/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdQsOYSW-vGuiRm6D_KWiDyfTQzVjtzAN-iAWNwohoWCrxsXYJZXf7qtH-0njOOV0A5_8CsQ1ldgIpuE4NjoUyhVxJu6KWrEUBLkT6nK9eTRrFnCWov8rWHp_oyf28AvfiCuByMZVy-tU/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdQsOYSW-vGuiRm6D_KWiDyfTQzVjtzAN-iAWNwohoWCrxsXYJZXf7qtH-0njOOV0A5_8CsQ1ldgIpuE4NjoUyhVxJu6KWrEUBLkT6nK9eTRrFnCWov8rWHp_oyf28AvfiCuByMZVy-tU/w70-h70-p-k-no-nu/favicon.png"/>
            <square150x150logo src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdQsOYSW-vGuiRm6D_KWiDyfTQzVjtzAN-iAWNwohoWCrxsXYJZXf7qtH-0njOOV0A5_8CsQ1ldgIpuE4NjoUyhVxJu6KWrEUBLkT6nK9eTRrFnCWov8rWHp_oyf28AvfiCuByMZVy-tU/w150-h150-p-k-no-nu/favicon.png"/>
            <square310x310logo src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdQsOYSW-vGuiRm6D_KWiDyfTQzVjtzAN-iAWNwohoWCrxsXYJZXf7qtH-0njOOV0A5_8CsQ1ldgIpuE4NjoUyhVxJu6KWrEUBLkT6nK9eTRrFnCWov8rWHp_oyf28AvfiCuByMZVy-tU/w310-h310-p-k-no-nu/favicon.png"/>
            <wide310x150logo src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdQsOYSW-vGuiRm6D_KWiDyfTQzVjtzAN-iAWNwohoWCrxsXYJZXf7qtH-0njOOV0A5_8CsQ1ldgIpuE4NjoUyhVxJu6KWrEUBLkT6nK9eTRrFnCWov8rWHp_oyf28AvfiCuByMZVy-tU/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdQsOYSW-vGuiRm6D_KWiDyfTQzVjtzAN-iAWNwohoWCrxsXYJZXf7qtH-0njOOV0A5_8CsQ1ldgIpuE4NjoUyhVxJu6KWrEUBLkT6nK9eTRrFnCWov8rWHp_oyf28AvfiCuByMZVy-tU/w192-h192-p-k-no-nu/favicon.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdQsOYSW-vGuiRm6D_KWiDyfTQzVjtzAN-iAWNwohoWCrxsXYJZXf7qtH-0njOOV0A5_8CsQ1ldgIpuE4NjoUyhVxJu6KWrEUBLkT6nK9eTRrFnCWov8rWHp_oyf28AvfiCuByMZVy-tU/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/ hoặc https://www.websiteplanet.com/webtools/favicon-generator/ 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 !