Kích thước chuẩn và cách làm FavIcon icon

Khi bạn truy cập vào một website bất kì như google, facebook hay youtube thì bạn sẽ thấy một file icon logo nho nhỏ nằm trên trình duyệt, thông thường người ta hay để logo thu gọn của website lên đó để quảng cáo thương hiệu.

test php

banquyen png

Bài viết này được đăng tại

freetuts.net

, không được copy dưới mọi hình thức.

favicon icon 1 png

Để làm được như vậy thì ban phải có kiến thức về HTML và có một icon đúng với kích thước quy định.

Kích thước FavIcon – cách làm

Kích thước chuẩn của FavIcon trên website là 16x16 và đơn vị đo là pixel, bạn hoàn toàn có thể cho kích thước lớn hơn hoặc bé hơn nhưng điều đó sẽ phí phạm hoặc chất lượng hiển thị sẽ không đẹp. Vì vậy mình nghĩ các bạn nên sử dụng đúng chuẩn kích thước file favicon mà người ta đã quy định. Một số chuẩn kích thước khác là 32x32, 48x48.

Có rất nhiều cách tạo ra file Favicon, ban có thể sử dụng Photoshop, một số phần mềm làm ảnh khác, hay thậm chí bạn có thể tạo online bằng công cụ FavIcon. Trước tiên bạn hãy vào đường dẫn này nhé.

Bài viết này được đăng tại [free tuts .net]

favicon icon 2 png

Bạn hãy chọn file muốn làm FavIcon và nhấn Create Icon button. Sau khi website xử lý xong bạn hãy click vào nút Download FavIcon.

favicon icon 3 png

Vậy là bạn đã có một file FavIcon đúng kích thước rồi đấy. Nhưng chưa xong, bạn cần phải upload file đó lên website và đưa một đoạn mã HTML vào trang web thì mới hiển thị.

Mã HTML FavIcon

Bạn sử dụng công cụ mở file online trên hosting, hoặc nếu bạn sử dụng WordPress thì có thể sử dụng các plugin để mở file header.php lên rồi nhập đoạn mã sau nằm trong thẻ head.

<link rel="shortcut icon" type="image/x-icon" href="url_toi_file_icon" />

Bạn thay đường dẫn tới file mà bạn đã upoad lên là được.

Quá đơn giản phải không các bạn, hãy làm theo từng bước và mình tin là bạn sẽ làm thành công.