Thứ Bảy, ngày 03 tháng 9 năm 2011

Tạo FavIcon - Biểu tượng trước địa chỉ

Nếu bạn đang dùng trình duyệt Firefox, bạn có thể thấy được biểu tượng Favicon trước địa chỉ của tôi. Hãy xem hình 1.



Hình 1. Favicon của http://thuthuatchoblogger.blogspot.com



Theo mặt định của Blogger.com, trước địa chỉ blog của bạn luôn có biểu tượng màu cam hình bai trùm hình chữ B. Vậy làm thế nào chúng ta thay đổi nó bằng cái của chúng ta.

Trước hết bạn cần có một hình ảnh thông thường để convert sang hình ảnh với phần mở rộng là .ico. Bạn có thể dùng các chương trình đồ họa như Microsoft Paint (Stat->Programs->Accessories->Paint), Adobe Photoshop hay bất cứ chương trình nào khác để thiết kế cho mình một cái. Nếu không muốn thiết kế hãy dùng chức năng tìm ảnh của Google hay Yahoo để tìm một cái. Bây giờ hãy vào www.download.com đánh từ khóa Favicon để tìm một chương trình làm nhiệm vụ convert này.

Tuy nhiên tôi muốn giới thiệu với bạn trang http://www.htmlkit.com/services/favicon/ có thể giúp bạn mà bạn không cần cài đặt gì.

Đầu tiên, bạn mở trang đó lên, click nút Browse để tìm đến file hình ảnh lưu trên máy. Bấm nút Generate FavIcon.ico để thực hiện. Trang kết quả hiện ra như bên dưới.



Hình 2. Kết quả

Click vào Test in Browser để xem trước. Nếu bạn ứng ý thì click Download FavIcon đề download về máy.

Bạn sẽ nhận được file hình ảnh có phần mở rộng .ico.

Bây giờ thì làm sao để bạn tìm được nơi lưu trữ file này. Rất tiếc các công cụ chia sẻ ảnh không hỗ trợ hình ảnh có phần mở rộng như vậy.

Có một giải pháp là bạn dùng Google Page Creator. Đây là một trong những lý do mà tôi đã khuyên bạn đăng ký Google Account trước khi tạo blog. Hãy kích hoạt chức năng này của Google nếu nó yêu cầu. Sau đó bạn upload file ảnh lúc nãy lên đây. Xong, bạn click phải vào file đã upload tìm liên kết đến file FavIcon có dạng như: http://tentaikhoan.googlepages.com/ttcb_favicon.ico



Hình 2. Nơi upload favicon trên Google Page Creator

Bạn chép (nhớ sửa lại liênkếnđếnfileFavIcon)

<link rel="shortcut icon" href="liênkếnđếnfileFavIcon"/>

Rồi paste đoạn mã này vào giữa hai tag <head> .... </head> ở Edit HTML (Template->Edit HTML). Save lại để hoàn tất. Chúc bạn thành công!


http://www.thuthuatblog.com/2007/05/to-favicon-biu-tng-trc-ch.html

Không có nhận xét nào:

Đăng nhận xét