Use Font Awesome Icon As Favicon

109

É possível usar um ícone Font Awesome como um ícone favicon? Você sabe, o pequeno ícone que aparece ao lado do título de um site na guia do navegador?

favicon font-awesome Connor Black
fonte

Respostas:

38

Sim, ele é. Basta fazer uma captura de tela de algo com o caractere desejado, cortar a parte desejada e salvá-la como imagem (.ico).

Sério agora, você pode querer verificar os formatos suportados por cada navegador: http://en.wikipedia.org/wiki/Favicon#File_format_support

Se seus personagens são imagens ou arquivos vetoriais, você ficará bem com a maioria dos navegadores, exceto o IE (porque o MS odeia você) . Caso contrário, bem, você realmente terá que salvá-los como imagens primeiro.

Renan
fonte
3
A licença permite isso?
art-solopov
3
@ art-solopov Sim, é verdade - você pode conferir na página de licença deles: fortawesome.github.io/Font-Awesome/license
Renan
Eu li o OFL e não encontrei nada relacionado a alterar o formato da fonte ou compor uma imagem a partir de glifos. Desculpe se estou faltando alguma coisa, você poderia me indicar a seção específica? Obrigado.
art-solopov
Votos negativos por sugerir captura de tela. Existem muitas maneiras de se conseguir isso.
metaColin
2
@marcogmonteiro Se você visitar fontawesome.com/download poderá baixar os ícones como arquivos .svg. A maioria dos navegadores aceita um ativo .svg como favicon. Se precisar de suporte a versões antigas do IE, você pode obter um bom ativo raster limpo (como um .png) convertendo o .svg usando o Photoshop ou Illustrator.
metaColin
289

EDIT: Eu sugiro que você use http://gauger.io/fonticon

Eu criei um Font Awesome Favicon Generator online para fazer exatamente isso!

Veja Font Awesome Favicon Generator .

Paul Ferrett
fonte
7
Legal, rápido e eficaz. +1!
U rsus
2
Precisa nos permitir definir a cor!
6
@Freddy, na verdade, o gerador já é capaz disso, só não criei a IU para ele. Passe os parâmetros bg e fg para o fundo e o primeiro plano, respectivamente, usando os valores de cor RGB HEX. por exemplo, paulferrett.com/fontawesome-favicon/…
Paul Ferrett
7
@ paul-ferrett: existe uma maneira de alterar o tamanho do ícone gerado?
vgoklani
4
Boa implementação. Infelizmente, hoje em dia, apenas o favicon 16x16 não é suficiente. Seria bom baixar um zip contendo todos os favicons necessários em todos os tamanhos necessários.
coorasse
85

Também criei um Font Awesome Favicon Generator online que possui recursos adicionais que estavam faltando na solução de Paul Ferrett.

favicon

  • visualização do favicon ao vivo no navegador
  • dimensionamento do ícone
  • ícone e fundo transparentes
  • tamanho de imagem enorme (o ícone pode ser tão detalhado quanto você quiser)
  • conjunto de ícones pode ser atualizado por meio de solicitação de pull do github
  • atualização 06/2017 atualização para Font Awesome 4.7
  • atualização 06/2017 fuzzy search e palavra-chave
  • atualizar 09/2017 ícones empilhados
  • atualização 06/2018 atualização para Font Awesome 5.0.13
  • atualização 11/2018 atualização para Font Awesome 5.5.0
  • atualização 04/2019 atualização para Font Awesome 5.8.1
  • atualização 04/2019 adicionado suporte para Font Awesome Pro !

Se desejar recursos adicionais, sinta-se à vontade para enviar um problema ou uma solicitação de pull aqui .

eclipse
fonte
@vgoklani Se você tiver sugestões, por favor me avise :)
eclipse
@eclipse: Muito obrigado! Isso me salvou de muita dor.
sam
Obrigado por este grande esforço, com alguns avisos primeiro: quando eu faço o download de uma imagem, é sempre 1024 para largura e altura, ela deve ser redimensionada para o tamanho real. segundo: o tamanho do valor do controle deslizante deve ser escrito ou melhor pode ser definido em uma caixa de número
Saif
1
Eu o aprimorei com suporte a ícones empilhados. PR está pendente para revisão.
trung de
2
Eu amo o recurso de visualização da guia ao vivo!
Tot Zam
11

Qualquer imagem pode ser enviada para um site gerador de favicon, como

http://favicon-generator.org/

ou

http://www.favicon.cc/

siga as instruções online no site que você escolher. Geralmente é um processo de apenas três etapas. Salve o favicon no nível superior do seu site.

Para compatibilidade entre navegadores, eu recomendo sempre usar imagens para favicons. Mesmo que alguns sites que você crie sejam apenas para navegadores modernos, ainda converta sua arte de favicon em uma imagem. Usar o mesmo processo de maneira consistente oferece uma coisa a menos com que se preocupar.

otherDewi
fonte
2
"Observe que um favicon não aparecerá no Chrome se o seu site for local, apenas quando você fizer o upload do site para o seu host". isso não é correto.
U rsus
se tiver problemas para ver seu ícone de fav localmente, consulte stackoverflow.com/questions/16375592/…
otherDewi
7

Não é possível usar um caractere de fonte incrível direto como favicon sem converter em imagem. Você deve converter o personagem em imagem.

Shakeel Ahmed
fonte