| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
| <meta name="format-detection" content="telephone=no"> |
| <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" /> |
| <meta name="description" content="Learn how to customize icons for your Cordova application. "> |
| |
| <title> |
| |
| |
| Customize app icons - Apache Cordova |
| |
| |
| </title> |
| |
| <link rel="SHORTCUT ICON" href="/favicon.ico"/> |
| |
| |
| |
| |
| |
| |
| <link rel="canonical" href="https://cordova.apache.org/docs/en/10.x/config_ref/images.html"> |
| |
| <!-- CSS --> |
| <link rel="stylesheet" type="text/css" href="/static/css/main.css"> |
| <link rel="stylesheet" type="text/css" href="/static/css/lib/syntax.css"> |
| |
| <!-- Fonts --> |
| <!-- For attribution information, see www/attributions.html --> |
| <link href='https://fonts.googleapis.com/css?family=Raleway:700,400,300,700italic,400italic,300italic' rel='stylesheet' type='text/css'> |
| |
| <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> |
| <!--[if lt IE 9]> |
| <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> |
| <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> |
| <![endif]--> |
| <script type="text/javascript"> |
| var disqus_developer = 1; // this would set it to developer mode |
| </script> |
| |
| <!-- JS --> |
| <script defer type="text/javascript" src="/static/js/lib/jquery-2.1.1.min.js"></script> |
| <script defer type="text/javascript" src="/static/js/lib/bootstrap.min.js"></script> |
| |
| <!-- Matomo --> |
| <script> |
| var _paq = window._paq = window._paq || []; |
| /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ |
| _paq.push(['trackPageView']); |
| _paq.push(['enableLinkTracking']); |
| (function() { |
| var u="https://analytics.apache.org/"; |
| _paq.push(['setTrackerUrl', u+'matomo.php']); |
| _paq.push(['setSiteId', '16']); |
| var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; |
| g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); |
| })(); |
| </script> |
| <!-- End Matomo Code --> |
| |
| |
| </head> |
| |
| <body> |
| <header> |
| <a class="scroll-point pt-top" name="top"></a> |
| <nav class="navbar navbar-inverse navbar-fixed-top"> |
| <div class="container-fluid"> |
| <div class="navbar-header"> |
| <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> |
| <span class="sr-only">Toggle navigation</span> |
| <span class="icon-bar"></span> |
| <span class="icon-bar"></span> |
| <span class="icon-bar"></span> |
| </button> |
| <a class="navbar-brand" href="/"><img id="logo_top" src="/static/img/cordova-logo-newbrand.svg"/></a> |
| </div> |
| <div id="navbar" class="navbar-collapse collapse"> |
| <div class="nav_bar_center"> |
| <ul class="nav navbar-nav"> |
| <li class="active"> |
| <a href="/docs/en/latest/">Documentation</a> |
| </li> |
| <li > |
| <a href="/plugins">Plugins</a> |
| </li> |
| <li > |
| <a href="/blog" id="blog_button">Blog<span class="badge" id="new_blog_count"></span></a> |
| </li> |
| <li > |
| <a href="/contribute">Contribute</a> |
| </li> |
| <li > |
| <a href="/contribute/team.html">Team</a> |
| </li> |
| <li> |
| <a href="/#getstarted">Get Started</a> |
| </li> |
| <li> |
| <form class="navbar-form navbar-right" id="header-search-form" role="search"> |
| <div class="input-group"> |
| |
| </div> |
| </form> |
| </li> |
| </ul> |
| </div> |
| </div><!--/.navbar-collapse --> |
| </div> |
| </nav> |
| <div id="_fixed_navbar_spacer" style="padding-top:50px"></div> |
| </header> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <div class="docs"> |
| |
| <!-- Table of Contents --> |
| <div class="hidden-xs hidden-sm site-toc-container"> |
| <ul class="site-toc"> |
| |
| |
| <li> |
| |
| <span class="toc-section-heading"> |
| Introduction |
| </span> |
| |
| |
| |
| |
| |
| |
| <ul class="site-toc"> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/overview/index.html"> |
| Overview |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| </ul> |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <span class="toc-section-heading"> |
| Create apps |
| </span> |
| |
| |
| |
| |
| |
| |
| <ul class="site-toc"> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/cli/index.html"> |
| Create your first app |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/cli/template.html"> |
| Templates for apps |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/support/index.html"> |
| Platform support |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <span class="toc-section-heading"> |
| Develop for platforms |
| </span> |
| |
| |
| |
| |
| |
| |
| <ul class="site-toc"> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/platforms/android/index.html"> |
| Android |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/platforms/ios/index.html"> |
| iOS |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/platforms/windows/index.html"> |
| Windows |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/platforms/osx/index.html"> |
| OS X |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/platforms/electron/index.html"> |
| Electron |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| </ul> |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/platform_plugin_versioning_ref/index.html"> |
| Manage versions and platforms |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/platform_pinning/index.html"> |
| Platform pinning |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="this-page" href="/docs/en/10.x/config_ref/images.html"> |
| Customize icons |
| </a> |
| |
| <span class="entry-highlight"></span> |
| |
| |
| |
| |
| <div id="page-toc" class="page-toc"></div> |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/cordova/storage/storage.html"> |
| Store data |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/appdev/privacy/index.html"> |
| Manage privacy |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/appdev/security/index.html"> |
| Manage security |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/appdev/allowlist/index.html"> |
| Allow List |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| </ul> |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <span class="toc-section-heading"> |
| Create plugins |
| </span> |
| |
| |
| |
| |
| |
| |
| <ul class="site-toc"> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/hybrid/plugins/index.html"> |
| Create a plugin |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <span class="toc-section-heading"> |
| Develop for platforms |
| </span> |
| |
| |
| |
| |
| |
| |
| <ul class="site-toc"> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/platforms/android/plugin.html"> |
| Android |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/platforms/ios/plugin.html"> |
| iOS |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/platforms/windows/plugin.html"> |
| Windows |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| </ul> |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/plugin_ref/plugman.html"> |
| Use Plugman |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| </ul> |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <span class="toc-section-heading"> |
| Advanced Topics |
| </span> |
| |
| |
| |
| |
| |
| |
| <ul class="site-toc"> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/hybrid/webviews/index.html"> |
| Embed Cordova in native apps |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/next/index.html"> |
| Next Steps |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| </ul> |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <span class="toc-section-heading"> |
| Reference |
| </span> |
| |
| |
| |
| |
| |
| |
| <ul class="site-toc"> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/config_ref/index.html"> |
| Config.xml |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/cordova/events/events.html"> |
| Events |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/reference/cordova-cli/index.html"> |
| CLI Reference |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/appdev/hooks/index.html"> |
| Hooks |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/plugin_ref/spec.html"> |
| Plugin.xml |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <span class="toc-section-heading"> |
| Plugin APIs |
| </span> |
| |
| |
| |
| |
| |
| |
| <ul class="site-toc"> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-battery-status/index.html"> |
| Battery Status |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-camera/index.html"> |
| Camera |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-device/index.html"> |
| Device |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-dialogs/index.html"> |
| Dialogs |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-file/index.html"> |
| File |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-geolocation/index.html"> |
| Geolocation |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-inappbrowser/index.html"> |
| Inappbrowser |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-media/index.html"> |
| Media |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-media-capture/index.html"> |
| Media Capture |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-network-information/index.html"> |
| Network Information |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-screen-orientation/index.html"> |
| Screen Orientation |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-splashscreen/index.html"> |
| Splashscreen |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-statusbar/index.html"> |
| Statusbar |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-vibration/index.html"> |
| Vibration |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| </ul> |
| |
| |
| </li> |
| |
| </ul> |
| |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <!-- Page content --> |
| <div class="page-content-container"> |
| <div class="page-content"> |
| <div class="content-header"> |
| |
| <!-- ToC Dropdown (for XS and SM sizes only) --> |
| <div class="toc-dropdown dropdown visible-xs-block visible-sm-block"> |
| <button class="btn btn-default dropdown-toggle" type="button" id="tocDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> |
| Table of Contents |
| <span class="caret"></span> |
| </button> |
| <ul class="dropdown-menu"> |
| |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/overview/index.html"> |
| Overview |
| </a> |
| </li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/cli/index.html"> |
| Create your first app |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/cli/template.html"> |
| Templates for apps |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/support/index.html"> |
| Platform support |
| </a> |
| </li> |
| |
| |
| |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/platforms/android/index.html"> |
| Android |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/platforms/ios/index.html"> |
| iOS |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/platforms/windows/index.html"> |
| Windows |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/platforms/osx/index.html"> |
| OS X |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/platforms/electron/index.html"> |
| Electron |
| </a> |
| </li> |
| |
| |
| |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/platform_plugin_versioning_ref/index.html"> |
| Manage versions and platforms |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/platform_pinning/index.html"> |
| Platform pinning |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="this-page" href="/docs/en/10.x/config_ref/images.html"> |
| Customize icons |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/cordova/storage/storage.html"> |
| Store data |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/appdev/privacy/index.html"> |
| Manage privacy |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/appdev/security/index.html"> |
| Manage security |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/appdev/allowlist/index.html"> |
| Allow List |
| </a> |
| </li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/hybrid/plugins/index.html"> |
| Create a plugin |
| </a> |
| </li> |
| |
| |
| |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/platforms/android/plugin.html"> |
| Android |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/platforms/ios/plugin.html"> |
| iOS |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/platforms/windows/plugin.html"> |
| Windows |
| </a> |
| </li> |
| |
| |
| |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/plugin_ref/plugman.html"> |
| Use Plugman |
| </a> |
| </li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/hybrid/webviews/index.html"> |
| Embed Cordova in native apps |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/next/index.html"> |
| Next Steps |
| </a> |
| </li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/config_ref/index.html"> |
| Config.xml |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/cordova/events/events.html"> |
| Events |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/reference/cordova-cli/index.html"> |
| CLI Reference |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/appdev/hooks/index.html"> |
| Hooks |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/plugin_ref/spec.html"> |
| Plugin.xml |
| </a> |
| </li> |
| |
| |
| |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-battery-status/index.html"> |
| Battery Status |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-camera/index.html"> |
| Camera |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-device/index.html"> |
| Device |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-dialogs/index.html"> |
| Dialogs |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-file/index.html"> |
| File |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-geolocation/index.html"> |
| Geolocation |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-inappbrowser/index.html"> |
| Inappbrowser |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-media/index.html"> |
| Media |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-media-capture/index.html"> |
| Media Capture |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-network-information/index.html"> |
| Network Information |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-screen-orientation/index.html"> |
| Screen Orientation |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-splashscreen/index.html"> |
| Splashscreen |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-statusbar/index.html"> |
| Statusbar |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-vibration/index.html"> |
| Vibration |
| </a> |
| </li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| </ul> |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a class="edit" href="https://github.com/apache/cordova-docs/tree/master/www/docs/en/10.x/config_ref/images.md"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> </a> |
| |
| |
| |
| <!-- Version dropdown --> |
| <div class="dropdown"> |
| <button class="btn btn-default dropdown-toggle" type="button" id="versionDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> |
| 10.x |
| |
| <span class="caret"></span> |
| </button> |
| <ul class="dropdown-menu" aria-labelledby="versionDropdown"> |
| |
| <!-- List versions available in this language --> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/dev/" class="missing-page"> |
| |
| |
| dev |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/latest/" class="missing-page"> |
| |
| |
| 12.x |
| |
| (Latest) |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/11.x/" class="missing-page"> |
| |
| |
| 11.x |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/10.x/" class="missing-page"> |
| |
| <span class="selected"> |
| |
| 10.x |
| |
| |
| </span> |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/9.x/" class="missing-page"> |
| |
| |
| 9.x |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/8.x/" class="missing-page"> |
| |
| |
| 8.x |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/7.x/" class="missing-page"> |
| |
| |
| 7.x |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/6.x/" class="missing-page"> |
| |
| |
| 6.x |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/5.4.0/" class="missing-page"> |
| |
| |
| 5.4.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/5.1.1/" class="missing-page"> |
| |
| |
| 5.1.1 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/5.0.0/" class="missing-page"> |
| |
| |
| 5.0.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/4.0.0/" class="missing-page"> |
| |
| |
| 4.0.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/3.6.0/" class="missing-page"> |
| |
| |
| 3.6.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/3.5.0/" class="missing-page"> |
| |
| |
| 3.5.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/3.4.0/" class="missing-page"> |
| |
| |
| 3.4.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/3.3.0/" class="missing-page"> |
| |
| |
| 3.3.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/3.2.0/" class="missing-page"> |
| |
| |
| 3.2.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/3.1.0/" class="missing-page"> |
| |
| |
| 3.1.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/3.0.0/" class="missing-page"> |
| |
| |
| 3.0.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/2.9.0/" class="missing-page"> |
| |
| |
| 2.9.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/2.8.0/" class="missing-page"> |
| |
| |
| 2.8.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/2.7.0/" class="missing-page"> |
| |
| |
| 2.7.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/2.6.0/" class="missing-page"> |
| |
| |
| 2.6.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/2.5.0/" class="missing-page"> |
| |
| |
| 2.5.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/2.4.0/" class="missing-page"> |
| |
| |
| 2.4.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/2.3.0/" class="missing-page"> |
| |
| |
| 2.3.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/2.2.0/" class="missing-page"> |
| |
| |
| 2.2.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/2.1.0/" class="missing-page"> |
| |
| |
| 2.1.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/2.0.0/" class="missing-page"> |
| |
| |
| 2.0.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/1.9.0/" class="missing-page"> |
| |
| |
| 1.9.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/1.8.1/" class="missing-page"> |
| |
| |
| 1.8.1 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/1.8.0/" class="missing-page"> |
| |
| |
| 1.8.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/1.7.0/" class="missing-page"> |
| |
| |
| 1.7.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/1.6.1/" class="missing-page"> |
| |
| |
| 1.6.1 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/1.6.0/" class="missing-page"> |
| |
| |
| 1.6.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/1.5.0/" class="missing-page"> |
| |
| |
| 1.5.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| </ul> |
| </div> |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| <!-- Show warnings for special versions --> |
| <!-- dev warning --> |
| |
| |
| <!-- outdated warning --> |
| |
| <div class="alert docs-alert alert-danger" role="alert"> |
| <button type="button" class="close" data-dismiss="alert" aria-label="Close"> |
| <span aria-hidden="true">×</span> |
| </button> |
| This version of the documentation is outdated! |
| <a href="/docs/en/latest/"> |
| Click here for the latest released version. |
| </a> |
| </div> |
| |
| |
| <!-- plugin version warning --> |
| |
| |
| <div id="page-toc-source"> |
| <svg xmlns="http://www.w3.org/2000/svg" hidden="" style="display: none !important"><symbol id="browser" viewBox="461.6 9.3 30 30"><path d="M476.7 10.3c-7.7 0-14 6.3-14 14s6.3 14 14 14 14-6.3 14-14-6.3-14-14-14m9.8 9h-5.1c-.3-2.1-.8-4-1.4-5.5 2.8.9 5.1 2.9 6.5 5.5m-6.8 5-.1 3h-5.8l-.1-3 .1-3h5.8l.1 3m-3 11h-.9c-.6-1.1-1.4-3.1-1.8-6h5.3c-.4 2.9-1.1 4.8-1.8 6h-.8m-2.7-16c.4-2.9 1.1-4.8 1.8-6h1.8c.6 1.1 1.4 3.1 1.8 6H474zm-.6-5.5c-.6 1.5-1.1 3.4-1.4 5.5h-5.1c1.3-2.6 3.6-4.6 6.5-5.5m-7.3 7.5h5.7l-.1 3 .1 3h-5.7c-.3-1-.4-2-.4-3s.1-2 .4-3m.8 8h5.1c.3 2.1.8 4 1.4 5.5-2.9-.9-5.2-2.9-6.5-5.5m13.1 5.5c.6-1.5 1.1-3.4 1.4-5.5h5.1a11.4 11.4 0 0 1-6.5 5.5m7.2-7.5h-5.7l.1-3-.1-3h5.7c.3 1 .4 2 .4 3 .1 1.1-.1 2.1-.4 3" /></symbol><symbol id="android" viewBox="0 0 553 553"><path d="M76.8 179.1a33 33 0 0 0-24.3 10 32.6 32.6 0 0 0-10 24V356a33 33 0 0 0 10 24.2 33 33 0 0 0 24.3 10 32 32 0 0 0 24-10 33.3 33.3 0 0 0 9.9-24.2V213c0-9.3-3.3-17.2-10-23.9a32.6 32.6 0 0 0-24-10zM352 50.8l23.6-43.5c1.5-2.9 1-5-1.7-6.6-2.9-1.4-5-.7-6.6 2l-24 43.8c-21-9.3-43.3-14-66.8-14s-45.7 4.7-66.8 14L185.8 2.7c-1.6-2.7-3.8-3.4-6.7-2-2.6 1.5-3.2 3.7-1.6 6.6L201 50.8c-24 12.2-43 29.2-57.2 51a128.9 128.9 0 0 0-21.2 71.7H430c0-26-7.1-49.8-21.3-71.6a146.3 146.3 0 0 0-56.8-51zm-136.5 63.4a12.5 12.5 0 0 1-9.1 3.8 12.7 12.7 0 0 1-12.6-13c0-3.5 1.2-6.6 3.6-9.1 2.5-2.6 5.5-3.8 9-3.8s6.6 1.2 9.1 3.8c2.6 2.5 3.9 5.6 3.9 9.1 0 3.6-1.3 6.6-3.9 9.2zm140.1 0a12 12 0 0 1-9 3.8c-3.5 0-6.5-1.3-9-3.8a12.4 12.4 0 0 1-4-9.2c0-3.5 1.4-6.6 4-9.1a12 12 0 0 1 9-3.8 12 12 0 0 1 9 3.8c2.5 2.5 3.7 5.6 3.7 9.1 0 3.6-1.2 6.6-3.7 9.2zM124 406.8c0 10.2 3.5 18.8 10.6 26 7 7 15.7 10.6 26 10.6H185l.4 75.4c0 9.5 3.3 17.6 10 24.3s14.6 10 23.9 10c9.5 0 17.6-3.4 24.2-10s10-14.8 10-24.3v-75.4h45.8v75.4c0 9.5 3.4 17.6 10 24.3s14.7 10 24.3 10c9.5 0 17.6-3.4 24.2-10s10-14.8 10-24.3v-75.4h25a35 35 0 0 0 25.5-10.7 35 35 0 0 0 10.7-25.9V185.4H124v221.4zm352.3-227.7a33 33 0 0 0-24 9.8 32.5 32.5 0 0 0-10 24.1v143c0 9.5 3.4 17.6 10 24.2s14.7 10 24 10c9.5 0 17.6-3.3 24.2-10s10-14.7 10-24.2V213a32 32 0 0 0-10-24 33.3 33.3 0 0 0-24.2-9.9z" /></symbol><symbol id="ios" viewBox="0 0 512 512"><path d="M410 334s-10 29-30 59c-5 9-29 43-58 43-21 0-35-15-62-15-33 0-46 15-67 15-11 1-22-5-34-16-77-73-81-181-52-225 18-29 48-47 81-48 26 0 54 17 65 17 8 0 50-20 74-18 33 3 56 15 73 38-49 24-66 117 10 150zM329 56c8 32-27 93-79 90-3-43 34-87 79-90z" /></symbol><symbol id="electron" viewBox="0 0 256 256"><path d="M100.5 71.69c-26-4.74-46.57.22-54.76 14.41-6.12 10.6-4.37 24.64 4.24 39.65a2.67 2.67 0 1 0 4.63-2.65c-7.76-13.52-9.27-25.64-4.25-34.33 6.8-11.79 25.15-16.21 49.19-11.83a2.67 2.67 0 0 0 .95-5.25zm-37 72.3c10.52 11.56 24.18 22.4 39.76 31.4 37.72 21.78 77.88 27.6 97.67 14.1a2.67 2.67 0 1 0-3-4.4c-17.72 12.07-55.86 6.54-92-14.32-15.12-8.73-28.35-19.23-38.48-30.36A2.67 2.67 0 1 0 63.5 144z" /><path d="M194.62 140.75c17.03-20.11 22.97-40.35 14.8-54.5-6.02-10.43-18.74-15.94-35.65-16.16a2.67 2.67 0 0 0-.07 5.34c15.2.2 26.17 4.94 31.1 13.48 6.79 11.76 1.49 29.8-14.25 48.4a2.67 2.67 0 1 0 4.07 3.44zm-43.76-68.17c-15.4 3.3-31.79 9.75-47.52 18.83-38.94 22.49-64.35 55.64-60.82 79.68a2.67 2.67 0 1 0 5.28-.78c-3.14-21.34 20.94-52.77 58.2-74.28 15.27-8.81 31.14-15.06 45.98-18.24a2.67 2.67 0 1 0-1.12-5.21z" /><path d="M87.77 187.75c8.9 24.86 23.47 40.17 39.85 40.17 11.94 0 23-8.14 31.61-22.48a2.67 2.67 0 1 0-4.57-2.75c-7.75 12.89-17.26 19.9-27.04 19.9-13.6 0-26.6-13.66-34.83-36.63a2.67 2.67 0 1 0-5.02 1.8zm81.32-4.86c4.61-14.73 7.09-31.72 7.09-49.42 0-44.18-15.47-82.27-37.49-92.05a2.67 2.67 0 0 0-2.16 4.88c19.64 8.72 34.31 44.86 34.31 87.17 0 17.17-2.4 33.63-6.84 47.83a2.67 2.67 0 1 0 5.1 1.59zm50.23-2.61a12.76 12.76 0 1 0-25.53 0 12.76 12.76 0 0 0 25.53 0zm-5.34 0a7.43 7.43 0 1 1-14.86 0 7.43 7.43 0 0 1 14.86 0zM48.5 193.04a12.76 12.76 0 1 0 0-25.52 12.76 12.76 0 0 0 0 25.52zm0-5.33a7.43 7.43 0 1 1 0-14.86 7.43 7.43 0 0 1 0 14.86z" /><path d="M127.62 54.44a12.76 12.76 0 1 0 0-25.52 12.76 12.76 0 0 0 0 25.52zm0-5.33a7.43 7.43 0 1 1 0-14.86 7.43 7.43 0 0 1 0 14.86zm1.95 93.38a9.23 9.23 0 0 1-10.98-7.07 9.24 9.24 0 0 1 7.08-10.98 9.24 9.24 0 0 1 3.9 18.05z" /></symbol></svg> |
| |
| <h1>Customize Icons</h1> |
| |
| <p>This section shows how to configure an application's icon for various platforms. Documentation about splash screen images can be found in the Cordova-Plugin-Splashscreen documentation <a href="../reference/cordova-plugin-splashscreen/">Splashscreen plugin docs</a>.</p> |
| |
| <h2>Configuring Icons in the CLI</h2> |
| |
| <p>When working in the CLI you can define application icon(s) via the <code><icon></code> element (<code>config.xml</code>). |
| If you do not specify an icon, the Apache Cordova logo is used.</p> |
| |
| <div class="language-xml highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/ios/icon.png"</span> <span class="na">platform=</span><span class="s">"ios"</span> <span class="na">width=</span><span class="s">"57"</span> <span class="na">height=</span><span class="s">"57"</span> <span class="na">density=</span><span class="s">"mdpi"</span> <span class="nt">/></span> |
| </code></pre></div></div> |
| |
| <table> |
| <thead> |
| <tr> |
| <th>Attributes</th> |
| <th>Description</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td>src</td> |
| <td><em>Required</em> <br /> Location of the image file, relative to your project directory.</td> |
| </tr> |
| <tr> |
| <td>platform</td> |
| <td><em>Optional</em> <br /> Target platform</td> |
| </tr> |
| <tr> |
| <td>width</td> |
| <td><em>Optional</em> <br /> Icon width in pixels</td> |
| </tr> |
| <tr> |
| <td>height</td> |
| <td><em>Optional</em> <br /> Icon height in pixels</td> |
| </tr> |
| <tr> |
| <td>target</td> |
| <td><em>Optional</em> <br /> <svg class="platform-icon windows"><use href="#windows"></use></svg> <br /> Destination filename for the image file and all its MRT companions</td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <p>The following configuration can be used to define a single default icon |
| which will be used for all platforms.</p> |
| <div class="language-xml highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/icon.png"</span> <span class="nt">/></span> |
| </code></pre></div></div> |
| <p>For each platform, you can also define a pixel-perfect icon set to fit |
| different screen resolutions.</p> |
| |
| <h2>Android</h2> |
| |
| <p>On Android, instead of using a single image for an icon, you can use two images (background and foreground) to create an <strong>Adaptive Icon</strong>. To use Adaptive Icons, you need to have installed at least version 9.0.0 of <strong>Cordova</strong> and version 8.0.0 of <strong>Cordova-Android</strong>.</p> |
| |
| <table> |
| <thead> |
| <tr> |
| <th>Attributes</th> |
| <th>Description</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td>background</td> |
| <td><em>Required for Adaptive</em> <br /> Location of the image (png or vector) relative to your project directory, or color reference</td> |
| </tr> |
| <tr> |
| <td>foreground</td> |
| <td><em>Required for Adaptive</em> <br /> Location of the image (png or vector) relative to your project directory, or color reference</td> |
| </tr> |
| <tr> |
| <td>density</td> |
| <td><em>Required</em> <br /> Specified icon density</td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <h3>Adaptive Icons</h3> |
| |
| <p>To use the adaptive icons the <code>background</code> and <code>foreground</code> attributes must be defined in place of the <code>src</code> attribute. The <code>src</code> attribute is not used for adaptive icons.</p> |
| |
| <h4>Adaptive Icon with Images:</h4> |
| <div class="language-xml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><platform</span> <span class="na">name=</span><span class="s">"android"</span><span class="nt">></span> |
| <span class="nt"><icon</span> <span class="na">background=</span><span class="s">"res/icon/android/ldpi-background.png"</span> <span class="na">density=</span><span class="s">"ldpi"</span> <span class="na">foreground=</span><span class="s">"res/icon/android/ldpi-foreground.png"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">background=</span><span class="s">"res/icon/android/mdpi-background.png"</span> <span class="na">density=</span><span class="s">"mdpi"</span> <span class="na">foreground=</span><span class="s">"res/icon/android/mdpi-foreground.png"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">background=</span><span class="s">"res/icon/android/hdpi-background.png"</span> <span class="na">density=</span><span class="s">"hdpi"</span> <span class="na">foreground=</span><span class="s">"res/icon/android/hdpi-foreground.png"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">background=</span><span class="s">"res/icon/android/xhdpi-background.png"</span> <span class="na">density=</span><span class="s">"xhdpi"</span> <span class="na">foreground=</span><span class="s">"res/icon/android/xhdpi-foreground.png"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">background=</span><span class="s">"res/icon/android/xxhdpi-background.png"</span> <span class="na">density=</span><span class="s">"xxhdpi"</span> <span class="na">foreground=</span><span class="s">"res/icon/android/xxhdpi-foreground.png"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">background=</span><span class="s">"res/icon/android/xxxhdpi-background.png"</span> <span class="na">density=</span><span class="s">"xxxhdpi"</span> <span class="na">foreground=</span><span class="s">"res/icon/android/xxxhdpi-foreground.png"</span> <span class="nt">/></span> |
| <span class="nt"></platform></span> |
| </code></pre></div></div> |
| |
| <p><strong>Note:</strong> In this example, the foreground image will also be used as the fallback icon for Android devices that do not support the adaptive icons. The fallback icon can be overridden by setting the src attribute.</p> |
| |
| <h4>Adaptive Icon with Vectors:</h4> |
| <div class="language-xml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><platform</span> <span class="na">name=</span><span class="s">"android"</span><span class="nt">></span> |
| <span class="nt"><icon</span> <span class="na">background=</span><span class="s">"res/icon/android/ldpi-background.xml"</span> <span class="na">density=</span><span class="s">"ldpi"</span> <span class="na">foreground=</span><span class="s">"res/icon/android/ldpi-foreground.xml"</span> <span class="na">src=</span><span class="s">"res/android/ldpi.png"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">background=</span><span class="s">"res/icon/android/mdpi-background.xml"</span> <span class="na">density=</span><span class="s">"mdpi"</span> <span class="na">foreground=</span><span class="s">"res/icon/android/mdpi-foreground.xml"</span> <span class="na">src=</span><span class="s">"res/android/mdpi.png"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">background=</span><span class="s">"res/icon/android/hdpi-background.xml"</span> <span class="na">density=</span><span class="s">"hdpi"</span> <span class="na">foreground=</span><span class="s">"res/icon/android/hdpi-foreground.xml"</span> <span class="na">src=</span><span class="s">"res/android/hdpi.png"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">background=</span><span class="s">"res/icon/android/xhdpi-background.xml"</span> <span class="na">density=</span><span class="s">"xhdpi"</span> <span class="na">foreground=</span><span class="s">"res/icon/android/xhdpi-foreground.xml"</span> <span class="na">src=</span><span class="s">"res/android/xhdpi.png"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">background=</span><span class="s">"res/icon/android/xxhdpi-background.xml"</span> <span class="na">density=</span><span class="s">"xxhdpi"</span> <span class="na">foreground=</span><span class="s">"res/icon/android/xxhdpi-foreground.xml"</span> <span class="na">src=</span><span class="s">"res/android/xxhdpi.png"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">background=</span><span class="s">"res/icon/android/xxxhdpi-background.xml"</span> <span class="na">density=</span><span class="s">"xxxhdpi"</span> <span class="na">foreground=</span><span class="s">"res/icon/android/xxxhdpi-foreground.xml"</span> <span class="na">src=</span><span class="s">"res/android/xxxhdpi.png"</span> <span class="nt">/></span> |
| <span class="nt"></platform></span> |
| </code></pre></div></div> |
| |
| <p><strong>Note:</strong> In this example, the src attribute must be defined when then foreground attribute is defined with a vector or color.</p> |
| |
| <h4>Adaptive Icon with Colors:</h4> |
| <p>Create a <code>res/values/colors.xml</code> resource file in your project directory to store the app's color definitions.</p> |
| <div class="language-xml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><?xml version="1.0" encoding="utf-8"?></span> |
| <span class="nt"><resources></span> |
| <span class="nt"><color</span> <span class="na">name=</span><span class="s">"background"</span><span class="nt">></span>#FF0000<span class="nt"></color></span> |
| <span class="nt"></resources></span> |
| </code></pre></div></div> |
| |
| <p>In the <code>config.xml</code>, we will add <code>resource-file</code> to copy the <code>colors.xml</code> into the approprate location so that the colors are available during build time.</p> |
| |
| <div class="language-xml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><platform</span> <span class="na">name=</span><span class="s">"android"</span><span class="nt">></span> |
| <span class="nt"><resource-file</span> <span class="na">src=</span><span class="s">"res/values/colors.xml"</span> <span class="na">target=</span><span class="s">"/app/src/main/res/values/colors.xml"</span> <span class="nt">/></span> |
| |
| <span class="nt"><icon</span> <span class="na">background=</span><span class="s">"@color/background"</span> <span class="na">density=</span><span class="s">"ldpi"</span> <span class="na">foreground=</span><span class="s">"res/icon/android/ldpi-foreground.png"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">background=</span><span class="s">"@color/background"</span> <span class="na">density=</span><span class="s">"mdpi"</span> <span class="na">foreground=</span><span class="s">"res/icon/android/mdpi-foreground.png"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">background=</span><span class="s">"@color/background"</span> <span class="na">density=</span><span class="s">"hdpi"</span> <span class="na">foreground=</span><span class="s">"res/icon/android/hdpi-foreground.png"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">background=</span><span class="s">"@color/background"</span> <span class="na">density=</span><span class="s">"xhdpi"</span> <span class="na">foreground=</span><span class="s">"res/icon/android/xhdpi-foreground.png"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">background=</span><span class="s">"@color/background"</span> <span class="na">density=</span><span class="s">"xxhdpi"</span> <span class="na">foreground=</span><span class="s">"res/icon/android/xxhdpi-foreground.png"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">background=</span><span class="s">"@color/background"</span> <span class="na">density=</span><span class="s">"xxxhdpi"</span> <span class="na">foreground=</span><span class="s">"res/icon/android/xxxhdpi-foreground.png"</span> <span class="nt">/></span> |
| <span class="nt"></platform></span> |
| </code></pre></div></div> |
| |
| <h3>Standard Icons</h3> |
| |
| <div class="language-xml highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nt"><platform</span> <span class="na">name=</span><span class="s">"android"</span><span class="nt">></span> |
| <span class="c"><!-- |
| ldpi : 36x36 px |
| mdpi : 48x48 px |
| hdpi : 72x72 px |
| xhdpi : 96x96 px |
| xxhdpi : 144x144 px |
| xxxhdpi : 192x192 px |
| --></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/android/ldpi.png"</span> <span class="na">density=</span><span class="s">"ldpi"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/android/mdpi.png"</span> <span class="na">density=</span><span class="s">"mdpi"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/android/hdpi.png"</span> <span class="na">density=</span><span class="s">"hdpi"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/android/xhdpi.png"</span> <span class="na">density=</span><span class="s">"xhdpi"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/android/xxhdpi.png"</span> <span class="na">density=</span><span class="s">"xxhdpi"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/android/xxxhdpi.png"</span> <span class="na">density=</span><span class="s">"xxxhdpi"</span> <span class="nt">/></span> |
| <span class="nt"></platform></span> |
| </code></pre></div></div> |
| |
| <h3>See Also</h3> |
| <ul> |
| <li><a href="https://www.google.com/design/spec/style/icons.html">Android icon guide</a></li> |
| <li><a href="http://developer.android.com/guide/practices/screens_support.html">Android - Supporting multiple screens</a></li> |
| </ul> |
| |
| <h2>Browser</h2> |
| <p>Icons are not applicable to the Browser platform.</p> |
| |
| <h2>iOS</h2> |
| <div class="language-xml highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nt"><platform</span> <span class="na">name=</span><span class="s">"ios"</span><span class="nt">></span> |
| <span class="c"><!-- iOS 8.0+ --></span> |
| <span class="c"><!-- iPhone 6 Plus --></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/ios/icon-60@3x.png"</span> <span class="na">width=</span><span class="s">"180"</span> <span class="na">height=</span><span class="s">"180"</span> <span class="nt">/></span> |
| <span class="c"><!-- iOS 7.0+ --></span> |
| <span class="c"><!-- iPhone / iPod Touch --></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/ios/icon-60.png"</span> <span class="na">width=</span><span class="s">"60"</span> <span class="na">height=</span><span class="s">"60"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/ios/icon-60@2x.png"</span> <span class="na">width=</span><span class="s">"120"</span> <span class="na">height=</span><span class="s">"120"</span> <span class="nt">/></span> |
| <span class="c"><!-- iPad --></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/ios/icon-76.png"</span> <span class="na">width=</span><span class="s">"76"</span> <span class="na">height=</span><span class="s">"76"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/ios/icon-76@2x.png"</span> <span class="na">width=</span><span class="s">"152"</span> <span class="na">height=</span><span class="s">"152"</span> <span class="nt">/></span> |
| <span class="c"><!-- Spotlight Icon --></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/ios/icon-40.png"</span> <span class="na">width=</span><span class="s">"40"</span> <span class="na">height=</span><span class="s">"40"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/ios/icon-40@2x.png"</span> <span class="na">width=</span><span class="s">"80"</span> <span class="na">height=</span><span class="s">"80"</span> <span class="nt">/></span> |
| <span class="c"><!-- iOS 6.1 --></span> |
| <span class="c"><!-- iPhone / iPod Touch --></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/ios/icon.png"</span> <span class="na">width=</span><span class="s">"57"</span> <span class="na">height=</span><span class="s">"57"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/ios/icon@2x.png"</span> <span class="na">width=</span><span class="s">"114"</span> <span class="na">height=</span><span class="s">"114"</span> <span class="nt">/></span> |
| <span class="c"><!-- iPad --></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/ios/icon-72.png"</span> <span class="na">width=</span><span class="s">"72"</span> <span class="na">height=</span><span class="s">"72"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/ios/icon-72@2x.png"</span> <span class="na">width=</span><span class="s">"144"</span> <span class="na">height=</span><span class="s">"144"</span> <span class="nt">/></span> |
| <span class="c"><!-- iPad Pro --></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/ios/icon-167.png"</span> <span class="na">width=</span><span class="s">"167"</span> <span class="na">height=</span><span class="s">"167"</span> <span class="nt">/></span> |
| <span class="c"><!-- iPhone Spotlight and Settings Icon --></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/ios/icon-small.png"</span> <span class="na">width=</span><span class="s">"29"</span> <span class="na">height=</span><span class="s">"29"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/ios/icon-small@2x.png"</span> <span class="na">width=</span><span class="s">"58"</span> <span class="na">height=</span><span class="s">"58"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/ios/icon-small@3x.png"</span> <span class="na">width=</span><span class="s">"87"</span> <span class="na">height=</span><span class="s">"87"</span> <span class="nt">/></span> |
| <span class="c"><!-- iPad Spotlight and Settings Icon --></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/ios/icon-50.png"</span> <span class="na">width=</span><span class="s">"50"</span> <span class="na">height=</span><span class="s">"50"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/ios/icon-50@2x.png"</span> <span class="na">width=</span><span class="s">"100"</span> <span class="na">height=</span><span class="s">"100"</span> <span class="nt">/></span> |
| <span class="c"><!-- iPad Pro --></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/ios/icon-83.5@2x.png"</span> <span class="na">width=</span><span class="s">"167"</span> <span class="na">height=</span><span class="s">"167"</span> <span class="nt">/></span> |
| <span class="c"><!-- iTunes Marketing Image --></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/ios/icon-1024.png"</span> <span class="na">width=</span><span class="s">"1024"</span> <span class="na">height=</span><span class="s">"1024"</span> <span class="nt">/></span> |
| <span class="nt"></platform></span> |
| </code></pre></div></div> |
| <h3>See Also</h3> |
| <ul> |
| <li><a href="https://developer.apple.com/library/content/qa/qa1686/_index.html">App Icons on iPad and iPhone</a></li> |
| </ul> |
| |
| <h2>Windows</h2> |
| |
| <p>For Windows the recommended approach to define application icons is to use the <code>target</code> attribute.</p> |
| |
| <div class="language-xml highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nt"><platform</span> <span class="na">name=</span><span class="s">"windows"</span><span class="nt">></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/windows/storelogo.png"</span> <span class="na">target=</span><span class="s">"StoreLogo"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/windows/smalllogo.png"</span> <span class="na">target=</span><span class="s">"Square30x30Logo"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/windows/Square44x44Logo.png"</span> <span class="na">target=</span><span class="s">"Square44x44Logo"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/windows/Square70x70Logo.png"</span> <span class="na">target=</span><span class="s">"Square70x70Logo"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/windows/Square71x71Logo.png"</span> <span class="na">target=</span><span class="s">"Square71x71Logo"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/windows/Square150x150Logo.png"</span> <span class="na">target=</span><span class="s">"Square150x150Logo"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/windows/Square310x310Logo.png"</span> <span class="na">target=</span><span class="s">"Square310x310Logo"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/windows/Wide310x150Logo.png"</span> <span class="na">target=</span><span class="s">"Wide310x150Logo"</span> <span class="nt">/></span> |
| <span class="nt"></platform></span> |
| </code></pre></div></div> |
| |
| <p>where <code>src</code> is the path to the icon which needs to be added.</p> |
| |
| <p>The Windows platform handles MRT icons automatically, so if you specify <code>src="res/windows/storelogo.png"</code> the following files will be copied into the application's <code>images</code> folder: <code>res/windows/storelogo.scale-100.png</code>, <code>res/windows/storelogo.scale-200.png</code>, etc.</p> |
| |
| <p>TODO Define what MRT is.</p> |
| |
| <p>The <code>target</code> attribute specifies the base name for the resultant icons. For every icon file, its destination filename is calculated as <code>target + '.' + MRT_qualifiers + extension(src)</code>. For the icons to display properly in the application, every <code>target</code> value should be one of the icon filenames defined in the application's <code>.appxmanifest</code> file.</p> |
| |
| <p>Summarizing the above… using the <code>target</code> attribute it is possible to:</p> |
| |
| <ul> |
| <li>define a group of icons for different device scale factors using a single <code><icon ...></code> element, for example: |
| <div class="language-xml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/windows/AppListIcon.png"</span> <span class="na">target=</span><span class="s">"Square44x44Logo"</span> <span class="nt">/></span> |
| </code></pre></div> </div> |
| <p>which is equivalent to the following lines:</p> |
| <div class="language-xml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/windows/Square44x44Logo.scale-100.png"</span> <span class="na">width=</span><span class="s">"44"</span> <span class="na">height=</span><span class="s">"44"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/windows/Square44x44Logo.scale-150.png"</span> <span class="na">width=</span><span class="s">"66"</span> <span class="na">height=</span><span class="s">"66"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/windows/Square44x44Logo.scale-200.png"</span> <span class="na">width=</span><span class="s">"88"</span> <span class="na">height=</span><span class="s">"88"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/windows/Square44x44Logo.scale-240.png"</span> <span class="na">width=</span><span class="s">"106"</span> <span class="na">height=</span><span class="s">"106"</span> <span class="nt">/></span> |
| </code></pre></div> </div> |
| </li> |
| <li>define icons with scale factors other than <code>scale-100</code> and <code>scale-240</code> (and any other MRT qualifiers)</li> |
| </ul> |
| |
| <p>Although it is not recommended, it is also possible to define icons using the <code>width</code> and <code>height</code> attributes:</p> |
| |
| <div class="language-xml highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nt"><platform</span> <span class="na">name=</span><span class="s">"windows"</span><span class="nt">></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/windows/logo.png"</span> <span class="na">width=</span><span class="s">"150"</span> <span class="na">height=</span><span class="s">"150"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/windows/smalllogo.png"</span> <span class="na">width=</span><span class="s">"30"</span> <span class="na">height=</span><span class="s">"30"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/windows/storelogo.png"</span> <span class="na">width=</span><span class="s">"50"</span> <span class="na">height=</span><span class="s">"50"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/windows/Square44x44Logo.scale-100.png"</span> <span class="na">width=</span><span class="s">"44"</span> <span class="na">height=</span><span class="s">"44"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/windows/Square44x44Logo.scale-240.png"</span> <span class="na">width=</span><span class="s">"106"</span> <span class="na">height=</span><span class="s">"106"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/windows/Square70x70Logo.scale-100.png"</span> <span class="na">width=</span><span class="s">"70"</span> <span class="na">height=</span><span class="s">"70"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/windows/Square71x71Logo.scale-100.png"</span> <span class="na">width=</span><span class="s">"71"</span> <span class="na">height=</span><span class="s">"71"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/windows/Square71x71Logo.scale-240.png"</span> <span class="na">width=</span><span class="s">"170"</span> <span class="na">height=</span><span class="s">"170"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/windows/Square150x150Logo.scale-240.png"</span> <span class="na">width=</span><span class="s">"360"</span> <span class="na">height=</span><span class="s">"360"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/windows/Square310x310Logo.scale-100.png"</span> <span class="na">width=</span><span class="s">"310"</span> <span class="na">height=</span><span class="s">"310"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/windows/Wide310x150Logo.scale-100.png"</span> <span class="na">width=</span><span class="s">"310"</span> <span class="na">height=</span><span class="s">"150"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/windows/Wide310x150Logo.scale-240.png"</span> <span class="na">width=</span><span class="s">"744"</span> <span class="na">height=</span><span class="s">"360"</span> <span class="nt">/></span> |
| <span class="nt"></platform></span> |
| </code></pre></div></div> |
| |
| <h3>See Also:</h3> |
| <ul> |
| <li><a href="https://msdn.microsoft.com/en-us/library/windows/apps/mt412102.aspx">Windows 10 platform guidelines for icons</a>.</li> |
| <li><a href="https://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh781198.aspx">Windows 8.1 tiles and icons sizes</a></li> |
| </ul> |
| |
| <h2>Electron</h2> |
| |
| <h3>Customizing the Application's Icon</h3> |
| |
| <p>Customized icon(s) can be declared with the <code><icon></code> element(s) in the <code>config.xml</code> file. There are two types of icons that can be defined, the application icon and the package installer icon. These icons should be defined in the Electron's platform node <code><platform name="electron"></code>.</p> |
| |
| <p>One icon can be used for the application and installer, but this icon should be at least <strong>512x512</strong> pixels to work across all operating systems.</p> |
| |
| <p><em>Notice: If a customized icon is not provided, the Apache Cordova default icons are used.</em></p> |
| |
| <p><em>Notice: macOS does not display custom icons when using <code>cordova run</code>. It defaults to the Electron's icon.</em></p> |
| |
| <div class="language-xml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><platform</span> <span class="na">name=</span><span class="s">"electron"</span><span class="nt">></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/electron/icon.png"</span> <span class="nt">/></span> |
| <span class="nt"></platform></span> |
| </code></pre></div></div> |
| |
| <p>You can supply unique icons for the application and installer by setting the <code>target</code> attribute. As mentioned above, the installer image should be <strong>512x512</strong> pixels to work across all platforms.</p> |
| |
| <div class="language-xml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><platform</span> <span class="na">name=</span><span class="s">"electron"</span><span class="nt">></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/electron/app.png"</span> <span class="na">target=</span><span class="s">"app"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/electron/installer.png"</span> <span class="na">target=</span><span class="s">"installer"</span> <span class="nt">/></span> |
| <span class="nt"></platform></span> |
| </code></pre></div></div> |
| |
| <p>For devices that support high-DPI resolutions, such as Apple's Retina display, you can create a set of images with the same base filename but suffix with its multiplier.</p> |
| |
| <p>For example, if the base image's filename <code>icon.png</code> and is the standard resolution, then <code>icon@2x.png</code> will be treated as a high-resolution image that with a DPI doubled from the base.</p> |
| |
| <ul> |
| <li>icon.png (256px x 256px)</li> |
| <li>icon@2x.png (512px x 512px)</li> |
| </ul> |
| |
| <p>If you want to support displays with different DPI densities at the same time, you can put images with different sizes in the same folder and use the filename without DPI suffixes. For example:</p> |
| |
| <div class="language-xml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><platform</span> <span class="na">name=</span><span class="s">"electron"</span><span class="nt">></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/electron/icon.png"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/electron/icon@1.5x.png"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/electron/icon@2x.png"</span> <span class="nt">/></span> |
| <span class="nt"><icon</span> <span class="na">src=</span><span class="s">"res/electron/icon@4x.png"</span> <span class="na">target=</span><span class="s">"installer"</span> <span class="nt">/></span> |
| <span class="nt"></platform></span> |
| </code></pre></div></div> |
| |
| |
| </div> |
| </div> |
| <div class="row"> |
| <div class="blue-divider"></div> |
| <footer> |
| <div class="container-fluid"> |
| <div class="row"> |
| <div class="col-sm-9"> |
| <h1>More Resources</h1> |
| <div class="row"> |
| <div class="col-sm-4"> |
| <h2>General</h2> |
| <ul class="nav"> |
| <li> |
| <a target="_blank" href="https://projects.apache.org/project.html?cordova">Apache Project Page</a> |
| </li> |
| <li> |
| <a href="https://www.apache.org/dyn/closer.cgi/cordova">Source Distribution</a> |
| </li> |
| <li> |
| <a target="_blank" href="https://www.apache.org/licenses">License</a> |
| </li> |
| <li> |
| <a href="/artwork">Artwork</a> |
| </li> |
| </ul> |
| </div> |
| <div class="col-sm-4"> |
| <h2>Development</h2> |
| <ul class="nav"> |
| <li><a target="_blank" href="https://github.com/apache?utf8=%E2%9C%93&q=cordova-">Source Code</a></li> |
| <li><a target="_blank" href="https://github.com/apache/cordova#filing-a-bug">Issue Tracker</a></li> |
| <li><a target="_blank" href="https://stackoverflow.com/questions/tagged/cordova">Stack Overflow</a></li> |
| <li><a href="/contact">Mailing List</a></li> |
| <li><a href="/contribute/nightly_builds.html">Nightly builds</a></li> |
| </ul> |
| </div> |
| <div class="col-sm-4"> |
| <h2>Apache Software Foundation</h2> |
| <ul class="nav"> |
| <li> |
| <a target="_blank" href="https://www.apache.org/">About ASF</a> |
| </li> |
| <li> |
| <a target="_blank" href="https://www.apache.org/events/current-event">Events</a> |
| </li> |
| <li> |
| <a target="_blank" href="https://www.apache.org/foundation/sponsorship.html">Become a Sponsor</a> |
| </li> |
| <li> |
| <a target="_blank" href="https://www.apache.org/foundation/thanks.html">Thanks</a> |
| </li> |
| <li> |
| <a target="_blank" href="https://www.apache.org/security/">Security</a> |
| </li> |
| <li> |
| <a target="_blank" href="https://privacy.apache.org/policies/privacy-policy-public.html">Privacy policy</a> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| <div class="col-sm-3"> |
| <h1>Contribute</h1> |
| <p style="padding-top:20px"><strong>Help Cordova move forward!</strong></p> |
| <p>Report bugs, improve the docs, or contribute to the code.</p> |
| <a href="/contribute" class="btn btn-lg btn-primary"> |
| Learn More |
| </a> |
| <p style="padding-top:20px"> <a href="https://twitter.com/apachecordova" class="twitter-follow-button" data-show-count="false">Follow @apachecordova</a></p> |
| </div> |
| </div> |
| <p class="copyright_text"> |
| Copyright © 2024 <a href="https://apache.org">The Apache Software Foundation</a>, Licensed under the <a target="_blank" href="https://www.apache.org/licenses/">Apache License, Version 2.0</a>.<br/> |
| Apache and the Apache feather logos are <a target="_blank" href="https://www.apache.org/foundation/marks/list/">trademarks</a> of The Apache Software Foundation. |
| <br/> |
| <p>See the <a href="/attributions/">attributions page</a> for other copyright & trademark notices.</p> |
| </p> |
| |
| </div> |
| </footer> |
| |
| </div> |
| </div> |
| </div> |
| |
| <script defer type="text/javascript" src="/static/js/lib/toc.min.js"></script> |
| <script defer type="text/javascript" src="/static/js/docs.js"></script> |
| |
| <script defer type="text/javascript" src="/static/js/index.js"></script> |
| <script defer type="text/javascript" src="/static/js/twitter.js"></script> |
| </body> |
| </html> |
