Cách thêm một Favicon vào trang web của bạn bằng HTML
Loạt bài hướng dẫn này sẽ hướng dẫn bạn cách tạo và tùy chỉnh thêm trang web này bằng HTML, ngôn ngữ đánh dấu tiêu chuẩn được sử dụng để hiển thị tài liệu trong trình duyệt web. Không cần trải nghiệm viết mã trước nhưng ta khuyên bạn nên bắt đầu từ đầu loạt bài nếu bạn muốn tạo lại trang web trình diễn.
Ở phần cuối của loạt bài này, bạn sẽ có một trang web sẵn sàng để triển khai lên cloud và làm quen cơ bản với HTML. Biết cách viết HTML sẽ cung cấp nền tảng vững chắc để học các kỹ năng phát triển web front-end bổ sung, chẳng hạn như CSS và JavaScript.
Trong hướng dẫn này, ta sẽ hướng dẫn các bước liên quan đến việc thêm biểu tượng yêu thích vào trang web bằng HTML. Bạn có thể sử dụng bất kỳ hình ảnh nào bạn thích cho biểu tượng yêu thích của bạn , nhưng hãy nhớ rằng những hình ảnh đơn giản, có độ tương phản cao thường hoạt động tốt nhất với kích thước nhỏ của biểu tượng yêu thích. Bạn cũng có thể tạo biểu tượng yêu thích tùy chỉnh thông qua các trang web như favicon.cc .
Biểu tượng yêu thích là một hình ảnh nhỏ nằm trong tab trình duyệt ở bên trái tiêu đề của trang web. Hình ảnh dưới đây minh họa vị trí của biểu tượng yêu thích.
Để thêm biểu tượng yêu thích vào trang web , hãy tạo một folder trong folder dự án của bạn có tên là images (nếu bạn chưa có) và lưu hình ảnh biểu tượng yêu thích của bạn trong folder này. Nếu bạn không có hình ảnh, bạn download hình ảnh Sammy the Shark này mà ta đã lưu trữ trên trang web trình diễn của ta . (Để biết thêm thông tin về cách thêm hình ảnh vào trang web bằng HTML, vui lòng truy cập hướng dẫn Hình ảnh HTML của ta ở phần trước trong loạt bài hướng dẫn này.
Tiếp theo, thêm phần tử <link> (được đánh dấu bên dưới) vào index.html của bạn ngay bên dưới phần tử <title> . Mã của bạn bây giờ sẽ như thế này:
... <title> Sammy’s First Website </title> <link rel="shortcut icon" type="image/jpg" href=”Favicon_Image_Location”/> ... Đảm bảo thay thế Favicon_Image_Location bằng đường dẫn file tương đối của hình ảnh yêu thích của bạn. Lưu index.html và reload trong trình duyệt web . Tab trình duyệt của bạn bây giờ sẽ chứa một hình ảnh biểu tượng yêu thích.
Đến đây bạn sẽ biết cách thêm hình ảnh favicon vào các trang web sử dụng HTML.
Các tin liên quan
Tạo phần trên cùng của trang chủ của bạn bằng HTML2020-08-26
Cách sử dụng các thuộc tính HTML
2020-08-26
Cách thêm siêu liên kết trong HTML
2020-08-26
Cách sửa đổi màu của các phần tử HTML
2020-08-26
Cách lồng các phần tử HTML
2020-08-26
Cách sử dụng các phần tử cấp nội tuyến và cấp khối trong HTML
2020-08-26
Cách sử dụng các phần tử cấp nội tuyến và cấp khối trong HTML
2020-08-26
Cách viết HTML nhanh chóng bằng Emmet
2019-07-02
Sử dụng vue-template-loader với Vue.js để biên dịch các mẫu HTML
2018-01-18
Nhận và thiết lập thẻ meta HTML trong Angular
2017-11-27
