Procedimiento para personalizar los iconos de la pantalla Inicio para aplicaciones de escritorio (aplicaciones de Windows en tiempo de ejecución)

Artículo
12/12/2015

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente

A partir de Windows 8.1, los desarrolladores de aplicaciones Win32 pueden personalizar la apariencia del icono de una aplicación de escritorio en la pantalla Inicio. En Windows 8, estos iconos los proporcionaba únicamente el sistema y el desarrollador no tenía la opción de personalizarlos. El icono de la aplicación se mostraba en un icono basado en el color de fondo de la pantalla Inicio. Windows 8.1 proporciona una apariencia de iconos predeterminados más variada, pero también te permite personalizar aún más el icono según la marca mediante el uso de tus propios colores e imágenes.

Las personalizaciones disponibles para el icono de la aplicación de escritorio son:

Imágenes personalizadas, sin bordes
Un Color de fondo específico
La opción de mostrar u ocultar el nombre de la aplicación en el icono
Color de texto específico claro u oscuro si eliges mostrar el nombre de la aplicación

Puedes personalizar por completo un icono, pero también debes conocer los cambios en la apariencia de iconos predeterminados que podrían ser suficientes para lo que necesitas. El icono predeterminado que Windows asigna a la aplicación es un icono de tamaño mediano que muestra el nombre y el icono de la aplicación. No obstante, a partir de Windows 8.1, el diseño ha cambiado y Windows extrae un color del icono de la aplicación para proporcionar un color de fondo similar o complementario que se utilice alrededor del icono.

La imagen siguiente muestra la apariencia de los mismos iconos predeterminados en Windows 8 y en Windows 8.1, usando el mismo color de fondo de la pantalla Inicio.

Iconos Microsoft Office para Windows 8 y Windows 8.1

Si eliges personalizar aún más tu icono, tendrás que hacerlo mediante un archivo XML especializado. El esquema que usa este archivo es similar al del esquema de iconos que se usa para iconos de aplicaciones de la Tienda Windows, pero no los confundas, no son intercambiables. En este tema se describe el proceso de creación del siguiente archivo de ejemplo, en el que los atributos Square150x150Logo y Square70x70Logo son opcionales, pero todos los demás son obligatorios.


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="#FF0000"
        ShowNameOnSquare150x150Logo="on"
        ForegroundText="light"
        Square150x150Logo="Assets\150x150Logo.png"
        Square70x70Logo="Assets\70x70Logo.png"/>
</Application>

Requisitos previos

Conocimiento de XML
Conocimiento de los parámetros de línea de comandos
Conocimiento de la asignación de nombres y empaquetado de recursos para versiones con escalado de imágenes, alto contraste y localizadas. Para más información, consulta el tema sobre cómo asignar nombre a los recursos mediante calificadores.

Instrucciones

Paso 1: Crear el archivo XML para la personalización

Especifica las personalizaciones del icono
Colócalo en el mismo directorio que tu archivo ejecutable.
Asígnale el mismo nombre que tu archivo ejecutable, con la extensión ".VisualElementsManifest.xml". Por ejemplo, para el archivo ejecutable "contoso.exe", el archivo XML relacionado se denomina "contoso.visualelementsmanifest.xml".

Agrega el siguiente código al archivo XML que has creado.


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements/>
</Application>

Paso 2: Declarar un color en segundo plano

Obligatorio
Especifícalo como un valor hexadecimal RGB o una de las siguientes cadenas predefinidas:
- negro
- plateado
- gris
- blanco
- rojo oscuro
- rojo
- púrpura
- fucsia
- verde
- verde lima
- verde oliva
- amarillo
- azul marino
- azul
- verde azulado
- aguamarina

Aquí encontrarás ejemplos de ambas maneras de expresar el valor del color:


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="#FF0000"/>
</Application>


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="red"/>
</Application>

Paso 3: Declarar si se muestra el nombre de la aplicación en el icono

