Tạo và hiển thị icon cho blog trên thanh address của trình duyệt

Hồi trước, có một dạo tôi chợt nhận ra : Tại sao một số trang web nó lại có cái biểu tượng trên thanh address nhỉ ? Ý tôi là cái biểu tượng được đánh dấu như hình minh họa bên dưới.
Tôi nhớ có một hàng xóm nào đó đã comment và nói rằng tại sao anhhangxomonline.net không làm một cái cho vui. Ừ thì hôm nay tôi làm thử, mà cũng chả phải do siêng năng gì, do vô tình tôi truy cập vào trang favicon nên sẵn tiện quyết chí làm luôn xem sao. Và…hậu quả là bạn đã thấy rồi đó.
Tùy vào trình duyệt mà bạn sẽ thấy cái icon đó có “động đậy” được hay không. Tôi ví dụ như nếu bạn set một tấm hình dạng GIF làm icon thì chỉ có trên Firefox bạn mới thấy cái hình đó “động đậy”, còn với IE hoặc Chrome thì bạn chỉ thấy hình tĩnh mà thôi. Bạn có thể thử dùng Firefox và IE để truy cập anhhangxomonline.net mà xem.
Cách làm một icon như sau :

Bạn có thể sử dụng một tấm hình (*.jpg, gif, png) hoặc một icon (*.ico) nhưng tất cả phải có kích thước 16×16.
Nếu bạn muốn tự vẽ ra một icon thì có thể sử dụng dịch vụ Favicon để làm. Nó hỗ trợ bạn tạo ra hình động.
Còn trong trường hợp bạn đã có sẵn một tấm hình hoặc một icon và muốn nó làm icon cho blog thì bạn có thể sử dụng các dịch vụ trực tuyến sau :
– Image online editor : Dịch vụ này giúp bạn chỉnh sửa hình ảnh, crop hình và đặc biệt là nó có thể giúp bạn resize lại kích thước của hình động GIF. Tôi đã sử dụng nó để resize lại kích thước cái logo xuống còn 16×16 và set nó làm icon cho blog.
– Online image converter : Giúp bạn chuyển đổi hình ảnh sang các định dạng ico, png, gif, jpg, bmp, tiff. Đồng thời nó cũng hỗ trợ resize trong quá trình chuyển đổi.
Sau khi dùng mọi thủ đoạn để có tấm hình với kích thước chuẩn 16×16, bạn tiến hành chèn nó vào blog hoặc website như sau :
– Truy cập vào trang chủ của web hoặc blog. Nếu là blog WordPress thì bạn hãy mở tập tin “Header.php” trong thử mục theme. Mở nó lên bằng trình soạn thảo như Notepad chẳng hạn.
– Đặt đoạn code này ở phần Header của blog, ngay trước thẻ </head>