Sử dụng biểu tượng Font Awesome làm Favicon


109

Có thể sử dụng biểu tượng Font Awesome làm biểu tượng yêu thích không? Bạn biết không, biểu tượng nhỏ xuất hiện dọc theo tiêu đề trang web trong tab trình duyệt?

Câu trả lời:


38

Vâng, đúng vậy. Chỉ cần chụp ảnh màn hình của một thứ gì đó với ký tự mong muốn, cắt phần bạn muốn và lưu nó thành hình ảnh (.ico).

Nghiêm túc ngay bây giờ, bạn có thể muốn kiểm tra các định dạng được hỗ trợ bởi mỗi trình duyệt: http://en.wikipedia.org/wiki/Favicon#File_format_support

Nếu các ký tự của bạn là tệp hình ảnh hoặc tệp vectơ, bạn sẽ ổn với hầu hết các trình duyệt, trừ IE (vì MS ghét bạn) . Nếu không, trước tiên bạn sẽ phải lưu chúng dưới dạng hình ảnh.


3
Giấy phép có cho phép nó mặc dù không?
nghệ thuật solopov

3
@ art-solopov Có, nó có - bạn có thể xem nó tại trang cấp phép của họ: fortawesome.github.io/Font-Awesome/license
Renan

Tôi đã đọc qua OFL và tôi không tìm thấy bất kỳ điều gì liên quan đến việc thay đổi định dạng của phông chữ hoặc tạo hình ảnh từ glyphs. Xin lỗi nếu tôi thiếu bất cứ điều gì, bạn có thể vui lòng chỉ cho tôi phần cụ thể được không? Cảm ơn bạn.
nghệ thuật solopov

Đã phản đối vì đề xuất ảnh chụp màn hình. Có nhiều cách không mất tiền để đạt được điều này.
metaColin

2
@marcogmonteiro Nếu bạn truy cập fontawesome.com/download, bạn có thể tải xuống các biểu tượng dưới dạng tệp .svg. Hầu hết các trình duyệt sẽ chấp nhận nội dung .svg làm biểu tượng yêu thích. Nếu bạn cần hỗ trợ các phiên bản IE cũ, bạn có thể có được nội dung raster sạch đẹp (chẳng hạn như .png) bằng cách chuyển đổi .svg bằng Photoshop hoặc Illustrator.
metaColin

289

CHỈNH SỬA: Tôi khuyên bạn nên sử dụng http://gauger.io/fonticon


Tôi đã tạo một Trình tạo phông chữ trực tuyến Awesome Favicon Generator để làm điều đó!

Xem Font Awesome Favicon Generator .


7
Tốt đẹp, nhanh chóng và hiệu quả. +1!
U rsus

2
Cần cho phép chúng tôi xác định màu sắc!

6
@Freddy thực sự thì trình tạo đã có khả năng đó, tôi chỉ là chưa xây dựng giao diện người dùng cho nó. Chuyển các thông số bg và fg tương ứng cho nền và nền trước, sử dụng các giá trị màu RGB HEX. ví dụ: paulferrett.com/fontawesome-favicon/…
Paul Ferrett

7
@ paul-ferrett: có cách nào để thay đổi kích thước của biểu tượng đã tạo không?
vgoklani

4
Thực hiện tốt. Thật không may hiện nay chỉ có biểu tượng yêu thích 16x16 là không đủ. Rất vui khi tải xuống một tệp zip chứa tất cả các biểu tượng yêu thích cần thiết ở tất cả các kích thước cần thiết.
coorasse

85

Tôi cũng đã tạo một Trình tạo Font Awesome Favicon trực tuyến có các tính năng bổ sung bị thiếu trong giải pháp của Paul Ferrett.

yêu thích

  • xem trước biểu tượng yêu thích trực tiếp trong trình duyệt
  • kích thước của biểu tượng
  • biểu tượng và nền trong suốt
  • kích thước hình ảnh lớn (biểu tượng có thể chi tiết như bạn muốn)
  • Bộ biểu tượng có thể được cập nhật thông qua yêu cầu kéo github
  • cập nhật bản cập nhật 06/2017 cho Font Awesome 4.7
  • cập nhật tìm kiếm mờ 06/2017 và tìm kiếm từ khóa
  • cập nhật 09/2017 các biểu tượng xếp chồng lên nhau
  • cập nhật tháng 06/2018 cập nhật lên Font Awesome 5.0.13
  • cập nhật bản cập nhật tháng 11/2018 lên Font Awesome 5.5.0
  • cập nhật bản cập nhật tháng 04/2019 lên Font Awesome 5.8.1
  • cập nhật 04/2019 đã bổ sung hỗ trợ cho Font Awesome Pro !

Nếu bạn muốn các tính năng bổ sung, vui lòng gửi vấn đề hoặc yêu cầu kéo tại đây .


@vgoklani Nếu bạn có đề xuất, vui lòng cho tôi biết :)
nhật thực

@eclipse: Cảm ơn bạn rất nhiều! Điều này đã cứu tôi rất nhiều đau đớn.
sam

Cảm ơn bạn vì nỗ lực tuyệt vời này, với một số lưu ý trước tiên: khi tôi tải xuống một hình ảnh, nó luôn là 1024 cho chiều rộng và chiều cao, nó phải được thay đổi kích thước thành kích thước thực. thứ hai: kích thước của giá trị thanh trượt nên được viết hoặc tốt hơn có thể được đặt trong một hộp số
Saif

1
Tôi đã nâng cao nó với hỗ trợ các biểu tượng xếp chồng lên nhau. PR đang chờ xem xét.
trung

2
Tôi thích tính năng xem trước tab trực tiếp!
Tot Zam

11

Bất kỳ hình ảnh nào cũng có thể được tải lên trang web tạo biểu tượng yêu thích, chẳng hạn như

http://favicon-generator.org/

hoặc là

http://www.favicon.cc/

làm theo hướng dẫn trực tuyến trên trang web bạn chọn. Nó thường chỉ là một quy trình ba bước. Lưu biểu tượng yêu thích ở cấp cao nhất của trang web của bạn.

Để tương thích trên các trình duyệt, tôi khuyên bạn nên luôn sử dụng hình ảnh cho biểu tượng yêu thích. Ngay cả khi một số trang web bạn tạo chỉ dành cho các trình duyệt hiện đại vẫn chuyển đổi tác phẩm nghệ thuật biểu tượng của bạn thành hình ảnh. Việc sử dụng nhất quán cùng một quy trình giúp bạn bớt lo lắng hơn.


2
"Lưu ý rằng biểu tượng yêu thích sẽ không hiển thị trong Chrome nếu trang web của bạn là cục bộ, chỉ khi bạn tải trang web lên máy chủ lưu trữ web của mình". điều đó không chính xác.
U rsus

nếu bạn gặp sự cố khi xem biểu tượng yêu thích của mình, hãy xem cục bộ. stackoverflow.com/questions/16375592/…
otherDewi Ngày

7

Bạn không thể sử dụng ký tự phông chữ tuyệt vời trực tiếp làm biểu tượng yêu thích mà không cần chuyển đổi thành hình ảnh. Bạn phải chuyển đổi ký tự thành hình ảnh ..

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.