Utilice Font Awesome Icon como Favicon

109

¿Es posible utilizar un icono de Font Awesome como icono de favicon? Ya sabes, ¿el pequeño icono que aparece junto al título de un sitio web en la pestaña del navegador?

favicon font-awesome Connor Black
fuente

Respuestas:

38

Sí lo es. Simplemente tome una captura de pantalla de algo con el carácter deseado, corte la parte que desee y guárdela como una imagen (.ico).

En serio, es posible que desee verificar los formatos compatibles con cada navegador: http://en.wikipedia.org/wiki/Favicon#File_format_support

Si sus personajes son archivos de imagen o vectoriales, estará bien con la mayoría de los navegadores, excepto IE (porque MS lo odia) . De lo contrario, primero tendrás que guardarlas como imágenes.

Renan
fuente
3
Sin embargo, ¿la licencia lo permite?
art-solopov
3
@ art-solopov Sí, lo hace, puede verlo en su página de licencia: fortawesome.github.io/Font-Awesome/license
Renan
Leí la OFL y no encontré nada relacionado con cambiar el formato de la fuente o componer una imagen a partir de glifos. Disculpe si me falta algo, ¿podría indicarme la sección específica? Gracias.
art-solopov
Votado en contra por sugerir una captura de pantalla. Hay muchas formas sin pérdidas de lograrlo.
metaColin
2
@marcogmonteiro Si visita fontawesome.com/download puede descargar los iconos como archivos .svg. La mayoría de los navegadores aceptarán un activo .svg como favicon. Si necesita admitir versiones antiguas de IE, puede obtener un buen recurso de trama limpio (como un .png) convirtiendo el .svg con Photoshop o Illustrator.
metaColin
289

EDITAR: le sugiero que use http://gauger.io/fonticon

¡He creado un generador de favicon Font Awesome en línea para hacer precisamente eso!

Consulte Font Awesome Favicon Generator .

Paul Ferrett
fuente
7
Bonito, rápido y eficaz. +1!
U rsus
2
¡Necesito permitirnos definir el color!
6
@Freddy en realidad, el generador ya es capaz de eso, simplemente no he creado la interfaz de usuario para ello. Pase los parámetros bg y fg para el fondo y el primer plano, respectivamente, utilizando valores de color RGB HEX. por ejemplo, paulferrett.com/fontawesome-favicon/…
Paul Ferrett
7
@ paul-ferrett: ¿hay alguna forma de cambiar el tamaño del icono generado?
vgoklani
4
Buena implementación. Desafortunadamente, hoy en día solo el favicon de 16x16 no es suficiente. Sería bueno descargar un zip que contenga todos los favicons necesarios en todos los tamaños necesarios.
coorasse
85

También he creado un generador de favicon Font Awesome en línea que tiene características adicionales que faltaban en la solución de Paul Ferrett.

favicon

  • vista previa del favicon en vivo en el navegador
  • dimensionamiento del icono
  • icono transparente y fondo
  • tamaño de imagen enorme (el icono puede ser tan detallado como desee)
  • el conjunto de iconos se puede actualizar a través de una solicitud de extracción de github
  • actualización 06/2017 actualización a Font Awesome 4.7
  • actualización 06/2017 búsqueda difusa y búsqueda de palabras clave
  • actualización 09/2017 iconos apilados
  • actualización 06/2018 actualización a Font Awesome 5.0.13
  • actualización 11/2018 actualización a Font Awesome 5.5.0
  • actualización 04/2019 actualización a Font Awesome 5.8.1
  • ¡La actualización 04/2019 agregó soporte para Font Awesome Pro !

Si desea funciones adicionales, no dude en enviar un problema o una solicitud de extracción aquí .

eclipse
fuente
@vgoklani Si tiene sugerencias, hágamelo saber :)
Eclipse
@eclipse: ¡Muchas gracias! Esto me ha ahorrado mucho dolor.
Sam
Gracias por este gran esfuerzo, con algunos avisos primero: cuando descargo una imagen, siempre tiene un ancho y un alto de 1024, se debe cambiar el tamaño al tamaño real. segundo: el tamaño del valor del control deslizante debe escribirse o mejor se puede establecer en un cuadro numérico
Saif
1
Lo he mejorado con soporte para iconos apilados. PR está pendiente de revisión.
2017
2
¡Me encanta la función de vista previa de la pestaña en vivo!
Tot Zam
11

Cualquier imagen se puede cargar en un sitio generador de favicon como

http://favicon-generator.org/

o

http://www.favicon.cc/

siga las instrucciones en línea del sitio que elija. Normalmente es un proceso de tres pasos. Guarde el favicon en el nivel superior de su sitio.

Por compatibilidad entre navegadores, recomiendo usar siempre imágenes para favicons. Incluso si algunos sitios que crea son solo para navegadores modernos, todavía convierta su arte de favicon en una imagen. El uso constante del mismo proceso le da una cosa menos de la que preocuparse.

otros Dewi
fuente
2
"Tenga en cuenta que un favicon no aparecerá en Chrome si su sitio es local, solo cuando suba el sitio a su servidor web". eso no es correcto.
U rsus
si tiene problemas para ver su icono favorito localmente, consulte. stackoverflow.com/questions/16375592/…
otherDewi
7

No es posible que pueda usar un carácter de fuente impresionante directo como favicon sin convertirlo en una imagen. Debes convertir el personaje en imagen.

Shakeel Ahmed
fuente