Khi lướt web bạn thường thấy một icon nhỏ trước địa chỉ website trên thanh address của trình duyệt hoặc trước tiêu đề của trang trên mỗi tab. Theo mặc định của Blogger.com, trước địa chỉ blog/web của bạn luôn có biểu tượng màu cam với hình chữ B màu trắng. Đó chính là favicon. Bài viết dưới đây sẽ giới thiệu với các bạn một vài nét cơ bản về favicon và bạn có thể nhanh chóng tạo một cái cho blog của mình.
Favicon là gì?
Favicon là viết tắt của cụm từ Favorites icon, Favicon là một icon hiển thị ở thanh địa chỉ của trang web trên các trình duyệt, thường nằm bên trái tiêu đề trang blog/web của bạn, favicon là một cách giúp người truy cập dễ dàng nhập biết trang web, nó cũng như một logo của trang web. Favicon cũng xuất hiện cả trên Bookmark khi bạn đưa Site đó vào Bookmark của trình duyệt. Favicon thường có kích cỡ 16×16, 32×32, 48×48, 64×64 và lớn nhất là 128×128.
Việc chọn một favicon tốt sẽ giúp blog của các bạn nhanh chóng được người dùng nhận ra trong hàng loạt các tabs của các trang khác. Đây cũng là một điểm nhấn cho thương hiệu của bạn. Hãy thiết kế favicon này sao cho nó có chứa hình ảnh logo trang web và có mối liên hệ với chủ đề chính trên Blog của bạn. Vậy làm thế nào chúng ta thay đổi nó bằng cái của chúng ta?
Cách tạo Icon để làm Favicon
Có rất nhiều cách để tạo ra 1 favicon, bạn có thể sử dụng các phần mềm chuyển đổi ảnh thành Icon hoặc dùng các phần mềm resize ảnh về đúng kích cỡ như tôi đã nói ở trên. Đặc biệt hơn, nếu bạn “thần tượng” một website nào đó thì có thể trực tiếp lấy favicon của website đó về làm favicon cho website của mình. Trước khi tiến hành tạo 1 icon làm Favicon thì bạn nên biết rằng Favicon có 2 loại là Favicon tĩnh và Favicon động. Favicon tĩnh thường được tạo với phần mở rộng là .ico còn Favicon động có phần mở rộng là Gif.
Nếu bạn muốn làm 1 favicon động thì vô cùng đơn giản, bạn chỉ việc thay đổi kích thước file GIF bạn định dùng làm Favicon về đúng với một trong các kích cỡ đã nói ở phía trên.
Để làm một Favicon tĩnh cũng đơn giản không kém. Cách nhanh nhất là nhờ tới dịch vụ chuyển đổi favicon trên mạng. Các trang web này cho phép bạn tạo favicon dưới định dạng *.ico. Một số trang web giúp tạo favicon miễn phí như:
- Favicon.cc
- Favicongenerator.com
- Genfavicon.com
- Myfaves.in
- Dynamicdrive.com
- Favicon-generator.org
- Favicon.co.uk
- Degraeve.com
Ở đây bạn chỉ cần Upload ảnh lên (Upload Image), bắt hình theo khung kích thước mà bạn chọn (Capture) và Create icon, cuối cùng là bấm vào Download Favicon.
Thay đổi favicon cho blog/web như thế nào?
Để thay đổi favicon cho blog rất đơn giản, bạn vào trang quản lý blog chọn Bố cục. Bạn sẽ thấy widget Favicon ở ngay phần bố cục.
 |
| Vào bố cục chọn widget Favicon |
 |
| Chọn tệp favicon đã tạo |
Sau đó chọn Lưu. Như vậy là các bạn đã hoàn tất việc thay đổi icon cho blog của mình.
Còn cách khác nữa để bạn thay đổi favicon cho blog đó là vào trực tiếp chỉnh sửa HTML trong phần Mẫu
Bạn copy đoạn code sau vào trong phần <head>....</head> , cụ thể mình đặt nó ngay sau ]]></b:skin> hoặc đặt con trỏ chuột ngay sau </title> và nhấn “Enter”, sau đó dán ( paste ) Link Favicon dưới đây vào ngay tại dòng hàng này rồi chọn “Save Template”.
<link href='favicon URL' rel='shortcut icon'/>
Thay favicon URL bằng đường link tới file favicon mà bạn đã upload, có thể sử dụng định dạng ICO, PNG, GIF.
Đoạn code trên mình sử dụng trong Blogspot và trình duyệt Chrome, Opera. Nếu bạn dùng các dịch vụ khác và không thấy favicon hiển thị thì có thể thử một trong những đoạn code sau.
<link href='Favicon URL' rel='icon' type='image/x-icon'/>Hoặc đối với ảnh PNG bạn sử dụng đoạn code sau
<link href='Favicon URL' rel='icon' type='image/png'/>Hoặc đối với ảnh GIF bạn sử dụng đoạn code sau:
<link href='Favicon URL' rel='icon' type='image/gif'/>
Sau khi lưu thay đổi, bạn vào trang blog/web để kiểm tra, nếu chưa thấy xuất hiện favicon bạn cần xóa lịch sử của trình duyệt hiện tại và khởi động lại trình duyệt.
- Đối với IE: vào Tools, Delete browsing History, (Shortcut: Ctr+Shift+Del),
- Đối với Firefox: Tools, Clear recent History, (Shortcut: Ctr+Shift+Del).
- Đối với Chrome: Setting (Biểu tượng cái cờ lê), Clear browsing data, (Shortcut: Ctr+Shift+Del).
Chúc các bạn thành công!
Tags:
thu-thuat-blogspot
