Manually Adding a Custom Icon to the Manifest.xml File

The simplest way to add a custom icon for the Hybrid App package is by using the packaging tool, but you can also manually update the manifest.xml file to include a custom icon.

1. Open manifest.xml for editing.
2. Specify the custom icon image files in the <Icons></Icons> section of the file, for example:
   The <Icons> element should be added under the root <Manifest> node.

   <Icons>       
      <Icon width="32" height="32" type="png" name="ambulance" />       
      <Icon width="64" height="64" type="png" name="ambulance" />       
      <Icon width="32" height="32" type="png" name="car" path="html/car.png" processedpath=”html/carp.png”/>       
      <Icon width="32" height="32" type="png" name="train" path="html/train.png" />       
      <Icon width="48" height="48" type="gif" name="van" path="html/image/van.gif" processedpath=”html/image/vanp.gif”/>   
   </Icons> 

   The unique key of the icon element in the Icons collection is the combination of width, height, type, and name.

   • width – (required) indicates the width of the image.
   • height – (required) indicates the height of the image.
   • type – (required) indicates the image type. The value should be same as image file suffix.
   • name – (required) indicates the name of the icon. You can set it as an empty string.
   • path – (optional) indicates the path of the normal icon image saved in the package. If the path attribute is missing or empty, the image for the normal icon is saved in the html\icon folder. The image file name is a combination of name, width, height and type. For example, the above ambulance icon file path is html/icon/ambulance32x32.png.
   • processedpath – (optional) indicates the path of the processed icon image saved in the package. If the processedpath attribute is missing or empty, the image for the processed icon is saved in the html\icon folder. The image file name is a combination of name, width, height and type with the letter p appended. For example, the above ambulance processed icon file path is html/icon/ambulance32x32p.png.
   Certain image formats, such as .ico files, might contain multiple resolutions in a single image file. Make sure that the manifest.xml file includes multiple entries for each of the different resolutions that all point to the same file through the path and processedpath attributes, as shown below:

    <Icons>    
   <Icon width="32" height="32" type="ico"  name="car" path="html/car.ico"    processedpath=”html/carp.ico”>
   <Icon width="64" height="64" type="ico"  name="car" path="html/car.ico"    processedpath=”html/carp.ico”>    
   <Icon width="128" height="128" type="ico"  name="car" path="html/car.ico"    processedpath=”html/carp.ico”>            
   </Icons> 

   When there are multiple icon files declared, the Hybrid Web Container chooses the best matched icon based on the device's capability.

3. Add the icon file reference under the <HtmlFiles> element, for example: 
   <HtmlFile>html/icon/ambulance32x32.png</HtmlFile>
4. Save the manifest.xml file.