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>

<link rel=”icon” href=”Đường_dẫn_của_hình” type=”image/x-icon” />
<link rel=”shortcut icon” href=”Đường_dẫn_của_hình” type=”image/x-icon” />

Xem hình sau :

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

– Lưu lại và upload lên server. Thế là xong.

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

10 Comments
  1. Thank Anh, hôm nay em mới biết làm hiển thị icon trên thanh address.

  2. Cái này khá phổ thông .. (thật ra em biết hồi mò Vbb)

  3. Gợi ý anh lâu rồi, giờ mới làm,
    Giờ nhà có biển số rồi

  4. ahx ơi dùng nó làm icon cho facebook,yahoo mail hay gmail của mình được không?nếu được thì làm theo các bước như trên hay có khác gì không?

  5. @Nguyen Hoang : thì ra là bạn gợi ý, hehe.
    @minhdong : bạn không thể làm được điều này bởi vì bạn phải sở hữu một trang web thì bạn mới có quyền chèn vào đó đoạn mã giúp hiển thị icon trên thanh trình duyệt.

  6. bạn vui lòng hướng dẫn kĩ hơn giùm mình được không, mình phải vô đâu và làm gì? mình đang giữ quyền admin của 1 website, bây giờ mình phải làm sao?Thanks bạn!

  7. Xin lỗi Anhhangxom cho em mạo mụi gửi thêm một số thông tin cũng như sửa lại cách của anh một chút nhé 😉

    1. Mình chỉ cần chép dòng lệnh này vào cặp thẻ thôi:

    còn code thứ 2 của anhhangxom ko đúng lắm vì HTML sẽ đọc không hiểu được rel=”icon” chay đâu 🙂 – nó sẽ đơn thuần bị loại và mình chỉ làm nặng hơn câu lệnh một cách thừa thải mà thôi.

    2. Chú ý khi dẫn link ảnh:
    Những gì quan trọng thì anhhangxom cũng đã nói. Nhưng em xin bổ sung thêm một ít thông tin với các host khó tính:

    Với ảnh nằm trong host của mình thì nên làm đường dẫn theo mẫu sau:
    <link rel="shortcut icon" href="./Folder_chứa_ảnh/File_Icon.ico” type=”image/x-icon”/>

    Với ảnh dùng từ các dịch vụ chia sẻ ảnh thì nên làm đường dẫn theo mẫu sau:
    <link rel="shortcut icon" href="http://Đường_dẫn_icon/File_Icon.ico” type=”image/x-icon”/>

    Anh update lại cho mọi người cùng đọc nhé 😉

  8. Mình làm y hướng dẫn mà nó cứ hiện cái favicon của joomla thôi Ad ơi

    • Hiện tại bạn chỉ cần thêm đoạn mã

      <link href=”http://link_hình.png” rel=”shortcut icon” / >

      vào phần head là xong. Để kiểm tra, bạn cần phải tắt chế độ cache của trang web, đồng thời sử dụng tính năng Private của trình duyệt để load trang. Ngoài ra bạn cũng cần phải lưu ý dấu nháy đơn ở phần href, hãy tự gõ lại dấu này, đừng copy-paste vì sẽ bị sai 🙂

Gửi phản hồi