Trong bài viết này, chúng ta sẽ nói về cách khắc phục sự cố favicon của blogger bị mờ. Blogger hỗ trợ favicon tối đa 100px * 100px nhưng sau khi thêm favicon, nó sẽ bị chuyển đổi thành 10px * 10px.
Nếu bạn nhìn favicon của mình bằng cách phóng to hơn, bạn sẽ thấy biểu tượng đó bị mờ. Lỗi này được hiển thị bởi favicon có độ phân giải thấp nhưng không có bất kỳ cách nào để khắc phục lỗi này. Tuy nhiên, Viqazo sẽ chỉ cách mà bạn có thể cài đặt bất kỳ favicon có độ phân giải cao (Pixel tối đa của favicon là 100px) nào trên blogger.
Tại Sao Cần Favicon Độ Phân Giải Cao?
Favicon là biểu tượng cho trang web của bạn, nếu bạn sử dụng trình duyệt Firefox và Opera thì bạn sẽ thấy khi thêm trang web vào bookmark, favicon trông lớn ở trang nhất và favicon trông không được đẹp khi ở độ phân giải thấp.
Blogger cho phép tải lên favicon chất lượng cao (bị lỗi mờ) nhưng chúng ta có thể sử dụng favicon độ phân giải cao (không bị lỗi) bằng một mẹo nhỏ.
Cách Thêm Favicon Chất Lượng Cao Trên Blogger.
Đầu tiên, tải favicon của bạn lên trình chỉnh sửa bài đăng.
Copy đường link favicon trong Chế độ xem HTML để sử dụng cho các bước bên dưới.
Cách 1
Để làm cho favicon trên web có chất lượng cao, hãy làm theo tất cả các bước trong phần này. Trong chủ đề blogger, có hai loại code dùng để hiển thị favicon trên cửa sổ trình duyệt cũng như những chỗ khác.
Code 1:
<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>
Code 2:
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
Một số nhà phát triển sử dụng code đầu tiên và một số nhà phát triển sử dụng mã thứ hai. Cả hai code đều hoạt động như nhau. Code đầu tiên được tạo bởi thẻ điều kiện blogger và code thứ hai được tạo bởi thư mục URL.
Code 1.
Đầu tiên, hãy tìm kiếm
đoạn code phía trên, nếu bạn thấy nó xuất hiện hãy làm theo các bước dưới đây.
Xóa đoạn code khỏi chủ đề.
<link href='img_url_here' rel='icon' type='image/x-icon'/>
Bây giờ, hãy dán đường link favicon đã copy khi nãy vào img_url_here ở đoạn code trên, sau đó chỉ cần thêm đoạn code trước thẻ <head>.
bYMRImJSobTMA8KigsFvhPz-zigoP3XcDtsAL4kKILZNt7SW2L7rRgm3LZSJle-t6/s1600/4.png" />
Bây giờ hãy lưu chủ đề của bạn và tận hưởng nó.
Code 2.
Nếu bạn tìm ra đoạn code thứ hai trong chủ đề blogger thì có một số bước đơn giản cho bạn, hãy làm theo các bước dưới đây để thêm favicon chất lượng cao trên blogger.
Tải favicon trình chỉnh sửa bài đăng trước rồi sao chép URl. (Giống cách làm ở Code 1)
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
Sau đó, chỉ cần thay thế /favicon.ico ở đoạn code trên bằng URL bạn vừa sao chép.
Bây giờ hãy lưu chủ đề của bạn và tận hưởng nó.
Cách 2
Thêm đoạn code bên dưới vào sau thẻ <head>.
<!--[ Favicon ]-->
<b:comment><!--[ Add your Favicon Image URL between: (" and ") ]--></b:comment>
<b:with value='("")' var='icon'>
<b:if cond='data:icon'>
<meta expr:content='resizeImage(data:icon, 144, "1:1")' name='msapplication-TileImage'/>
<link expr:href='resizeImage(data:icon, 57, "1:1")' rel='apple-touch-icon' sizes='57x57'/>
<link expr:href='resizeImage(data:icon, 60, "1:1")' rel='apple-touch-icon' sizes='60x60'/>
<link expr:href='resizeImage(data:icon, 72, "1:1")' rel='apple-touch-icon' sizes='72x72'/>
<link expr:href='resizeImage(data:icon, 76, "1:1")' rel='apple-touch-icon' sizes='76x76'/>
<link expr:href='resizeImage(data:icon, 114, "1:1")' rel='apple-touch-icon' sizes='114x114'/>
<link expr:href='resizeImage(data:icon, 120, "1:1")' rel='apple-touch-icon' sizes='120x120'/>
<link expr:href='resizeImage(data:icon, 144, "1:1")' rel='apple-touch-icon' sizes='144x144'/>
<link expr:href='resizeImage(data:icon, 152, "1:1")' rel='apple-touch-icon' sizes='152x152'/>
<link expr:href='resizeImage(data:icon, 180, "1:1")' rel='apple-touch-icon' sizes='180x180'/>
<link expr:href='resizeImage(data:icon, 16, "1:1")' rel='icon' sizes='16x16' type='image/png'/>
<link expr:href='resizeImage(data:icon, 32, "1:1")' rel='icon' sizes='32x32' type='image/png'/>
<link expr:href='resizeImage(data:icon, 96, "1:1")' rel='icon' sizes='96x96' type='image/png'/>
<link expr:href='resizeImage(data:icon, 192, "1:1")' rel='icon' sizes='192x192' type='image/png'/>
<b:else/>
<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'/>
</b:if>
</b:with>
Dán đường link favicon đã copy khi nãy vào giữa (" and ").
Ví dụ:
<!--[ Favicon ]-->
<b:comment><!--[ Add your Favicon Image URL between: (" and ") ]--></b:comment>
<b:with value='("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoqBq4nD-0LUg7eQgp6sZmMiK6BIIH3u7eX89BIz_55hs0GnpILa2H1V8NaDSM8D-ptk3tnBb9dbTWFBFJo4jZyqPfrYHx_nHoA3hbHQKZ4gsHVh771MbCpubWraA8Zbq7lwVccWibipyR6PqF0laGlP68bdKAtwRDWDMANlcGcbMGYopNNQuN2K5w508/s320/favicon.png")' var='icon'>
<b:if cond='data:icon'>
<meta expr:content='resizeImage(data:icon, 144, "1:1")' name='msapplication-TileImage'/>
<link expr:href='resizeImage(data:icon, 57, "1:1")' rel='apple-touch-icon' sizes='57x57'/>
<link expr:href='resizeImage(data:icon, 60, "1:1")' rel='apple-touch-icon' sizes='60x60'/>
<link expr:href='resizeImage(data:icon, 72, "1:1")' rel='apple-touch-icon' sizes='72x72'/>
<link expr:href='resizeImage(data:icon, 76, "1:1")' rel='apple-touch-icon' sizes='76x76'/>
<link expr:href='resizeImage(data:icon, 114, "1:1")' rel='apple-touch-icon' sizes='114x114'/>
<link expr:href='resizeImage(data:icon, 120, "1:1")' rel='apple-touch-icon' sizes='120x120'/>
<link expr:href='resizeImage(data:icon, 144, "1:1")' rel='apple-touch-icon' sizes='144x144'/>
<link expr:href='resizeImage(data:icon, 152, "1:1")' rel='apple-touch-icon' sizes='152x152'/>
<link expr:href='resizeImage(data:icon, 180, "1:1")' rel='apple-touch-icon' sizes='180x180'/>
<link expr:href='resizeImage(data:icon, 16, "1:1")' rel='icon' sizes='16x16' type='image/png'/>
<link expr:href='resizeImage(data:icon, 32, "1:1")' rel='icon' sizes='32x32' type='image/png'/>
<link expr:href='resizeImage(data:icon, 96, "1:1")' rel='icon' sizes='96x96' type='image/png'/>
<link expr:href='resizeImage(data:icon, 192, "1:1")' rel='icon' sizes='192x192' type='image/png'/>
<b:else/>
<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'/>
</b:if>
</b:with>
