<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en_US" lang="en_US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- applicationicon.qdoc -->
<title>Qt 4.8: Application Icon Example</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/functions.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style/superfish.css" />
<link rel="stylesheet" type="text/css" href="style/narrow.css" />
<!--[if IE]>
<meta name="MSSmartTagsPreventParsing" content="true">
<meta http-equiv="imagetoolbar" content="no">
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie6.css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie7.css">
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="style/style_ie8.css">
<![endif]-->
<script src="scripts/superfish.js" type="text/javascript"></script>
<script src="scripts/narrow.js" type="text/javascript"></script>
</head>
<body class="" onload="CheckEmptyAndLoadList();">
<div class="header" id="qtdocheader">
<div class="content">
<div id="nav-logo">
<a href="index.html">Home</a></div>
<a href="index.html" class="qtref"><span>Qt Reference Documentation</span></a>
<div id="narrowsearch"></div>
<div id="nav-topright">
<ul>
<li class="nav-topright-home"><a href="http://qt.digia.com/">Qt HOME</a></li>
<li class="nav-topright-dev"><a href="http://qt-project.org/">DEV</a></li>
<li class="nav-topright-doc nav-topright-doc-active"><a href="http://qt-project.org/doc/">
DOC</a></li>
<li class="nav-topright-blog"><a href="http://blog.qt.digia.com/">BLOG</a></li>
</ul>
</div>
<div id="shortCut">
<ul>
<li class="shortCut-topleft-inactive"><span><a href="index.html">Qt 4.8</a></span></li>
<li class="shortCut-topleft-active"><a href="http://qt-project.org/doc/">ALL VERSIONS </a></li>
</ul>
</div>
<ul class="sf-menu" id="narrowmenu">
<li><a href="#">API Lookup</a>
<ul>
<li><a href="classes.html">Class index</a></li>
<li><a href="functions.html">Function index</a></li>
<li><a href="modules.html">Modules</a></li>
<li><a href="namespaces.html">Namespaces</a></li>
<li><a href="qtglobal.html">Global Declarations</a></li>
<li><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</li>
<li><a href="#">Qt Topics</a>
<ul>
<li><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li><a href="supported-platforms.html">Supported Platforms</a></li>
<li><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</li>
<li><a href="#">Examples</a>
<ul>
<li><a href="all-examples.html">Examples</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
<li><a href="demos.html">Demos</a></li>
<li><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="hd">
<span></span>
</div>
<div class="bd group">
<div class="sidebar">
<div class="searchlabel">
Search index:</div>
<div class="search" id="sidebarsearch">
<form id="qtdocsearch" action="" onsubmit="return false;">
<fieldset>
<input type="text" name="searchstring" id="pageType" value="" />
<div id="resultdialog">
<a href="#" id="resultclose">Close</a>
<p id="resultlinks" class="all"><a href="#" id="showallresults">All</a> | <a href="#" id="showapiresults">API</a> | <a href="#" id="showarticleresults">Articles</a> | <a href="#" id="showexampleresults">Examples</a></p>
<p id="searchcount" class="all"><span id="resultcount"></span><span id="apicount"></span><span id="articlecount"></span><span id="examplecount"></span> results:</p>
<ul id="resultlist" class="all">
</ul>
</div>
</fieldset>
</form>
</div>
<div class="box first bottombar" id="lookup">
<h2 title="API Lookup"><span></span>
API Lookup</h2>
<div id="list001" class="list">
<ul id="ul001" >
<li class="defaultLink"><a href="classes.html">Class index</a></li>
<li class="defaultLink"><a href="functions.html">Function index</a></li>
<li class="defaultLink"><a href="modules.html">Modules</a></li>
<li class="defaultLink"><a href="namespaces.html">Namespaces</a></li>
<li class="defaultLink"><a href="qtglobal.html">Global Declarations</a></li>
<li class="defaultLink"><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</div>
</div>
<div class="box bottombar" id="topics">
<h2 title="Qt Topics"><span></span>
Qt Topics</h2>
<div id="list002" class="list">
<ul id="ul002" >
<li class="defaultLink"><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li class="defaultLink"><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li class="defaultLink"><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li class="defaultLink"><a href="supported-platforms.html">Supported Platforms</a></li>
<li class="defaultLink"><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li class="defaultLink"><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</div>
</div>
<div class="box" id="examples">
<h2 title="Examples"><span></span>
Examples</h2>
<div id="list003" class="list">
<ul id="ul003">
<li class="defaultLink"><a href="all-examples.html">Examples</a></li>
<li class="defaultLink"><a href="tutorials.html">Tutorials</a></li>
<li class="defaultLink"><a href="demos.html">Demos</a></li>
<li class="defaultLink"><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</div>
</div>
</div>
<div class="wrap">
<div class="toolbar">
<div class="breadcrumb toolblock">
<ul>
<li class="first"><a href="index.html">Home</a></li>
<!-- Breadcrumbs go here -->
<li><a href="all-examples.html">Examples</a></li>
<li>Application Icon Example</li>
</ul>
</div>
<div class="toolbuttons toolblock">
<ul>
<li id="smallA" class="t_button">A</li>
<li id="medA" class="t_button active">A</li>
<li id="bigA" class="t_button">A</li>
<li id="print" class="t_button"><a href="javascript:this.print();">
<span>Print</span></a></li>
</ul>
</div>
</div>
<div class="content mainContent">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#creating-an-icon-for-maemo">Creating an icon for Maemo</a></li>
<li class="level1"><a href="#creating-an-icon-for-symbian">Creating an icon for Symbian</a></li>
<li class="level1"><a href="#adding-the-icons-to-the-project">Adding the icons to the project</a></li>
</ul>
</div>
<h1 class="title">Application Icon Example</h1>
<span class="subtitle"></span>
<!-- $$$widgets/applicationicon-description -->
<div class="descr"> <a name="details"></a>
<p>Files:</p>
<ul>
<li><a href="widgets-applicationicon-applicationicon-svg.html">widgets/applicationicon/applicationicon.svg</a></li>
<li><a href="widgets-applicationicon-main-cpp.html">widgets/applicationicon/main.cpp</a></li>
<li><a href="widgets-applicationicon-applicationicon-pro.html">widgets/applicationicon/applicationicon.pro</a></li>
</ul>
<p>The Application Icon example shows how to add an application icon to a mobile application.<p class="centerAlign"><img src="images/appicon_screenshot.png" alt="The icon on a Nokia XPressMusic 5800" /></p><a name="creating-an-icon-for-maemo"></a>
<h2>Creating an icon for Maemo</h2>
<p>Maemo expects the icon of an application to be a 64x64 PNG image file. The file name of the icon should be the same as the executable with a <tt>.png</tt> extension. You also need a <tt>.desktop</tt> file that gives the window manager hints about the application, such as name, type and icon.</p>
<pre class="cpp"> [Desktop Entry]
Encoding=UTF-8
Version=1.0
Type=Application
Terminal=false
Name=Application Icon
Exec=/opt/usr/bin/applicationicon
Icon=applicationicon
X-Window-Icon=
X-HildonDesk-ShowInToolbar=true
X-Osso-Type=application/x-executable</pre>
<p>The <tt>Icon</tt> field should also contain the name of the executable. On the device, application icons are stored in the <tt>/usr/share/icons/hicolor/64x64/apps</tt> directory and desktop files in the <tt>/usr/share/applications/hildon</tt> directory.</p>
<a name="creating-an-icon-for-symbian"></a>
<h2>Creating an icon for Symbian</h2>
<p>Symbian uses Scalable Vector Graphics (SVG Tiny 1.1+) to render application icons in the application menu. Therefore icons could be created manually with a text editor, since SVG files are plain text with XML syntax, but usually you would use a vector graphics program that is able to output SVG files. Popular graphics programs such as Adobe Illustrator or Inkscape are able to do so.</p>
<p>For best results, the icon should be created on a 44x44 pixel canvas. Otherwise the image might be scaled in unexpected ways.</p>
<p>Once you have created your icon, make sure that it is stored according to the SVG-Tiny 1.1+ standard. Inkscape, for instance, is not able to save images that way, but there are tools that can convert general SVG files into the Tiny format. For instance, the svg2svgt tool that is bundled with Symbian 3rd and 5th editon SDKs under the folder s60tools can do this conversion to some extent. Another tool to convert SVG to SVG Tiny is SVG Pony.</p>
<a name="adding-the-icons-to-the-project"></a>
<h2>Adding the icons to the project</h2>
<p>Edit the .pro file and specify the ICON variable for the symbian target. For Maemo, we need to add that the <tt>.desktop</tt> and icon file should be installed.</p>
<pre class="cpp"> QT += core gui
TARGET = applicationicon
TEMPLATE = app
SOURCES += main.cpp
OTHER_FILES += applicationicon.svg \
applicationicon.png \
applicationicon.desktop
symbian {
include($$QT_SOURCE_TREE/examples/symbianpkgrules.pri)
# override icon
ICON = applicationicon.svg
TARGET.UID3 = 0xe9f919ee
TARGET.EPOCSTACKSIZE = 0x14000
TARGET.EPOCHEAPSIZE = 0x020000 0x800000
}
maemo5 {
include($$QT_SOURCE_TREE/examples/maemo5pkgrules.pri)
# override icon from maemo5pkgrules.pri
icon.files = $${TARGET}.png
}
symbian: warning(This example might not fully work on Symbian platform)
maemo5: warning(This example might not fully work on Maemo platform)
simulator: warning(This example might not fully work on Simulator platform)</pre>
<p>Currently, Qt Creator doesn't include the icon and desktop files in the application package for Maemo, merely the executable file is included. As a workaround for this, the files can be added manually in the Projects tab. In the "Create Package" build step for the Maemo target, the <tt>.desktop</tt> file and icon can be added to be a part of the package contents. Unfortunately, these additions are only stored as a part of the <tt>.pro.user</tt> file. This issue will be resolved in a future release of Qt Creator.</p>
<p class="centerAlign"><img src="images/appicon_packagecontents.png" alt="Manual addition of files to the "Create Package" build step" /></p></div>
<!-- @@@widgets/applicationicon -->
</div>
</div>
</div>
<div class="ft">
<span></span>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2013 Digia Plc and/or its
subsidiaries. Documentation contributions included herein are the copyrights of
their respective owners.</p>
<br />
<p>
The documentation provided herein is licensed under the terms of the
<a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation
License version 1.3</a> as published by the Free Software Foundation.</p>
<p>
Documentation sources may be obtained from <a href="http://www.qt-project.org">
www.qt-project.org</a>.</p>
<br />
<p>
Digia, Qt and their respective logos are trademarks of Digia Plc
in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. <a title="Privacy Policy"
href="http://en.gitorious.org/privacy_policy/">Privacy Policy</a></p>
</div>
<script src="scripts/functions.js" type="text/javascript"></script>
</body>
</html>