Obligatorio
El atributo ShowNameOnSquare150x150Logo tiene dos posibles valores:
- "on" para mostrar el nombre
- "off" para ocultar el nombre
Solo el tamaño de icono mediano (150x150) puede mostrar el nombre de una aplicación.

El nombre de la aplicación es el nombre del archivo de acceso directo del menú Inicio de la aplicación o de su archivo ejecutable, en caso de que no exista el primero.


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="#FF0000"
        ShowNameOnSquare150x150Logo="on"/>
</Application>

Paso 4: Declarar un color de texto en primer plano

Obligatorio, incluso cuando ShowNameOnSquare150x150Logo="off"
Hace referencia al nombre de la aplicación en el icono.
El atributo ForegroundText tiene dos posibles valores:
- "light" para un texto blanco
- "dark" para un texto negro

Elige el valor que mejor se muestre en el color de fondo declarado. Para obtener la máxima visibilidad y accesibilidad, intenta que la relación de luminancia sea al menos de 4,5:1 entre el color del texto y el color de fondo. Para obtener más información, consulta el estándar de accesibilidad W3C, G18: asegurarse de que exista una relación de contraste de al menos 4.5:1 entre el texto (e imágenes de texto) y el fondo que se encuentra detrás de él.


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="#FF0000"
        ShowNameOnSquare150x150Logo="on"
        ForegroundText="light"/>
</Application>

Paso 5: Especificar imágenes

Opcional
Suministra imágenes sin bordes para reemplazar el icono y el fondo predeterminados
Solo se admiten los tamaños de icono mediano (150x150) y pequeño (70x70)
Se aplican las restricciones normales a las imágenes de icono:
- Dimensiones iguales o inferiores a 1024x1024 píxeles
- Tamaño de archivo inferior o igual a 200 KB
- Tipo de archivo .png, .jpg, .jpeg o .gif

Importante Si eliges una imagen personalizada, debes especificar una imagen para ambos atributos Square150x150Logo y Square70x70Logo. Si especificas solo uno de estos atributos, se omitirá todo este archivo XML y se aplicará el estilo predeterminado (fondo e icono de la aplicación) al icono.

Los procedimientos recomendados del diseño de iconos especifican que si el icono no es dinámico, no debería reclamar el espacio de pantalla extra requerido para los iconos anchos (310 x 150) y grandes (310 x 310). Como el icono de una aplicación de escritorio siempre es estático y nunca dinámico, esos tamaños de icono adicionales no se admiten en este esquema.

En este ejemplo, las imágenes se encuentran en una carpeta denominada "Assets", que es del mismo nivel que el archivo YourAppName.VisualElementsManifest.xml. Estos nombres de archivo pueden ser nombres auténticos o nombres genéricos usados para los archivos escalados, de alto contraste o localizados descritos en el paso 6. Consulta la sección Comentarios para obtener una descripción de la asignación de nombres a activos de imagen.


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="#FF0000"
        ShowNameOnSquare150x150Logo="on"
        ForegroundText="light"
        Square150x150Logo="Assets\150x150Logo.png"
        Square70x70Logo="Assets\70x70Logo.png"/>
</Application>

Este es tu archivo .VisualElementsManifest.xml completo. Incluye este archivo en la instalación de tu aplicación en el mismo nivel que el archivo ejecutable de la aplicación.

Paso 6: Especificar imágenes para escalado, localización y alto contraste

Opcional aunque recomendado
Si no proporcionas imágenes escaladas, de alto contrate o localizadas, puedes omitir este paso
Para obtener la máxima calidad de presentación, proporciona un conjunto completo de activos escalados para cada imagen especificada en el paso 5. Consulta la sección Comentarios para más información.
Usa convenciones de nomenclatura del sistema de administración de recursos normales y el archivo Resource.pri

