Iconos de aplicaciones de WindowsTiles for Windows apps

Un icono es una representación de la aplicación en el menú Inicio.A tile is an app's representation on the Start menu. Todas las aplicaciones tienen un icono.Every app has a tile. Al crear un nuevo proyecto de aplicación de Windows en Microsoft Visual Studio, incluye un icono predeterminado que muestra el nombre y el logotipo de la aplicación.When you create a new Windows app project in Microsoft Visual Studio, it includes a default tile that displays your app's name and logo.Windows muestra este icono cuando se instala la aplicación por primera vez. Windows displays this tile when your app is first installed. Cuando se instala la aplicación, puedes cambiar el contenido del icono a través de notificaciones; por ejemplo, puedes cambiar el icono para comunicar nueva información al usuario, como titulares de noticias o el asunto del mensaje sin leer más reciente.After your app is installed, you can change your tile's content through notifications; for example, you can change the tile to communicate new information to the user, such as news headlines, or the subject of the most recent unread message.

Configurar el icono predeterminadoConfigure the default tile

Cuando creas un nuevo proyecto en Visual Studio, se crea un icono predeterminado sencillo que muestra el nombre y el logotipo de la aplicación.When you create a new project in Visual Studio, it creates a simple default tile that displays your app's name and logo.

Para editar el icono, haga doble clic en el archivo Package. appxmanifest en el proyecto principal de UWP para abrir el diseñador (o haga clic con el botón derecho en el archivo y seleccione Ver código).To edit your tile, double click the Package.appxmanifest file in your main UWP project to open the designer (or right click the file and select View Code).

  <Applications>
    <Application Id="App"
      Executable="$targetnametoken$.exe"
      EntryPoint="ExampleApp.App">
      <uap:VisualElements
        DisplayName="ExampleApp"
        Square150x150Logo="Assets\Square150x150Logo.png"
        Square44x44Logo="Assets\Square44x44Logo.png"
        Description="ExampleApp"
        BackgroundColor="#464646">
        <uap:SplashScreen Image="Assets\SplashScreen.png" />
      </uap:VisualElements>
    </Application>
  </Applications>

Hay algunos elementos que deberías actualizar:There are a few items you should update:

  • DisplayName: reemplaza este valor por el nombre que quieras que aparezca en el icono.DisplayName: Replace this value with the name you want to display on your tile.

  • ShortName: dado que no hay espacio limitado para que el nombre para mostrar quepa en los iconos, recomendamos que especifiques un ShortName también, para asegurarte de que el nombre de la aplicación no se trunca.ShortName: Because there is limited room for your display name to fit on tiles, we recommend that you to specify a ShortName as well, to make sure your app's name doesn’t get truncated.

  • Imágenes de logotipo:Logo images:

    Debes cambiar estas imágenes por las tuyas,You should replace these images with your own. Tienes la opción de proporcionar imágenes para diferentes escalas visuales, pero no tienes que proporcionarlas todas.You have the option of supplying images for different visual scales, but you are not required to supply them all. Para garantizar que tu aplicación se ve bien en una gran variedad de dispositivos, te recomendamos que ofrezcas versiones de escala de 100 %, 200 % y 400 % de cada imagen.To ensure that you app looks good on a range of devices, we recommend that you provide 100%, 200%, and 400% scale versions of each image. Consulte iconos y logotipos de aplicaciones para obtener más información sobre la generación de estos recursos.See App icons and logos to learn more about generating these assets.

    Las imágenes a escala siguen esta convención de nomenclatura:Scaled images follow this naming convention:

    * < nombre > de la imagen. < factor > de escalade escala. < extensión > de archivo de imagen*<image name>.scale-<scale factor>.<image file extension>

    Por ejemplo: SplashScreen.scale-100.pngFor example: SplashScreen.scale-100.png

    Al hacer referencia a la imagen, se hace referencia a ella como * < nombre > de la imagen. < extensión > de archivo de imagen* ("SplashScreen.png" en este ejemplo).When you refer to the image, you refer to it as <image name>.<image file extension> ("SplashScreen.png" in this example). El sistema seleccionará automáticamente la imagen a escala adecuada para el dispositivo desde las imágenes que hayas proporcionado.The system will automatically select the appropriate scaled image for the device from the images you've provided.

  • No es necesario, pero sí muy recomendable, ofrecer logotipos para tamaños de iconos grandes y anchos para que el usuario pueda cambiar el tamaño del icono de la aplicación a esos tamaños.You don't have to, but we highly recommend supplying logos for wide and large tile sizes so that the user can resize your app's tile to those sizes. Para proporcionar estas imágenes adicionales, cree un elemento DefaultTile y use los atributos Wide310x150Logo y Square310x310Logo para especificar las imágenes adicionales:To provide these additional images, you create a DefaultTile element and use the Wide310x150Logo and Square310x310Logo attributes to specify the additional images:

  <Applications>
        <Application Id="App"
          Executable="$targetnametoken$.exe"
          EntryPoint="ExampleApp.App">
          <uap:VisualElements
            DisplayName="ExampleApp"
            Square150x150Logo="Assets\Square150x150Logo.png"
            Square44x44Logo="Assets\Square44x44Logo.png"
            Description="ExampleApp"
            BackgroundColor="#464646">
            <uap:DefaultTile
              Wide310x150Logo="Assets\Wide310x150Logo.png"
              Square310x310Logo="Assets\Square310x310Logo.png">
            </uap:DefaultTile>
            <uap:SplashScreen Image="Assets\SplashScreen.png" />
          </uap:VisualElements>
        </Application>
      </Applications>

Usar notificaciones para personalizar el iconoUse notifications to customize your tile

Cuando se instale la aplicación, puedes usar las notificaciones para personalizar tu icono.After your app is installed, you can use notifications to customize your tile. Puede hacerlo la primera vez que se inicie la aplicación o en respuesta a un evento, como una notificación de envío.You can do this the first time your app launches or in response to an event, such as a push notification.

Para obtener información sobre cómo enviar notificaciones de icono, consulte enviar una notificación de icono local.To learn how to send tile notifications, see Send a local tile notification.