Usa l'icona Font Awesome come Favicon


109

È possibile utilizzare un'icona Font Awesome come icona favicon? Sai, la piccola icona che appare accanto al titolo di un sito web nella scheda del browser?

Risposte:


38

Sì. Basta fare uno screenshot di qualcosa con il carattere desiderato, tagliare la parte che desideri e salvarla come immagine (.ico).

Seriamente adesso, potresti voler controllare i formati supportati da ogni browser: http://en.wikipedia.org/wiki/Favicon#File_format_support

Se i tuoi personaggi sono file immagine o vettoriali, starai bene con la maggior parte dei browser tranne IE (perché MS ti odia) . Altrimenti, beh, dovrai prima salvarli come immagini.


3
La licenza lo consente però?
art-solopov

3
@ art-solopov Sì, puoi verificarlo sulla loro pagina di licenza: fortawesome.github.io/Font-Awesome/license
Renan

Ho letto l'OFL e non ho trovato nulla relativo alla modifica del formato del carattere o alla composizione di un'immagine da glifi. Scusa se mi manca qualcosa, potresti indicarmi la sezione specifica? Grazie.
art-solopov

Downvoted per aver suggerito screenshot. Ci sono molti modi senza perdite per raggiungere questo obiettivo.
metaColin

2
@marcogmonteiro Se visiti fontawesome.com/download puoi scaricare le icone come file .svg. La maggior parte dei browser accetterà una risorsa .svg come favicon. Se hai bisogno di supportare le vecchie versioni di IE, puoi ottenere una bella risorsa raster pulita (come un .png) convertendo il .svg usando Photoshop o Illustrator.
metaColin

289

EDIT: ti suggerisco di usare http://gauger.io/fonticon


Per fare proprio questo ho creato un generatore online di Favicon di Font Awesome!

Vedi Font Awesome Favicon Generator .


7
Bello, veloce ed efficace. +1!
U rso

2
Bisogna permetterci di definire il colore!

6
@Freddy in realtà il generatore è già in grado di farlo, semplicemente non ho costruito l'interfaccia utente per questo. Passa i parametri bg e fg per lo sfondo e il primo piano, rispettivamente, utilizzando i valori di colore RGB HEX. ad esempio, paulferrett.com/fontawesome-favicon/…
Paul Ferrett

7
@ paul-ferrett: c'è un modo per cambiare la dimensione dell'icona generata?
vgoklani

4
Bella implementazione. Purtroppo al giorno d'oggi solo la favicon 16x16 non è sufficiente. Sarebbe bello scaricare uno zip contenente tutte le favicon necessarie in tutte le dimensioni necessarie.
coorasse

85

Ho anche creato un Font Awesome Favicon Generator online che ha funzionalità aggiuntive che mancavano nella soluzione di Paul Ferrett.

favicon

  • anteprima della favicon live nel browser
  • dimensionamento dell'icona
  • icona trasparente e sfondo
  • dimensioni enormi dell'immagine (l'icona può essere dettagliata come desideri)
  • Il set di icone può essere aggiornato tramite richiesta pull di GitHub
  • aggiornamento 06/2017 aggiornamento a Font Awesome 4.7
  • aggiornamento 06/2017 ricerca fuzzy e ricerca per parole chiave
  • aggiornamento 09/2017 icone impilate
  • aggiornamento 06/2018 aggiornamento a Font Awesome 5.0.13
  • aggiornamento 11/2018 aggiornamento a Font Awesome 5.5.0
  • aggiornamento 04/2019 aggiornamento a Font Awesome 5.8.1
  • aggiornamento 04/2019 aggiunto il supporto per Font Awesome Pro !

Se desideri funzionalità aggiuntive, non esitare a inviare un problema o una richiesta pull qui .


@vgoklani Se hai suggerimenti per favore fatemelo sapere :)
eclipse

@eclipse: grazie mille! Questo mi ha risparmiato così tanto dolore.
Sam

Grazie per questo grande sforzo, prima con alcuni avvisi : quando scarico un'immagine, è sempre 1024 per larghezza e altezza, dovrebbe essere ridimensionata alla dimensione effettiva. secondo: la dimensione del valore del cursore deve essere scritta o meglio può essere impostata in una casella numerica
Saif

1
L'ho migliorato con il supporto delle icone impilate. PR è in attesa di revisione.
trung

2
Adoro la funzione di anteprima della scheda live!
Tot Zam

11

Qualsiasi immagine può essere caricata su un sito generatore di favicon come

http://favicon-generator.org/

o

http://www.favicon.cc/

segui le istruzioni in linea sul sito che scegli. Di solito è solo un processo in tre fasi. Salva la favicon nel livello superiore del tuo sito.

Per la compatibilità tra i browser, consiglio di utilizzare sempre le immagini per le favicon. Anche se alcuni siti che crei sono solo per browser moderni, converti comunque la tua opera d'arte favicon in un'immagine. L'uso coerente dello stesso processo ti dà una cosa in meno di cui preoccuparti.


2
"Tieni presente che una favicon non verrà visualizzata in Chrome se il tuo sito è locale, solo quando carichi il sito sul tuo host web". non è corretto.
U rso

se hai problemi a vedere la tua icona preferita in locale vedi. stackoverflow.com/questions/16375592/...
otherDewi

7

Non è possibile utilizzare caratteri fantastici diretti come favicon senza convertirli in immagini. Devi convertire il personaggio in immagine.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.