Nota Si no proporcionas un conjunto completo de activos escalados, Windows escalará el activo o los activos que has incluido según sea necesario. Es mejor incluir uno de los tamaños más grandes (140% o 180%), porque disminuir la escala normalmente da mejores resultados que aumentarla.

En función de la configuración del sistema que esté activa cuando se actualice el icono, Windows usará un archivo Resources.pri para elegir el activo de imagen correcto para tu conjunto. Crearemos ese archivo en este paso.

Crea una carpeta de trabajo. Esta carpeta no se incluye en la instalación de la aplicación, solo se usa durante el proceso de creación del archivo Resources.pri. En este ejemplo, lo llamaremos "CreateResources".
```
md %USERPROFILE%\Documents\CreateResources
```
Crea un subdirectorio de CreateResources para guardar los archivos de imagen. En este ejemplo, lo llamaremos "Assets".
```
md %USERPROFILE%\Documents\CreateResources\Assets
```
Coloca tus imágenes escaladas, de alto contraste o localizadas en la carpeta "Assets". Puedes incluir tus imágenes como una lista sin formato o estructurada en subdirectorios, siempre que sigas las convenciones de nombres y estructura necesarias. Para este ejemplo, proporcionaremos los siguientes activos escalados y de alto contraste como una lista sin formato.
- 150x150Logo.scale-80.png
- 150x150Logo.scale-100.png
- 150x150Logo.scale-140.png
- 150x150Logo.scale-180.png
- 70x70Logo.scale-80.png
- 70x70Logo.scale-100.png
- 70x70Logo.scale-140.png
- 70x70Logo.scale-180.png
- 150x150Logo.scale-80_contrast-white.png
- 150x150Logo.scale-100_contrast-white.png
- 150x150Logo.scale-140_contrast-white.png
- 150x150Logo.scale-180_contrast-white.png
- 150x150Logo.scale-80_contrast-black.png
- 150x150Logo.scale-100_contrast-black.png
- 150x150Logo.scale-140_contrast-black.png
- 150x150Logo.scale-180_contrast-black.png
- 70x70Logo.scale-80_contrast-white.png
- 70x70Logo.scale-100_contrast-white.png
- 70x70Logo.scale-140_contrast-white.png
- 70x70Logo.scale-180_contrast-white.png
- 70x70Logo.scale-80_contrast-black.png
- 70x70Logo.scale-100_contrast-black.png
- 70x70Logo.scale-140_contrast-black.png
- 70x70Logo.scale-180_contrast-black.png

Crea un archivo de configuración MakePRI. Se trata de un archivo XML que MakePRI.exe usa para especificar qué imágenes se indexan en Resources.pri. Ejecuta el siguiente comando para crear el archivo de configuración, al que llamaremos "TestAppConfig.xml". Observa que no escribiremos ese archivo en nuestra carpeta CreateResources. Esto impide que el propio archivo de configuración se incluya en el índice.

Importante La herramienta de línea de comandos MakePRI.exe se incluye en Windows SDK, y puede descargarse de forma gratuita. Si usas Microsoft Visual Studio, probablemente MakePRI.exe ya está en tu sistema como parte de dicha instalación.

Este comando y el siguiente requieren dan por hecho que la ubicación de MakePRI.exe está en la ruta de acceso. Si no es así, búscalo en "Archivos de programa\Windows Kits" e incluye su ruta completa en estos comandos.


makepri createconfig /cf %USERPROFILE%\Documents\TestAppConfig.xml /dq lang-en-US_scale-100_contrast-high

Argumento de los comandos	Definición
/cf	Ruta de acceso y nombre del archivo de configuración que estás creando
/dq	Calificadores predeterminados. Se necesita al menos un calificador (lang, scale, etc.).

Crea el archivo Resources.pri. Ejecuta el siguiente comando, que usa el archivo de configuración TestAppConfig.xml que creaste para el archivo Resources.pri en el directorio CreateResources.


