Gunakan Ikon Font Awesome Sebagai Favicon

109

Apakah mungkin menggunakan ikon Font Awesome sebagai ikon favicon? Tahukah Anda, ikon kecil yang muncul di samping judul situs web di tab browser?

favicon font-awesome Connor Black
sumber

Jawaban:

38

Ya itu. Ambil saja tangkapan layar dari sesuatu dengan karakter yang diinginkan, potong bagian yang Anda inginkan dan simpan sebagai gambar (.ico).

Serius sekarang, Anda mungkin ingin memeriksa format yang didukung oleh setiap browser: http://en.wikipedia.org/wiki/Favicon#File_format_support

Jika karakter Anda adalah file gambar atau vektor, Anda akan baik-baik saja dengan sebagian besar browser kecuali IE (karena MS membenci Anda) . Jika tidak, Anda benar-benar harus menyimpannya sebagai gambar terlebih dahulu.

Renan
sumber
3
Apakah lisensi mengizinkannya?
art-solopov
3
@ art-solopov Ya, benar - Anda dapat memeriksanya di halaman lisensi mereka: fortawesome.github.io/Font-Awesome/license
Renan
Saya telah membaca OFL dan saya belum menemukan apa pun yang berhubungan dengan mengubah format font atau membuat gambar dari mesin terbang. Maaf jika saya melewatkan sesuatu, bisakah Anda mengarahkan saya ke bagian tertentu? Terima kasih.
art-solopov
Tidak disukai karena menyarankan tangkapan layar. Ada banyak cara tanpa kerugian untuk mencapai ini.
metaColin
2
@marcogmonteiro Jika Anda mengunjungi fontawesome.com/download, Anda dapat mendownload ikon sebagai file .svg. Kebanyakan browser akan menerima aset .svg sebagai favicon. Jika Anda perlu mendukung versi lama IE, Anda bisa mendapatkan aset raster bersih yang bagus (seperti .png) dengan mengonversi .svg menggunakan Photoshop atau Illustrator.
metaColin
289

EDIT: Saya sarankan Anda menggunakan http://gauger.io/fonticon

Saya telah membuat Generator Favicon Font Awesome online untuk melakukan hal itu!

Lihat Font Awesome Favicon Generator .

Paul Ferrett
sumber
7
Bagus, cepat dan efektif. +1!
U rsus
2
Perlu mengizinkan kami untuk menentukan warna!
6
@Freddy sebenarnya generatornya sudah mampu untuk itu, saya hanya belum membangun UI untuk itu. Meneruskan params bg dan fg masing-masing untuk latar belakang dan latar depan, menggunakan nilai warna RGB HEX. misalnya, paulferrett.com/fontawesome-favicon/…
Paul Ferrett
7
@ paul-ferrett: adakah cara untuk mengubah ukuran ikon yang dibuat?
vgoklani
4
Implementasi yang bagus. Sayangnya, sekarang favicon 16x16 saja tidak cukup. Alangkah baiknya mengunduh zip yang berisi semua favicon yang diperlukan dalam semua ukuran yang diperlukan.
coorasse
85

Saya juga telah membuat Generator Favicon Font Awesome online yang memiliki fitur tambahan yang hilang dari solusi Paul Ferrett.

favicon

  • pratinjau favicon langsung di browser
  • ukuran ikon
  • ikon dan latar belakang transparan
  • ukuran gambar besar (ikon bisa sedetail yang Anda inginkan)
  • iconset dapat diperbarui melalui permintaan tarik github
  • perbarui 06/2017 pembaruan ke Font Awesome 4.7
  • perbarui 06/2017 pencarian fuzzy dan pencarian kata kunci
  • perbarui 09/2017 ikon bertumpuk
  • perbarui 06/2018 perbarui ke Font Awesome 5.0.13
  • perbarui pembaruan 11/2018 ke Font Awesome 5.5.0
  • perbarui 04/2019 pembaruan ke Font Awesome 5.8.1
  • pembaruan 04/2019 menambahkan dukungan untuk Font Awesome Pro !

Jika Anda menginginkan fitur tambahan, silakan kirimkan masalah atau permintaan tarik di sini .

gerhana
sumber
@vgoklani Jika Anda memiliki saran, beri tahu saya :)
eclipse
@eclipse: Terima kasih banyak! Ini telah menyelamatkan saya dari rasa sakit yang begitu besar.
sam
Terima kasih atas upaya besar ini, dengan beberapa pemberitahuan terlebih dahulu: ketika saya mengunduh gambar, selalu 1024 untuk lebar dan tinggi, ukurannya harus diubah ke ukuran sebenarnya. kedua: ukuran nilai slider harus ditulis atau lebih baik dapat diatur dalam numberbox
Saif
1
Saya telah meningkatkannya dengan dukungan ikon bertumpuk. PR menunggu tinjauan.
trung
2
Saya suka fitur pratinjau tab langsung!
Tot Zam
11

Gambar apa pun dapat diunggah ke situs pembuat favicon seperti

http://favicon-generator.org/

atau

http://www.favicon.cc/

ikuti petunjuk online di situs yang Anda pilih. Biasanya hanya proses tiga langkah. Simpan favicon di tingkat atas situs Anda.

Untuk kompatibilitas di seluruh browser, saya sarankan selalu menggunakan gambar untuk favicon. Meskipun beberapa situs yang Anda buat hanya untuk peramban modern masih mengonversi karya seni favicon Anda menjadi sebuah gambar. Secara konsisten menggunakan proses yang sama akan mengurangi satu hal yang perlu Anda khawatirkan.

Dewi lainnya
sumber
2
"Perhatikan bahwa favicon tidak akan muncul di Chrome jika situs Anda lokal, hanya saat Anda mengupload situs ke host web Anda". itu tidak benar.
U rsus
jika Anda mengalami masalah dalam melihat ikon favorit Anda secara lokal. stackoverflow.com/questions/16375592/…
otherDewi
7

Tidak mungkin Anda dapat menggunakan karakter font mengagumkan langsung sebagai favicon tanpa mengubahnya menjadi gambar. Anda harus mengubah karakter menjadi gambar ..

Shakeel Ahmed
sumber