Użyj ikony Font Awesome jako ikony Favicon

109

Czy można użyć ikony Font Awesome jako ikony favicon? Wiesz, mała ikona, która pojawia się obok tytułu witryny na karcie przeglądarki?

favicon font-awesome Connor Black
źródło

Odpowiedzi:

38

Tak to jest. Po prostu zrób zrzut ekranu przedstawiający żądaną postać, wytnij żądaną część i zapisz jako obraz (.ico).

A teraz poważnie, możesz chcieć sprawdzić formaty obsługiwane przez każdą przeglądarkę: http://en.wikipedia.org/wiki/Favicon#File_format_support

Jeśli twoje postacie są plikami graficznymi lub wektorowymi, będziesz w porządku z większością przeglądarek, ale IE (ponieważ MS cię nienawidzi) . W przeciwnym razie musisz najpierw zapisać je jako obrazy.

Renan
źródło
3
Czy jednak licencja na to pozwala?
art-solopov 13.07.15
3
@ art-solopov Tak, tak - możesz to sprawdzić na stronie ich licencji: fortawesome.github.io/Font-Awesome/license
Renan
Przeczytałem OFL i nie znalazłem nic związanego ze zmianą formatu czcionki lub komponowaniem obrazu z glifów. Przepraszam, jeśli czegoś brakuje, czy mógłbyś wskazać mi konkretną sekcję? Dziękuję Ci.
art-solopov
Głos za sugestią zrzutu ekranu. Jest na to wiele bezstratnych sposobów.
metaColin
2
@marcogmonteiro Jeśli odwiedzasz fontawesome.com/download , możesz pobrać ikony w postaci plików .svg. Większość przeglądarek akceptuje zasób .svg jako favicon. Jeśli potrzebujesz obsługiwać starsze wersje IE, możesz uzyskać ładny, czysty zasób rastrowy (taki jak .png), konwertując plik .svg za pomocą programu Photoshop lub Illustrator.
metaColin
290

EDYCJA: Sugeruję użycie http://gauger.io/fonticon

W tym celu stworzyłem internetowy generator Font Awesome Favicon!

Zobacz Font Awesome Favicon Generator .

Paul Ferrett
źródło
7
Niezły, szybki i skuteczny. +1!
U rsus
2
Musisz pozwolić nam zdefiniować kolor!
6
@Freddy faktycznie generator jest już do tego zdolny, po prostu nie zbudowałem do tego interfejsu użytkownika. Przekaż parametry bg i fg odpowiednio dla tła i pierwszego planu, używając wartości kolorów RGB HEX. na przykład paulferrett.com/fontawesome-favicon/…
Paul Ferrett
7
@ paul-ferrett: czy istnieje sposób na zmianę rozmiaru generowanej ikony?
vgoklani
4
Niezła realizacja. Niestety w dzisiejszych czasach sam favicon 16x16 nie wystarcza. Byłoby miło pobrać plik zip zawierający wszystkie niezbędne ikony ulubionych we wszystkich potrzebnych rozmiarach.
coorasse
86

Stworzyłem również internetowy Font Awesome Favicon Generator, który ma dodatkowe funkcje, których brakowało w rozwiązaniu Paula Ferretta.

favicon

  • podgląd favicon na żywo w przeglądarce
  • rozmiar ikony
  • przezroczysta ikona i tło
  • ogromny rozmiar obrazu (ikona może być tak szczegółowa, jak chcesz)
  • iconset można aktualizować za pomocą żądania ściągnięcia na github
  • aktualizacja 06/2017 aktualizacja do Font Awesome 4.7
  • aktualizacja 06/2017 wyszukiwanie rozmyte i wyszukiwanie słów kluczowych
  • aktualizacja 09/2017 ułożone ikony
  • aktualizacja 06/2018 aktualizacja do Font Awesome 5.0.13
  • aktualizacja 11/2018 do Font Awesome 5.5.0
  • aktualizacja 04/2019 aktualizacja Font Awesome 5.8.1
  • aktualizacja 04/2019 dodano obsługę Font Awesome Pro !

Jeśli potrzebujesz dodatkowych funkcji, możesz przesłać tutaj problem lub prośbę o ściągnięcie .

zaćmienie
źródło
@vgoklani Jeśli masz sugestie, daj mi znać :)
eclipse
@eclipse: Dziękuję bardzo! To zaoszczędziło mi tyle bólu.
sam
Dziękuję za ten wielki wysiłek, najpierw kilka uwag : kiedy pobieram obraz, szerokość i wysokość zawsze wynosi 1024, należy go zmienić na rzeczywisty rozmiar. po drugie: rozmiar wartości suwaka powinien być zapisany lub lepiej można ustawić w polu liczbowym
Saif
1
Ulepszyłem go o obsługę zestawionych ikon. PR oczekuje na sprawdzenie.
trung
2
Uwielbiam funkcję podglądu karty na żywo!
Tot Zam
11

Każdy obraz można przesłać do witryny generatora ulubionych ikon, takiej jak

http://favicon-generator.org/

lub

http://www.favicon.cc/

postępuj zgodnie z instrukcjami online w wybranej witrynie. Zwykle jest to tylko trzyetapowy proces. Zapisz favicon na najwyższym poziomie swojej witryny.

Ze względu na kompatybilność między przeglądarkami zawsze zalecam używanie obrazków do ulubionych ikon. Nawet jeśli niektóre witryny, które tworzysz, są przeznaczone tylko dla nowoczesnych przeglądarek, nadal konwertujesz grafikę favicon na obraz. Konsekwentne stosowanie tego samego procesu daje o jedną rzecz mniej zmartwień.

otherDewi
źródło
2
„Pamiętaj, że favicon nie pojawi się w Chrome, jeśli Twoja witryna jest lokalna, tylko wtedy, gdy prześlesz ją do swojego usługodawcy hostingowego”. to nie jest poprawne.
U rsus
jeśli masz problemy z wyświetlaniem swojej ikony ulubionych lokalnie, zobacz. stackoverflow.com/questions/16375592/…
otherDewi
7

Nie jest możliwe, abyś mógł używać bezpośrednio niesamowitego znaku czcionki jako favicon bez konwersji na obraz. Musisz przekonwertować znak na obraz ...

Shakeel Ahmed
źródło