makepri new /pr %USERPROFILE%\Documents\CreateResources /cf %USERPROFILE%\Documents\TestAppConfig.xml /in TestApp /of %USERPROFILE%\Documents\CreateResources\Resources.pri

Argumento de los comandos	Definición
/pr	Ubicación raíz de los archivos de proyecto
/cf	Ruta de acceso del archivo XML de configuración
/in	Nombre del índice de los recursos dentro del archivo Resources.pri. Normalmente coincide con el nombre de la aplicación.
/of	Ubicación de salida del archivo Resources.pri. Si se omite, se usa la raíz del proyecto especificada con el argumento /pr.

Incluye el archivo Resources.pri en la instalación de tu aplicación. Colócalo en el mismo directorio que el archivo .exe de la aplicación y su archivo .VisualElementsManifest.xml. Durante la instalación, coloca .VisualElementsManifest.xml en su lugar antes de instalar el archivo de acceso directo de la aplicación.

Paso 7: Importante Actualizar el archivo de acceso directo

Si la aplicación ya está instalada, debes desplazar el acceso directo después de ubicar el archivo .VisualElementsManifest.xml nuevo o actualizado para evitar que el primero se omita. El siguiente ejemplo de comandos de Windows PowerShell para la aplicación ficticia de Contoso es modelo de una de las tantas maneras de lograr esto.


(ls "$env:programdata\microsoft\windows\start menu\programs\contoso.lnk").lastwritetime = get-date

Observaciones

Importante Si algo no encaja con el archivo .VisualElementsManifest.xml, el icono se revierte al predeterminado de Windows. Algunos errores de archivo pueden ser un archivo XML no válido, la omisión de atributos obligatorios, valores de atributos no válidos o imágenes que no pueden ubicarse.

Puedes usar el archivo MakePRI.exe con la opción de comando dump para examinar el contenido del archivo Resources.pri. Esto puede ser útil para la solución de problemas. Para obtener más información sobre la herramienta MakePRI.exe, consulta Configuración de MakePRI.exe y Opciones del comando MakePRI.exe.

Para solucionar problemas, también puedes examinar el Visor de eventos para el evento 28032 del registro Application and Services Logs\Microsoft\Windows\Shell-Core\Operational. Los datos de detalles del evento incluyen la ruta de acceso del archivo .VisualElementsManifest.xml, el código de error HRESULT, y una cadena de error, si existe.

Trabajar con el sistema de administración de recursos

Aunque queda fuera del ámbito de este tema explicar los detalles del sistema de administración de recursos, ofreceremos una breve introducción. Para obtener información más detallada, lee los temas sobre el sistema de administración de recursos.

Un conjunto completo de imágenes de recursos incluye lo siguiente:

Una imagen diferente para cada meseta de escalado de ppp (80%, 100%, 140% y 180%)
Versiones de alto contraste (blanco sobre negro y negro sobre blanco) de cada imagen
Imágenes localizadas si quieres que el icono use una imagen distinta en función del idioma del sistema, como cuando la imagen contiene texto.

Puedes suministrar todas estas imágenes o solo un subconjunto.

Los nombres de archivo seguirán el modelo name.scale-100.ext, name.scale-100_contrast-black.ext, etc. También puedes proporcionar calificadores mediante una estructura de directorios en lugar de en el nombre del archivo. Sin embargo, en el archivo .VisualElementsManifest.xml, solo debes referirte al name raíz del archivo. Por ejemplo, podrías proporcionar estos archivos para el tamaño de icono mediano:

70x70Logo.scale-80.png
70x70Logo.scale-100.png
70x70Logo.scale-140.png
70x70Logo.scale-180.png
70x70Logo.scale-80_contrast-white.png
70x70Logo.scale-100_contrast-white.png
70x70Logo.scale-140_contrast-white.png
70x70Logo.scale-180_contrast-white.png
70x70Logo.scale-80_contrast-black.png
70x70Logo.scale-100_contrast-black.png
70x70Logo.scale-140_contrast-black.png
70x70Logo.scale-180_contrast-black.png

