Saltar al contenido

Cargador de Favicon

Descripción

El widget Favicon Loader aplicará un ícono a un sitio como favicono y aparecerá en la pestaña del navegador de un sitio en particular. El ícono también se mostrará en la pantalla de inicio de un dispositivo móvil (iOS y Android) cuando el sitio se agregue a la pantalla de inicio del dispositivo móvil.

  • Creador: Andrew Connor
  • Tipo: Widget del sitio
  • Parámetros:
    • FaviconRel: icono
    • FaviconTamaños: 16x16
    • Tipo de favicon: imagen/png
    • FaviconUrl: URL del ícono que desea elegir. Para servidores de Vinyl--> " https://{{servername}}.zudy.com/vinyl/service/image/{{imageID}}"

El ID de la imagen se puede encontrar en la información de la imagen en IDE-->Diseña tu apariencia-->Imágenes-->{{Your Image}}

Ejemplo en Video de Despliegue del Widget de Carga de Faviconos

Solución Alternativa para Personalizar un Favicono

En algunos casos, el uso del Widget de carga de favicon recomendado puede no producir los resultados de íconos correctos para todos los tamaños de ventana gráfica (por ejemplo, dispositivos móviles). Como alternativa, puede utilizar el siguiente proceso. Como nota de precaución: asegúrese de hacer una copia del archivo Index.html antes y después de realizar cambios, ya que este será reemplazado por las actualizaciones.

  1. El primer paso es generar un ícono que desee utilizar para su favicon. Por ejemplo, utilice una imagen estándar de 400 x 400 píxeles como la siguiente imagen:

    Favicon

  2. Utilice una herramienta en línea para generar la imagen del favicon para todos los formatos compatibles. Por ejemplo, un buen recurso gratuito es https://www.favicon-generator.org

    Esto creará un archivo zip que contendrá muchas representaciones diferentes de las imágenes como se muestra a continuación:

    Zip

  3. Copie el HTML generado que debe agregarse al encabezado del App Builder archivo del sitio. El contenido debería ser similar a esto:

    <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

  4. Una vez que hayas reunido la carpeta de favicon y el HTML necesario, navega hasta tu App Builder servidor de aplicaciones que utiliza Escritorio remoto ubique su App Builder carpeta App Pool. Normalmente, se encuentra en la siguiente ruta: C:\inetpub\wwwroot\App Builder

    App Builder raíz

  5. Una vez que hayas navegado hasta tu App Builder carpeta Busque la carpeta Contenido y allí colocará la carpeta que contiene todos sus íconos de favicon. Le recomendamos cambiar el nombre de la carpeta a Favicon para que sea más fácil establecer la ruta.

    Img

  6. Una vez que hayas agregado tu carpeta Favicon a la carpeta Contenido, App Builder puedes continuar y hacer clic en la carpeta Views para buscar el archivo Index.html

  7. Abre el archivo Index.html con tu editor de texto o código preferido y agrega las referencias para tu carpeta de favicon asegurándote de incluir /content/ en la ruta del archivo:

    Index

  8. Asegúrese de guardar el archivo. A continuación, navegue hasta IIS y vaya a su grupo de aplicaciones y haga clic en Reiniciar para el sitio web

    IIS

  9. Una vez que IIS haya terminado de actualizarse, puede probar navegando a su sitio desde su navegador y agregándolo a favoritos o guardándolo en la pantalla de inicio. ¡Ahora debería ver su favicon personalizado!

    Seven