Crear un favicon

¿Cómo puedo crear un favicon para mi sitio web?

Solutions Collecting From Web of "Crear un favicon"

Al buscar información sobre favicons, descubrí que necesitaba más de 10 tipos de archivos para trabajar en todos los navegadores y dispositivos 🙁

Me cabreé y creé mi propio generador de favicones, que crea todos estos archivos y el encabezado HTML correcto para cada uno de ellos: faviconit.com

Espero que lo disfrutes.

Si ya tiene una imagen de logotipo que desea transformar en un favicon, puede convertirla usando http://www.favicomatic.com/ . Crea favicons nítidos, y no tuve que editarlos después de crearlos. Generará favicons a 16×16 y 32×32 y para citarlos: “¡Cada maldito tamaño, señor!”. El sitio también admite / preserva la transparencia presente en algunos pngs. Además, su sitio se ve bien y es fácil de usar.

Por ejemplo, aquí hay un logotipo de stackoverflow: enter image description here

Estos son algunos de los favicons generados:

enter image description hereenter image description hereenter image description hereenter image description hereenter image description here

También generan el html necesario:

                    

Miré los primeros 20 o más resultados de Google, y este fue de lejos el mejor.

GIMP es un buen progtwig para eso. Solo guarde la imagen como PNG, luego agregue

   

en la sección de tu página.

Usted crea un archivo de icono que es 16×16 o 32×32 o 64×64. Llámalo favicon.ico y colócalo en la raíz de la carpeta pública de tu sitio web.

Hay sitios web que convertirán otros formatos gráficos a .ico por usted. es decir. http://tools.dynamicdrive.com/favicon/

Una de las mejores herramientas de favicon en línea es FaviconGenerator.com . Diseño rápido y moderno, sin pelusas.

Si desea crear archivos .ico, también puede usar GIMP para crear favicons. Los navegadores modernos pueden usar archivos de imagen normales, pero originalmente creo que solo eran archivos .ico. Es un editor de imágenes de código abierto similar a Photoshop. Cree y edite una imagen del tamaño correcto (digamos 32 x 32), aplánela a una capa (a menos que desee múltiples icons en el mismo archivo) y guárdela como .ico. Lo formateará correctamente y luego usará Stefano para usarlo en su página web.

Utilizo el progtwig de fuente abierta Paint.net junto con el complemento Icon .

Luego puede crear y guardar una imagen en formato .ico con todos los diferentes tamaños incrustados en el archivo .ico.

Y si usa asp.net, intente aplicar favicon a su página:

   

pero puedes encontrar más información aquí: http://doctype.com/

Hago mis icons favoritos 16 x 16 o 32 x 32 usando Photoshop. Lo guardo como gif y luego uso IrfanView para convertir el gif a ico.

Al crear un favicon, debes tener en cuenta los siguientes factores:

  • Plataformas compatibles Hace diez años, solo quería admitir navegadores de escritorio y la solución era generar la imagen clásica de favicon.ico . Hoy en día, quieres admitir iOS (y iOS Safari) y Android (y Android Chrome). Tal vez Windows 10 (y Edge) y la nueva Mac Touch Pro Touch Bar también (macOS Safari). Ya no puedes usar una única imagen de “talla única”.
  • Diseño Tan pronto como admite múltiples plataformas, se enfrenta a múltiples pautas de diseño. Por ejemplo, Google está utilizando icons transparentes para sus propias aplicaciones nativas en Android, mientras que los icons de iOS no pueden ser transparentes en absoluto. No se puede simplemente usar un enfoque de “diseño único que se adapte a todos”.
  • Iconos generados y código HTML Durante dos o tres años, la referencia ha sido generar tantos íconos como sea posible para cubrir todos los casos. Me temo que creé esta tendencia por mí mismo: – / El problema es que terminas con líneas de 20 y algo o HTML, que es demasiado. Para tener una solución técnica satisfactoria, necesita equilibrar la cantidad de icons / HTML generados y las plataformas compatibles.

Como de costumbre, puede crear todos estos activos manualmente. A menos que tenga necesidades muy, muy específicas y un presupuesto, definitivamente este no es el camino a seguir.

La forma correcta para la mayoría de las personas es usar un generador de favicones que le permita decidir el aspecto de todos los icons y se ocupe de todos los detalles. El único que hace esto es Real Favicon Generator . Divulgación completa: soy el autor de este sitio.