Sin embargo, en el archivo .VisualElementsManifest.xml, solo haces referencia a "70x70Logo.png" como en el ejemplo. En función de la configuración del sistema actual, Windows usa el archivo Resources.pri para seleccionar la versión correcta del archivo 70x70Logo de entre todas las opciones enumeradas. Para obtener un tutorial completo de las convenciones de nombres que hacen que este sistema funcione, consulta Inicio rápido: Usar recursos de imagen o archivo.

XSD de personalización de iconos para aplicaciones de escritorio

Aquí se muestra el XSD del esquema usado en la personalización de iconos para aplicaciones de escritorio.


<xs:schema attributeFormDefault="unqualified" elementFormDefault="qualified"  
           xmlns:xs="http://www.w3.org/2001/XMLSchema">  
  
    <xs:simpleType name="st_nonemptystring">  
        <xs:restriction base="xs:string">  
            <xs:minLength value="1"/>  
            <xs:maxLength value="32767"/>  
            <xs:pattern value="[^\s]|([^\s].*[^\s])"/>  
        </xs:restriction>  
    </xs:simpleType>  
    
    <xs:simpleType name="st_filenamecharset">  
        <xs:restriction base="st_nonemptystring">  
            <xs:pattern value=&quot;[^&lt;&gt;&quot;:%\|\?\*]+&quot;/>  
        </xs:restriction>  
    </xs:simpleType>  
  
    <xs:simpleType name="st_filename">  
        <xs:restriction base="st_filenamecharset">  
            <xs:pattern value="([^/\\]*[^./\\]+)(\\[^/\\]*[^./\\]+)*"/>  
            <xs:pattern value="([^/\\]*[^./\\]+)(/[^/\\]*[^./\\]+)*"/>  
            <xs:maxLength value="256"/>  
        </xs:restriction>  
    </xs:simpleType>  
  
    <xs:simpleType name="st_imagefile">  
        <xs:restriction base="st_filename">  
            <xs:pattern value=".+\.((jpg)|(png)|(jpeg)|(gif))"/>  
        </xs:restriction>  
    </xs:simpleType>  
  
    <xs:simpleType name="st_color">  
        <xs:restriction base="xs:string">  
            <xs:pattern value="#[\da-fA-F]{6}"/>  
            <xs:pattern value="black|silver|gray|white|maroon|red|purple|fuchsia|green|lime|olive|yellow|navy|blue|teal|aqua"/>  
        </xs:restriction>  
    </xs:simpleType>  
  
    <xs:simpleType name="st_foregroundtext">  
        <xs:restriction base="xs:string">  
            <xs:enumeration value="light"/>  
            <xs:enumeration value="dark"/>  
        </xs:restriction>  
    </xs:simpleType>  

    <xs:simpleType name="st_showname">
        <xs:restriction base="xs:string">
            <xs:enumeration value="on"/>
            <xs:enumeration value="off"/>
        </xs:restriction>
    </xs:simpleType>
  
    <xs:complexType name="ct_visualelements">
        <xs:attribute name="Square150x150Logo" type="st_imagefile" use="optional"/>  
        <xs:attribute name="Square70x70Logo" type="st_imagefile" use="optional"/>
        <xs:attribute name="ForegroundText" type="st_foregroundtext" use="required"/>  
        <xs:attribute name="BackgroundColor" type="st_color" use="required"/>
        <xs:attribute name="ShowNameOnSquare150x150Logo" type="st_showname" use="required"/>  
    </xs:complexType>  
  
    <xs:complexType name="ct_application">  
        <xs:all>  
            <xs:element name="VisualElements" type="ct_visualelements" />  
        </xs:all>  
    </xs:complexType>  
  
    <xs:element name="Application" type="ct_application" />  
  
</xs:schema>