├── .gitignore ├── Affinity Designer ├── App Icon - Apple iMessage.afdesign ├── App Icon - Apple iOS.afdesign ├── App Icon - Apple macOS.afdesign ├── App Icon - Apple tvOS.afdesign ├── App Icon - Apple watchOS.afdesign ├── App Icon - Google Android adaptive icon.afdesign ├── App Icon - Google Android.afdesign ├── App Icon - Microsoft Windows Tiles.afdesign ├── App Icon - Microsoft Windows.afdesign └── Favicon - Web.afdesign ├── Help ├── Help.md ├── Icon Sizes.md ├── License.md ├── Scaling.md ├── Style Guide.md ├── Version History.md └── images │ ├── create-step-1.png │ ├── create-step-2.png │ ├── create-step-3.png │ ├── example-template.png │ ├── hashes.png │ ├── icon-masks.png │ ├── photoshop-slices.png │ ├── photoshop-smart-objects.png │ ├── pixel-density-colours.png │ ├── scaling.gif │ ├── sketch-install.png │ ├── sketch-ios-quick.png │ ├── sketch-slices.png │ ├── style-guide-spacing.png │ └── templates-hero.png ├── Illustrator ├── App Icon - Apple iMessage.ai ├── App Icon - Apple iOS.ai ├── App Icon - Apple macOS.ai ├── App Icon - Apple tvOS.ai ├── App Icon - Apple watchOS.ai ├── App Icon - Google Android adaptive icon.ai ├── App Icon - Google Android.ai ├── App Icon - Microsoft Windows Tiles.ai ├── App Icon - Microsoft Windows.ai └── Favicon - Web.ai ├── PNG ├── App Icon - Apple iMessage.png ├── App Icon - Apple iOS.png ├── App Icon - Apple macOS.png ├── App Icon - Apple tvOS.png ├── App Icon - Apple watchOS.png ├── App Icon - Google Android adaptive icon.png ├── App Icon - Google Android.png ├── App Icon - Microsoft Windows Tiles.png ├── App Icon - Microsoft Windows.png └── Favicon - Web.png ├── Photoshop (Generator) ├── App Icon - Apple iMessage.psd ├── App Icon - Apple iOS.psd ├── App Icon - Apple macOS.psd ├── App Icon - Apple tvOS.psd ├── App Icon - Apple watchOS.psd ├── App Icon - Google Android adaptive icon.psd ├── App Icon - Google Android.psd └── Favicon - Web.psd ├── Photoshop ├── App Icon - Apple iMessage.psd ├── App Icon - Apple iOS.psd ├── App Icon - Apple macOS.psd ├── App Icon - Apple tvOS.psd ├── App Icon - Apple watchOS.psd ├── App Icon - Google Android adaptive icon.psd ├── App Icon - Google Android.psd ├── App Icon - Microsoft Windows Tiles.psd ├── App Icon - Microsoft Windows.psd └── Favicon - Web.psd ├── Readme.md └── Sketch ├── App Icon - Apple iOS.sketch ├── App Icon - Apple macOS Big Sur.sketch ├── App Icon - Apple macOS.sketch ├── App Icon - Apple tvOS.sketch ├── App Icon - Apple watchOS.sketch ├── App Icon - Google Android adaptive icon.sketch ├── App Icon - Google Android.sketch ├── App Icon - Microsoft Windows Tiles.sketch ├── App Icon - Microsoft Windows.sketch ├── Favicon - Web.sketch └── Install Sketch templates.command /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /Affinity Designer/App Icon - Apple iMessage.afdesign: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Affinity Designer/App Icon - Apple iMessage.afdesign -------------------------------------------------------------------------------- /Affinity Designer/App Icon - Apple iOS.afdesign: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Affinity Designer/App Icon - Apple iOS.afdesign -------------------------------------------------------------------------------- /Affinity Designer/App Icon - Apple macOS.afdesign: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Affinity Designer/App Icon - Apple macOS.afdesign -------------------------------------------------------------------------------- /Affinity Designer/App Icon - Apple tvOS.afdesign: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Affinity Designer/App Icon - Apple tvOS.afdesign -------------------------------------------------------------------------------- /Affinity Designer/App Icon - Apple watchOS.afdesign: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Affinity Designer/App Icon - Apple watchOS.afdesign -------------------------------------------------------------------------------- /Affinity Designer/App Icon - Google Android adaptive icon.afdesign: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Affinity Designer/App Icon - Google Android adaptive icon.afdesign -------------------------------------------------------------------------------- /Affinity Designer/App Icon - Google Android.afdesign: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Affinity Designer/App Icon - Google Android.afdesign -------------------------------------------------------------------------------- /Affinity Designer/App Icon - Microsoft Windows Tiles.afdesign: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Affinity Designer/App Icon - Microsoft Windows Tiles.afdesign -------------------------------------------------------------------------------- /Affinity Designer/App Icon - Microsoft Windows.afdesign: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Affinity Designer/App Icon - Microsoft Windows.afdesign -------------------------------------------------------------------------------- /Affinity Designer/Favicon - Web.afdesign: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Affinity Designer/Favicon - Web.afdesign -------------------------------------------------------------------------------- /Help/Help.md: -------------------------------------------------------------------------------- 1 | # Bjango App Icon Templates help 2 | 3 | - [Adding your artwork](https://github.com/bjango/Bjango-Templates/blob/master/Help/Help.md#adding-your-artwork) 4 | - [Using the Photoshop templates](https://github.com/bjango/Bjango-Templates/blob/master/Help/Help.md#using-the-photoshop-templates) 5 | - [Using the Illustrator templates](https://github.com/bjango/Bjango-Templates/blob/master/Help/Help.md#using-the-illustrator-templates) 6 | - [Using the Sketch templates](https://github.com/bjango/Bjango-Templates/blob/master/Help/Help.md#using-the-sketch-templates) 7 | - [Using the Affinity Designer templates](https://github.com/bjango/Bjango-Templates/blob/master/Help/Help.md#using-the-affinity-designer-templates) 8 | - [Using other design tools](https://github.com/bjango/Bjango-Templates/blob/master/Help/Help.md#using-other-design-tools) 9 | - [iOS, tvOS and other icon masks](https://github.com/bjango/Bjango-Templates/blob/master/Help/Help.md#ios-tvos-and-other-icon-masks) 10 | - [Bitmap vs vector scaling](https://github.com/bjango/Bjango-Templates/blob/master/Help/Scaling.md) 11 | - [Hashes in export names](https://github.com/bjango/Bjango-Templates/blob/master/Help/Help.md#hashes-in-export-names) 12 | - [Compressing images](https://github.com/bjango/Bjango-Templates/blob/master/Help/Help.md#compressing-images) 13 | - [Platform icon sizes](https://github.com/bjango/Bjango-Templates/blob/master/Help/Icon%20Sizes.md) 14 | - [Style guide](https://github.com/bjango/Bjango-Templates/blob/master/Help/Style%20Guide.md) 15 | - [Colour management](https://github.com/bjango/Bjango-Templates/blob/master/Help/Help.md#colour%20management) 16 | - [Tips](https://github.com/bjango/Bjango-Templates/blob/master/Help/Help.md#tips) 17 | - [Version history](https://github.com/bjango/Bjango-Templates/blob/master/Help/Version%20History.md) 18 | - [License](https://github.com/bjango/Bjango-Templates/blob/master/Help/License.md) 19 | - [Feedback and future plans](https://github.com/bjango/Bjango-Templates/blob/master/Help/Help.md#feedback-and-future-plans) 20 | 21 | ----- 22 | 23 | ### Adding your artwork 24 | 25 | For most of the templates, a good way to work is to create an initial icon at one of the sizes. Photoshop is shown below, but the strategy works for all design tools. 26 | 27 | ![](/Help/images/create-step-1.png) 28 | 29 | Then duplicate it. 30 | 31 | ![](/Help/images/create-step-2.png) 32 | 33 | Then scale it, and move it into position. Do that for each icon size. 34 | 35 | ![](/Help/images/create-step-3.png) 36 | 37 | Once you’re done, you’ll have a complete set of icons added to the template, ready to be exported. Duplicating the icons for each size is important — it allows you to make size specific tweaks, and preview the icon at size before exporting ([Smart Objects bitmap scale](https://bjango.com/articles/smartobjects/), so they should be avoided for final artwork). 38 | 39 | ----- 40 | 41 | ### Using the Photoshop templates 42 | 43 | For most Photoshop templates, create your artwork in the `Icon Artwork` group, inside the icon size folders. 44 | 45 | To export using the templates below, turn off the `Labels`, `Icon Masks`, `Icon Areas`, and `Background` layers and groups. Then choose `File` → `Export` → `Save For Web (Legacy)`. When the Save For Web window opens, make sure `PNG-24` is the file format and click `Save`. In the Save window, choose `All User Slices` in the Slices popup menu, choose the desired destination and click `Save`. 46 | 47 | - `App Icon - Apple iMessage.psd` - `App Icon - Apple iOS.psd` - `App Icon - Apple macOS.psd` - `App Icon - Apple watchOS.psd` - `App Icon - Google Android.psd` - `App Icon - Microsoft Windows Tiles.psd` - `App Icon - Microsoft Windows.psd` - `Favicon - Web.psd` 48 | 49 | To export using the template below, turn on Generator via `File` → `Generate` → `Image Assets`. If the option isn’t available, `Enable Generator` might need to be turned on in `Preferences` → `Plug-Ins`. Once Generator is turned on, a folder with the suffix `-assets` will be created at the same path as your Photoshop document. As you make changes, the assets will be re-exported. 50 | 51 | - `App Icon - Google Android adaptive icon.psd` 52 | - `App Icon - Apple tvOS.psd` Photoshop’s canvas slice info can be cleaned up, to make it easier to see your artwork. With the `Slice Select Tool` chosen, click `Hide Auto Slices` in the options bar and disable the `Show Slice Numbers` check box under `Preferences` → `Guides, Grid & Slices`. ![](/Help/images/photoshop-slices.png) The Photoshop templates contain a `Smart Objects (for preview only)` group that contains a single Smart Object document for all icon sizes. Double-click the layer thumbnail and save to see changes replicated across all icon sizes. This is a great way to quickly preview your icon at all sizes, but is not recommended for final production artwork. For best quality results, each icon size should have its own size-specific artwork ([Smart Objects bitmap scale](https://bjango.com/articles/smartobjects/)). 53 | 54 | If you’ve used the Smart Object document to preview, and are building each icon at size, the `Show Smart Objects` layer can be used to work out which sizes need to be finished. 55 | 56 | ![](/Help/images/photoshop-smart-objects.png) 57 | 58 | To export a single image of all the icons, choose `File` → `Export` → `Quick Export as PNG`. 59 | 60 | ----- 61 | 62 | ### Using the Photoshop (Generator) templates 63 | 64 | To export using the templates below, turn on Generator via `File` → `Generate` → `Image Assets`. If the option isn’t available, `Enable Generator` might need to be turned on in `Preferences` → `Plug-Ins`. Once Generator is turned on, a folder with the suffix `-assets` will be created at the same path as your Photoshop document. As you make changes, the assets will be re-exported. 65 | 66 | - `App Icon - Apple iMessage.psd` - `App Icon - Apple iOS.psd` - `App Icon - Apple macOS.psd` - `App Icon - Apple tvOS.psd` - `App Icon - Apple watchOS.psd` - `App Icon - Google Android.psd` - `App Icon - Google Android adaptive icon.psd` 67 | - `Favicon - Web.psd` 68 | 69 | To export a single image of all the icons, choose `File` → `Export` → `Quick Export as PNG`. 70 | ----- 71 | 72 | ### Using the Illustrator templates 73 | 74 | For most Illustrator templates, create your artwork on the `Icon Artwork` layer, inside the icon size folders. 75 | 76 | To export using the templates below, turn off the `Labels`, `Icon Masks`, `Icon Areas`, and `Background` layers and groups. Then choose `File` → `Save For Web`. When the Save For Web window opens, choose your desired file format, ensure `All User Slices` is selected, then click Save. From there, choose a destination and click `Save`. 77 | 78 | - `App Icon - Apple iMessage.ai` - `App Icon - Apple iOS.ai` - `App Icon - Apple macOS.ai` - `App Icon - Apple watchOS.ai` - `App Icon - Google Android.ai` - `App Icon - Microsoft Windows Tiles.ai` - `App Icon - Microsoft Windows.ai` - `Favicon - Web.ai` 79 | 80 | To export using the tvOS template, choose `File` → `Save For Web` to save the larger icon. To save each layer of a parallax icon, turn off all the layers except the one you’d like to export (`Layer 1` etc), then choose `File` → `Save For Web`. Repeat the process for all the layers you’re using in your icon. I don’t think there’s a better way to automate the process while still keeping the artwork stacked (which makes the initial design process and alignment easier). 81 | 82 | - `App Icon - Apple tvOS.ai` 83 | 84 | To export using the Google Android adaptive icon template, hide all the layers except the foreground layers, then choose `File` → `Save For Web`. Repeat the process for the background layers. 85 | 86 | - `App Icon - Google Android adaptive icon.ai` 87 | ----- 88 | 89 | ### Using the Sketch templates 90 | 91 | Double-click `Install Sketch templates` to install the templates and make them available from the `File` → `New From Template` menu within Sketch. 92 | 93 | ![](/Help/images/sketch-install.png) 94 | 95 | For most Sketch templates, create your artwork in the `Icon Artwork` group, inside the icon size folders. 96 | 97 | To export using the templates below, click `Export` in the toolbar, then choose which icons to export (probably leave all of them set to export), then click the `Export` button, choose a destination, then click `Export` again. 98 | 99 | - `App Icon - Apple iOS.sketch` - `App Icon - Apple macOS.sketch` - `App Icon - Apple tvOS.sketch` - `App Icon - Apple watchOS.sketch` - `App Icon - Google Android.sketch` - `App Icon - Google Android adaptive icon.sketch` - `App Icon - Microsoft Windows Tiles.sketch` - `App Icon - Microsoft Windows.sketch` - `Favicon - Web.sketch` 100 | 101 | You may wish to hide `Slices` while you’re working. This can be done in the bottom left side of the document window. 102 | 103 | ![](/Help/images/sketch-slices.png) 104 | 105 | The `All Icons` slice exports a single image of all the icons. 106 | 107 | ----- 108 | 109 | ### Using the Affinity Designer templates 110 | 111 | For most Affinity Designer templates, create your artwork in the `Icon Artwork` group, inside the icon size folders. 112 | 113 | To export using the templates below, turn off the `Labels`, `Icon Masks`, `Icon Areas`, and `Background` layers and groups. Then switch to the `Export Persona` and click the `Export Selected` button in the `Slices` panel. From there, choose a destination and click `Export`. 114 | 115 | - `App Icon - Apple iMessage.afdesign` - `App Icon - Apple iOS.afdesign` - `App Icon - Apple macOS.afdesign` - `App Icon - Apple watchOS.afdesign` - `App Icon - Google Android.afdesign` - `App Icon - Microsoft Windows Tiles.afdesign` - `App Icon - Microsoft Windows.afdesign` - `Favicon - Web.afdesign` 116 | 117 | To export using the tvOS template, choose `File` → `Export ` to save the larger icon as a PNG. To save each layer of a parallax icon, turn off all the layers except the one you’d like to export (`Layer 1` etc), then choose `File` → `Export`. Repeat the process for all the layers you’re using in your icon. I don’t think there’s a better way to automate the process while still keeping the artwork stacked (which makes the initial design process and alignment easier). 118 | 119 | - `App Icon - Apple tvOS.afdesign` 120 | 121 | To export using the Google Android adaptive icon template, hide all the layers except the foreground layers, then choose `File` → `Export`. Repeat the process for the background layers. 122 | 123 | - `App Icon - Google Android adaptive icon.ai` 124 | 125 | To export a single image of all the icons, choose `File` → `Export`. 126 | ----- 127 | 128 | ### Using other design tools 129 | 130 | If you’re not using Photoshop, Illustrator, Sketch or Affinity Designer, the PNG images should still contain everything you need to build icons for those platforms. They indicate all the required icon sizes, icon regions, pixel densities and other information. To use them, import a template image into your design tool of choice, and build your icon artwork on top. 131 | 132 | ----- 133 | 134 | ### iOS, tvOS and other icon masks 135 | 136 | Some platforms, like iOS and tvOS require unmasked icons, so the OS itself can apply a uniform mask to all app icons. In those cases, icons should be square-finished, with colour information extending all the way to the image edge. 137 | 138 | If you pre-mask your icon, the OS will mask it again and there will likely be ugly artefacts in the mask antialiasing areas. 139 | 140 | ![](/Help/images/icon-masks.png) 141 | 142 | ----- 143 | 144 | ### Hashes in export names 145 | 146 | Some templates export images with hashes (“#”) in their file names. This is to denote folder structure, so [Hazel](https://www.noodlesoft.com/hazel.php) can be used to automatically rename and sort exported files. A Hazel rule to do this is part of [Bjango Actions](https://github.com/bjango/Bjango-Actions). The Android icons demonstrate this, converting `drawable-hdpi#icon` into `drawable-hdpi/icon.png`. 147 | 148 | ![](/Help/images/hashes.png) 149 | 150 | ----- 151 | 152 | ### Compressing images 153 | 154 | Where practical, it makes sense to save smaller files by using indexed colours (PNG8). This will reduce the number of colours possible, but if your icon doesn’t need them, it can save a lot of disk space. It can also be good to use a tool like [ImageOptim](https://imageoptim.com) to compress PNGs further, but be aware that in some circumstances the savings will be undone at build time. [Building for iOS typically recompresses PNGs](https://bjango.com/articles/pngcompression/) and building for macOS may end up with an ICNS or TIFF file, undoing PNG optimisation. 155 | 156 | ----- 157 | 158 | ### Platform icon sizes 159 | 160 | A full list of icon sizes, pixel densities, likely uses and official source links can be found in the [Platform icon sizes](https://github.com/bjango/Bjango-Templates/blob/master/Help/Icon%20Sizes.md) document. 161 | 162 | ----- 163 | 164 | ### Style guide 165 | 166 | All templates have been created to match the [Bjango App Icon Templates style guide](https://github.com/bjango/Bjango-Templates/blob/master/Help/Style%20Guide.md). 167 | 168 | ----- 169 | 170 | ### Colour management 171 | 172 | Where possible, the templates are all set up to use sRGB as the working colour space. Unless you have a very good reason not to, I recommend working in sRGB. If you would like far more detailed information on why, and the settings needed for many design tools, please take a look at my colour management articles (part 3 contains the settings info). 173 | 174 | - [Colour management, part 1](https://bjango.com/articles/colourmanagementgamut/) 175 | - [Colour management, part 2](https://bjango.com/articles/colourmanagementgamma/) 176 | - [Colour management, part 3](https://bjango.com/articles/colourmanagementsettings/) 177 | 178 | ----- 179 | 180 | ### Tips 181 | 182 | If you’re after some more generalised app icon design tips, I’ve written a few articles you may be interested in: 183 | 184 | - [My icon design workflow](https://bjango.com/articles/icondesignworkflow/) 185 | - [My app design workflow](https://bjango.com/articles/appdesignworkflow/) 186 | - [Everything is a grid](https://bjango.com/articles/everythingisagrid/) 187 | 188 | ----- 189 | 190 | ### Feedback and future plans 191 | 192 | These documents are maintained by [@marcedwards](https://twitter.com/marcedwards). If you find errors or have suggestions, I’d love to hear about them. Currently, the Windows Tiles templates are missing some elements. -------------------------------------------------------------------------------- /Help/Icon Sizes.md: -------------------------------------------------------------------------------- 1 | # Platform icon sizes 2 | 3 | A comprehensive list of app icon sizes, including their screen pixel densities, uses and how they may be masked. The information below is intended to cover best practice for the current platform release version. I will do my best to keep everything up to date. Consult the vendor’s documentation via the links provided if you have any concerns. 4 | 5 | This is a living document, so please [get in touch](https://twitter.com/marcedwards/) if you notice any errors. 6 | 7 | The recommended number of icons required, per platform: 8 | 9 | ``` 10 | Apple iMessage ███████████ 11 11 | Apple iOS and iPadOS ██████████████ 14 12 | Apple macOS ███████ 7 13 | Apple tvOS ███ 3 14 | Apple visionOS █ ? 15 | Apple watchOS ███████████████ 15 16 | Apple watchOS Complications ██████████████████████████████████████████ 42 17 | Google Android ██████ 6 18 | Google Android Adaptive Icons █████ 5 19 | Microsoft Windows ████ 4 20 | Microsoft Windows Tiles █████████████████████████ 25 21 | Web favicons █████ 5 22 | ``` 23 | ----- 24 | 25 | ### Apple iMessage 26 | 27 | - Screen pixel densities: 1×, 2×, 3×. 28 | - Masked: Yes, rounded corners. 29 | - Transparency: Not allowed. 30 | - Layers: 1. 31 | 32 | | Size in pixels | Pixel densities | Uses | Colour space | 33 | |----------------|-----------------|------|--------------| 34 | |27×20| 1× | Many places | sRGB or sRGB and Display P3 | 35 | |32×24| 1× | Many places | sRGB or sRGB and Display P3 | 36 | |54×40| 2× | Many places | sRGB or sRGB and Display P3 | 37 | |60×45| 1× | Many places | sRGB or sRGB and Display P3 | 38 | |64×48| 2× | Many places | sRGB or sRGB and Display P3 | 39 | |81×60| 3× | Many places | sRGB or sRGB and Display P3 | 40 | |96×72| 3× | Many places | sRGB or sRGB and Display P3 | 41 | |120×90| 2× | Many places | sRGB or sRGB and Display P3 | 42 | |134×100| 2× | Many places | sRGB or sRGB and Display P3 | 43 | |148×110| 2× | Many places | sRGB or sRGB and Display P3 | 44 | |180×135| 3× | Many places | sRGB or sRGB and Display P3 | 45 | 46 | Full specs for iMessage app icons can be found on [Apple’s developer site](https://developer.apple.com/ios/human-interface-guidelines/resources/). 47 | 48 | ----- 49 | 50 | ### Apple iOS and iPadOS 51 | 52 | - Screen pixel densities: 1×, 2×, 3×. 53 | - Masked: Yes, rounded corners. 54 | - Transparency: Not allowed. 55 | - Layers: 1. 56 | 57 | | Size in pixels | Pixel densities | Uses | Colour space | 58 | |----------------|-----------------|------|--------------| 59 | | 20×20 | 1× | iPad notifications | sRGB or sRGB and Display P3 | 60 | | 29×29 | 1× | Spotlight, Settings | sRGB or sRGB and Display P3 | 61 | | 40×40 | 2× | Notifications | sRGB or sRGB and Display P3 | 62 | | 58×58 | 2× | Spotlight, Settings | sRGB or sRGB and Display P3 | 63 | | 60×60 | 1×, 3× | iPhone home, iPhone notifications | sRGB or sRGB and Display P3 | 64 | | 76×76 | 1× | iPad home | sRGB or sRGB and Display P3 | 65 | | 80×80 | 2× | Spotlight | sRGB or sRGB and Display P3 | 66 | | 87×87 | 3× | Spotlight, Settings | sRGB or sRGB and Display P3 | 67 | | 120×120 | 2×, 3× | iPhone home, Spotlight | sRGB or sRGB and Display P3 | 68 | | 152×152 | 2× | iPad home | sRGB or sRGB and Display P3 | 69 | | 167×167 | 2× | iPad home | sRGB or sRGB and Display P3 | 70 | | 180×180 | 3× | iPhone home | sRGB or sRGB and Display P3 | 71 | | 192×192 | 3× | iPhone home (future) | sRGB or sRGB and Display P3 | 72 | | 1024×1024 | Any or all | iTunes and the App Store | sRGB or sRGB and Display P3 | 73 | 74 | Full specs for iOS app icons can be found on [Apple’s developer site](https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/). [Mike Swanson’s iOS Rounded Rect Script](http://blog.mikeswanson.com/iosroundedrect) was used to create the icon masks for the Apple iOS templates. 75 | 76 | ----- 77 | 78 | ### Apple macOS 79 | 80 | - Screen pixel densities: 1×, 2×. 81 | - Masked: No. 82 | - Transparency: Allowed. 83 | - Layers: 1. 84 | 85 | | Size in pixels | Pixel densities | Uses | Colour space | 86 | |----------------|-----------------|------|--------------| 87 | | 16×16 | 1× | Finder, Dock, many other places | sRGB | 88 | | 32×32 | 1×, 2× | Finder, Dock, many other places | sRGB | 89 | | 64×64 | 1×, 2× | Finder, Dock, many other places | sRGB | 90 | | 128×128 | 1×, 2× | Finder, Dock, many other places | sRGB | 91 | | 256×256 | 1×, 2× | Finder, Dock, many other places | sRGB | 92 | | 512×512 | 1×, 2× | Finder, Dock, many other places | sRGB | 93 | | 1024×1024 | 1×, 2× | Finder, Dock, many other places | sRGB | 94 | 95 | Full specs for macOS app icons can be found on [Apple’s developer site](https://developer.apple.com/design/human-interface-guidelines/macos/icons-and-images/app-icon/). 96 | 97 | ----- 98 | 99 | ### Apple visionOS 100 | 101 | - Screen pixel densities: TBA. 102 | - Masked: Yes, to a circle. 103 | - Transparency: Not allowed on background layer, allowed on top layers. 104 | - Layers: 3. 105 | 106 | | Size in pixels | Pixel densities | Uses | Colour space | 107 | |----------------|-----------------|------|--------------| 108 | | TBA | TBA | TBA | TBA | 109 | 110 | Full specs for visionOS app icons can be found on [Apple’s developer site](https://developer.apple.com/design/human-interface-guidelines/app-icons#visionOS). 111 | 112 | ----- 113 | 114 | ### Apple tvOS 115 | 116 | - Screen pixel densities: 1×, 2×. 117 | - Masked: Yes, with subtle rounded corners. 118 | - Transparency: Not allowed on background layer, allowed on top layers. 119 | - Layers: 5. 120 | 121 | | Size in pixels | Pixel densities | Uses | Colour space | 122 | |----------------|-----------------|------|--------------| 123 | | 400×240 | 1× | Many places | sRGB or sRGB and Display P3 | 124 | | 800×480 | 2× | Many places | sRGB or sRGB and Display P3 | 125 | | 1280×768 | 1×, 2× | App Store | sRGB or sRGB and Display P3 | 126 | 127 | Full specs for tvOS app icons can be found on [Apple’s developer site](https://developer.apple.com/design/human-interface-guidelines/tvos/icons-and-images/app-icon/). 128 | 129 | ----- 130 | 131 | ### Apple watchOS 132 | 133 | - Screen pixel densities: 2× for the device, 2× and 3× for the app icons displayed on iPhones. 134 | - Masked: Yes, to a circle. 135 | - Transparency: Not allowed. 136 | - Layers: 1. 137 | 138 | | Size in pixels | Pixel densities | Uses | Colour space | 139 | |----------------|-----------------|------|--------------| 140 | | 48×48 | 2× | Notification Center | sRGB | 141 | | 55×55 | 2× | Notification Center | sRGB | 142 | | 58×58 | 2× | iPhone | sRGB | 143 | | 66×66 | 2× | Notification Center | sRGB | 144 | | 80×80 | 2× | Long-Look, Home | sRGB | 145 | | 87×87 | 3× | iPhone | sRGB | 146 | | 88×88 | 2× | Long-Look | sRGB | 147 | | 92×92 | 2× | Home | sRGB | 148 | | 100×100 | 2× | Home | sRGB | 149 | | 102×102 | 2× | Home | sRGB | 150 | | 172×172 | 2× | Short-Look | sRGB | 151 | | 196×196 | 2× | Short-Look | sRGB | 152 | | 216×216 | 2× | Short-Look | sRGB | 153 | | 234×234 | 2× | Short-Look | sRGB | 154 | | 1024×1024 | Any or all | iTunes and the App Store | sRGB | 155 | 156 | Full specs for watchOS app icons can be found on [Apple’s developer site](https://developer.apple.com/design/human-interface-guidelines/watchos/icons-and-images/home-screen-icons/). 157 | 158 | ----- 159 | 160 | ### Apple watchOS Complications 161 | 162 | - Screen pixel densities: 2×. 163 | - Masked: Yes. 164 | - Transparency: Allowed. 165 | - Layers: 1. 166 | 167 | Square complications: 168 | 169 | | Size in pixels | Pixel densities | Uses | Colour space | 170 | |----------------|-----------------|------|--------------| 171 | | 22×22 | 2× | Graphic Circular, Graphic Bezel | sRGB | 172 | | 24×24 | 2× | Graphic Circular, Graphic Bezel, Graphic Rectangular | sRGB | 173 | | 27×27 | 2× | Graphic Rectangular | sRGB | 174 | | 28×28 | 2× | Utility Small | sRGB | 175 | | 32×32 | 2× | Circular Small, Utility Small | sRGB | 176 | | 36×36 | 2× | Circular Small, Modular Small | sRGB | 177 | | 38×38 | 2× | Circular Small, Modular Small | sRGB | 178 | | 40×40 | 2× | Circular Small, Utility Small, Graphic Corner | sRGB | 179 | | 42×42 | 2× | Circular Small, Modular Small | sRGB | 180 | | 44×44 | 2× | Circular Small, Utility Small, Graphic Corner | sRGB | 181 | | 48×48 | 2× | Circular Small | sRGB | 182 | | 50×50 | 2× | Circular Small, Utility Small | sRGB | 183 | | 52×52 | 2× | Modular Small | sRGB | 184 | | 54×54 | 2× | Graphic Circular, Graphic Bezel | sRGB | 185 | | 58×58 | 2× | Modular Small | sRGB | 186 | | 62×62 | 2× | Graphic Circular, Graphic Bezel | sRGB | 187 | | 64×64 | 2× | Modular Small, Graphic Corner | sRGB | 188 | | 72×72 | 2× | Graphic Corner | sRGB | 189 | | 84×84 | 2× | Graphic Circular, Graphic Bezel | sRGB | 190 | | 94×94 | 2× | Graphic Circular, Graphic Bezel | sRGB | 191 | 192 | Rectangular complications: 193 | 194 | | Size in pixels | Pixel densities | Uses | Colour space | 195 | |----------------|-----------------|------|--------------| 196 | | 32×14 | 2× | Circular Small | sRGB | 197 | | 34×16 | 2× | Circular Small | sRGB | 198 | | 38×18 | 2× | Circular Small | sRGB | 199 | | 52×28 | 2× | Modular Small | sRGB | 200 | | 58×30 | 2× | Modular Small | sRGB | 201 | | 64×34 | 2× | Modular Small | sRGB | 202 | | 64×22 | 2× | Modular Large | sRGB | 203 | | 74×24 | 2× | Modular Large | sRGB | 204 | | 84×28 | 2× | Modular Large | sRGB | 205 | | 42×18 | 2× | Utility Small, Utility Large | sRGB | 206 | | 44×20 | 2× | Utility Small, Utility Large | sRGB | 207 | | 126×126 | 2× | Extra Large | sRGB | 208 | | 133×133 | 2× | Extra Large | sRGB | 209 | | 146×146 | 2× | Extra Large | sRGB | 210 | | 182×182 | 2× | Extra Large | sRGB | 211 | | 203×203 | 2× | Extra Large | sRGB | 212 | | 224×224 | 2× | Extra Large | sRGB | 213 | | 156×84 | 2× | Extra Large | sRGB | 214 | | 174×90 | 2× | Extra Large | sRGB | 215 | | 192×102 | 2× | Extra Large | sRGB | 216 | | 300×94 | 2× | Graphic Rectangular | sRGB | 217 | | 342×108 | 2× | Graphic Rectangular | sRGB | 218 | 219 | Full specs for watchOS Complications can be found on [Apple’s developer site](https://developer.apple.com/design/human-interface-guidelines/watchos/icons-and-images/complication-images/). 220 | 221 | ----- 222 | 223 | ### Google Android 224 | 225 | - Screen pixel densities: 1×, 1.5×, 2×, 3×, 4×. 226 | - Masked: No. 227 | - Transparency: Allowed. 228 | - Layers: 1. 229 | 230 | | Size in pixels | Pixel densities | Uses | Colour space | 231 | |----------------|-----------------|------|--------------| 232 | | 48×48 | 1× | Launcher and other places | sRGB or Display P3 (API level 26+) | 233 | | 72×72 | 1.5× | Launcher and other places | sRGB or Display P3 (API level 26+) | 234 | | 96×96 | 2× | Launcher and other places | sRGB or Display P3 (API level 26+) | 235 | | 180×180 | 3× | Launcher and other places | sRGB or Display P3 (API level 26+) | 236 | | 192×192 | 4× | Launcher and other places | sRGB or Display P3 (API level 26+) | 237 | | 512×512 | Any or all | Google Play | sRGB or Display P3 (API level 26+) | 238 | 239 | Full specs for Android app icons can be found on [Google’s developer site](https://material.io/design/iconography/#icons-product-icons). 240 | 241 | ----- 242 | 243 | ### Google Android Adaptive Icons 244 | 245 | - Screen pixel densities: 1×, 1.5×, 2×, 3×, 4×. 246 | - Masked: Yes. 247 | - Transparency: Allowed on foreground layer, not allowed background layer. 248 | - Layers: 2. 249 | 250 | | Size in pixels | Pixel densities | Uses | Colour space | 251 | |----------------|-----------------|------|--------------| 252 | | 108×108 | 1× | Launcher and other places | sRGB or Display P3 (API level 26+) | 253 | | 162×162 | 1.5× | Launcher and other places | sRGB or Display P3 (API level 26+) | 254 | | 216×216 | 2× | Launcher and other places | sRGB or Display P3 (API level 26+) | 255 | | 324×324 | 3× | Launcher and other places | sRGB or Display P3 (API level 26+) | 256 | | 432×432 | 4× | Launcher and other places | sRGB or Display P3 (API level 26+) | 257 | 258 | Full specs for Android Adaptive Icons can be found on [Google’s developer site](https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive). 259 | 260 | ----- 261 | 262 | ### Microsoft Windows 263 | 264 | - Screen pixel densities: 1×, 1.25×, 1.5×, 2×, 4×. 265 | - Masked: No. 266 | - Transparency: Allowed. 267 | - Layers: 1. 268 | 269 | | Size in pixels | Pixel densities | Uses | Colour space | 270 | |----------------|-----------------|------|--------------| 271 | | 16×16 | Any or all | Many places | sRGB | 272 | | 32×32 | Any or all | Many places | sRGB | 273 | | 48×48 | Any or all | Many places | sRGB | 274 | | 256×256 | Any or all | Many places | sRGB | 275 | 276 | Full specs for Windows app icons can be found on [Microsoft’s developer site](https://docs.microsoft.com/en-au/windows/desktop/uxguide/vis-icons). 277 | 278 | ----- 279 | 280 | ### Microsoft Windows Tiles 281 | 282 | - Screen pixel densities: 1×, 1.25×, 1.5×, 2×, 4×. 283 | - Masked: No. 284 | - Transparency: Allowed. 285 | - Layers: 1. 286 | 287 | | Size in pixels | Pixel densities | Uses | Colour space | 288 | |----------------|-----------------|------|--------------| 289 | | 44×44 | 1× | App list | sRGB | 290 | | 55×55 | 1.25× | App list | sRGB | 291 | | 66×66 | 1.5× | App list | sRGB | 292 | | 88×88 | 2× | App list | sRGB | 293 | | 176×176 | 4× | App list | sRGB | 294 | | 71×71 | 1× | Small tile | sRGB | 295 | | 89×89 | 1.25× | Small tile | sRGB | 296 | | 107×107 | 1.5× | Small tile | sRGB | 297 | | 142×142 | 2× | Small tile | sRGB | 298 | | 284×284 | 4× | Small tile | sRGB | 299 | | 150×150 | 1× | Medium tile | sRGB | 300 | | 188×188 | 1.25× | Medium tile | sRGB | 301 | | 225×225 | 1.5× | Medium tile | sRGB | 302 | | 300×300 | 2× | Medium tile | sRGB | 303 | | 600×600 | 4× | Medium tile | sRGB | 304 | | 310×150 | 1× | Wide tile | sRGB | 305 | | 388×188 | 1.25× | Wide tile | sRGB | 306 | | 465×225 | 1.5× | Wide tile | sRGB | 307 | | 620×300 | 2× | Wide tile | sRGB | 308 | | 1240×600 | 4× | Wide tile | sRGB | 309 | | 310×310 | 1× | Large tile (desktop only) | sRGB | 310 | | 388×388 | 1.25× | Large tile (desktop only) | sRGB | 311 | | 465×465 | 1.5× | Large tile (desktop only) | sRGB | 312 | | 620×620 | 2× | Large tile (desktop only) | sRGB | 313 | | 1240×1240 | 4× | Large tile (desktop only) | sRGB | 314 | 315 | Full specs for Windows tiles can be found on [Microsoft’s developer site](https://docs.microsoft.com/en-au/windows/uwp/design/style/app-icons-and-logos). 316 | 317 | ----- 318 | 319 | ### Web favicons 320 | 321 | - Screen pixel densities: 1×, 2×, and others. 322 | - Masked: Often not masked. Sometimes rounded corners. 323 | - Transparency: Allowed. 324 | - Layers: 1. 325 | 326 | | Size in pixels | Pixel densities | Uses | Colour space | 327 | |----------------|-----------------|------|--------------| 328 | | 16×16 | Any or all | Many places | sRGB | 329 | | 32×32 | Any or all | Many places | sRGB | 330 | | 144×144 | Any or all | IE/Edge pinned site | sRGB | 331 | | 152×152 | Any or all | iOS and Android | sRGB | 332 | | 180×180 | Any or all | iOS and Android | sRGB | 333 | 334 | [Audrey Roy Greenfeld’s Favicon Cheat Sheet](https://github.com/audreyr/favicon-cheat-sheet) is a great resource for web favicon sizes, as is [Wikipedia’s Favicon page](https://en.wikipedia.org/wiki/Favicon). 335 | -------------------------------------------------------------------------------- /Help/License.md: -------------------------------------------------------------------------------- 1 | ### License 2 | 3 | ©2019 Bjango and Marc Edwards. Released under the BSD license. All rights reserved. 4 | 5 | Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 6 | 7 | - Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. 8 | 9 | - Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. 10 | 11 | - Neither the name of Bjango Templates nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. 12 | 13 | This software is provided by the copyright holders and contributors “as is” and any express or implied warranties, including, but not limited to, the implied warranties of merchantability and fitness for a particular purpose are disclaimed. in no event shall the copyright holder or contributors be liable for any direct, indirect, incidental, special, exemplary, or consequential damages (including, but not limited to, procurement of substitute goods or services; loss of use, data, or profits; or business interruption) however caused and on any theory of liability, whether in contract, strict liability, or tort (including negligence or otherwise) arising in any way out of the use of this software, even if advised of the possibility of such damage. 14 | -------------------------------------------------------------------------------- /Help/Scaling.md: -------------------------------------------------------------------------------- 1 | # Bitmap vs vector scaling 2 | 3 | There are different methods that can be used to resize icon artwork. Bitmap scaling is usually more convenient, but it produces worse results. 4 | 5 | ![](images/scaling.gif) 6 | 7 | ### Bitmap scaling 8 | 9 | Bitmap scaling takes the final image result — a grid of pixels — and tries as best as possible to map the source pixel grid to the destination grid. There are many techniques for doing this, and some incorporate additional processing, like sharpening. Bitmap scaling can end up with obvious scaling artefacts, as the halos around the light squares show above. 10 | 11 | Bitmap scaling isn’t a good way to scale icon artwork. The `Smart Objects (for preview only)` group in the Photoshop app icon templates use Smart Objects, and [Smart Objects bitmap scale](https://bjango.com/articles/smartobjects/), so I don’t recommend using them for final production assets. 12 | 13 | ----- 14 | 15 | ### Vector scaling 16 | 17 | Vector scaling takes the original layers and groups of vector objects — the rectangles, ellipses and freeform paths — and scales their positions and sizes. Once the new sizes have been calculated, each layer of the artwork is rendered again at the new size, then composited together. This is the preferable technique when scaling icon artwork, or anything that it predominately vector-based. 18 | 19 | ----- 20 | 21 | ### Hand tweaked vector scaling 22 | 23 | For the best results, vector scaled artwork may still require additional tweaks for each icon size, especially for smaller icons. This is because the position and size of elements may not fall on exact pixel boundaries, resulting in blurry edges, especially for horizontal and vertical lines. 24 | 25 | Editing your icon’s shapes so they fall on exact pixel boundaries can be a time consuming process, but it does yield better results. For the icons sizes you really care about, I recommend vector scaling, then hand tweaking. 26 | 27 | Sometimes it is possible to construct icons using a grid that aligns well to other icon sizes. For example, drawing a macOS icon so the main shapes are pixel boundary aligned at the 16×16 pixel size means they will still be pixel boundary aligned at 32×32, 64×64, 128×128 and all other exact multiples of 16×16. This is not possible with iOS icon sizes though, because the required size don’t relate the same way. -------------------------------------------------------------------------------- /Help/Style Guide.md: -------------------------------------------------------------------------------- 1 | # Bjango App Icon Templates style guide 2 | 3 | This style guide is intended for template creators, not necessarily for those using the templates. It should help ensure consistency across all app icon templates, where possible. Platform requirements may mean different templates require different approaches, but the information below should set some sensible defaults. 4 | 5 | ![](images/example-template.png) 6 | 7 | The [iOS app icon template](https://github.com/bjango/Bjango-Templates/blob/master/Photoshop/App%20Icon%20-%20Apple%20iOS.psd) shown above (with the `Labels` group turned on) is a good example of the app icon templates, because it includes all the recommended and optional layers. 8 | 9 | ----- 10 | 11 | ### Recommended layers 12 | 13 | An `Icon Artwork` layer or group should be present to denote where artwork is to be placed. If it makes sense, folders for each icon size should also be included with basic example artwork. This layer or group should be unlocked. 14 | 15 | Slice layers used in Sketch should be locked, to make it easier to select artwork layers, and to make it more difficult to accidentally edit them. 16 | 17 | Where possible, a `Labels` group should denote icon areas and icon sizes. Icon areas should be coloured according to their [scaling factor](https://github.com/bjango/Bjango-Templates/blob/master/Help/Style%20Guide.md#scaling-factors). If possible, the `Labels` group should be locked. Text labels to indicate the size of each icon should be provided, using Helvetica Light, 14pt/22pt, `#000000` at 80% opacity. The text labels should indicate the size of the icon in pixels (not points or pt or dp or dip). If the icon is so small that text doesn’t fit, create it, but hide the layer. 18 | 19 | If the platform masks icons, provide a `Icon Masks` group that masks non-icon areas to `#333333`. 20 | 21 | A base `Background` layer that fills the entire canvas with `#333333` should also be provided (it allows for easy testing on different backgrounds, as well as providing a neutral starting point). 22 | 23 | If the design tool supports it, all the non-`Icon Artwork` layers and groups can be coloured. In Photoshop and Illustrator, they’re violet. 24 | 25 | ----- 26 | 27 | ### Optional layers 28 | 29 | In some cases, it might be nice to provide additional layers to indicate common icon element sizing. As an example, the OS X app icon template shows the common circular icon size (and a size that perfectly scales to the required icon sizes). These should probably be included in the `Labels` layer or group, and set to `#000000` at 15% opacity. 30 | 31 | ----- 32 | 33 | ### Scaling factors 34 | 35 | Where sensible to do so, icon labels should be coloured according to their screen pixel density scale factor. 36 | 37 | ![](images/pixel-density-colours.png) 38 | 39 | Here’s the corresponding HEX values: 40 | 41 | - 1.0×: `#5fcbe2` _(base scale, mdpi, non-Retina)_ 42 | - 1.25×: `#539eea` _(whhhhyyyy?!)_ 43 | - 1.5×: `#4a79f1` 44 | - 2.0×: `#945ae0` _(xhdpi, Retina, @2x)_ 45 | - 3.0×: `#fc6665` _(xxhdpi, @3x)_ 46 | - 4.0×: `#f39e50` _(xxxhdpi)_ 47 | - 5.0×: `#f8ef62` _(reserved for the future)_ 48 | - Any or all: `#b3b3b3` 49 | - Inactive: `#4d4d4d` 50 | 51 | When it is not appropriate to use a scale colour, use the `Any or all` grey. When an icon size is worth including, but isn’t part of the required sizes for the platform, it should be indicated with the `Inactive` colour. 52 | 53 | ----- 54 | 55 | ### Spacing 56 | 57 | Icons can be grouped in any way that makes sense, but if possible increase base icon size on the X axis and increase screen density on the Y axis. Spacing should be 20px for grouped icons and 50px for between groups. Document padding should be 50px. The iOS template is a good example of this. 58 | 59 | ![](images/style-guide-spacing.png) 60 | 61 | ----- 62 | 63 | ### Document DPI 64 | 65 | Documents should be set up as 72dpi, were possible. There’s a few reasons for this, including more predictable behaviour when moving layers between Photoshop documents. 66 | 67 | ----- 68 | 69 | ### Document names 70 | 71 | The document names use a format of: `What It Is` in Title Case, then ` - ` (space, dash, space), then the `Manufacturer And Platform` in Title Case. If additional versions are needed, they can be shown in parenthesis. 72 | 73 | Some examples: 74 | 75 | - `App Icon - Apple iOS` - `App Icon - Apple watchOS` 76 | - `App Icon - Google Android` 77 | 78 | Sometimes you may have to wing it a little: 79 | - `Favicon - Web` 80 | 81 | ----- 82 | 83 | ### Platform naming order 84 | 85 | Platform names should be in alphabetical order, when listed with their full names (as per the [document names](https://github.com/bjango/Bjango-Templates/blob/master/Help/Style%20Guide.md#platform-naming-order) above). 86 | 87 | ----- 88 | 89 | ### Exporting and filenames 90 | 91 | Where possible, slices should be used for exporting in Photoshop, Illustrator, Affinity Designer and Sketch. 92 | 93 | Icons that require overlapping artwork may use a different strategy. The Apple TV (tvOS) template is an example of this — the parallax nature of the icons required Generator-style exporting for Photoshop, but slices in Sketch. 94 | 95 | Filenames for exporting should be lowercase letters with dashes (lisp-case), unless platform requirements state otherwise. Use `icon-512` as the export name (where `512` is the icon size). Some icons need correct suffixes. For example, `icon-512` might need to be `icon-256@2x`. 96 | 97 | When it’s ideal for a folder to be created as part of the export, a hash (“#”) should be used in the filename. This is so Hazel and other tools can be used to automate the process of renaming and moving the files into folders. A Hazel rule to do this is part of [Bjango Actions](https://github.com/bjango/Bjango-Actions). The Android icons demonstrate this, converting `drawable-hdpi#icon` into `drawable-hdpi/icon.png`. 98 | 99 | ----- 100 | 101 | ### Colour management 102 | 103 | Unless there’s a really good reason not to, documents are set up as sRGB. When designing for mobile, you should always preview on the target device(s) when choosing final colours. When designing for web, you should preview in multiple browsers, because they can have different colour management behaviour. 104 | 105 | [Skala Preview](https://bjango.com/mac/skalapreview/) and other tools can be used for device preview. -------------------------------------------------------------------------------- /Help/Version History.md: -------------------------------------------------------------------------------- 1 | # Bjango App Icon Templates version history 2 | 3 | ### 1.9 4 | 5 | 9 April 2020 6 | 7 | - Improved Android app icon template export names. 8 | - Improved Android app Play store icon background area. 9 | - Updated Sketch docs to latest doc format. 10 | 11 | ### 1.8 12 | 13 | 21 September 2018 14 | 15 | - Removed the Sketch quick templates (no longer needed, as the other Sketch templates are better and use symbols). 16 | - Added some more colour management info. 17 | 18 | ### 1.7 19 | 20 | 8 March 2018 21 | 22 | - Updated all iOS app icon templates to include 40×40 and 180×180px. 23 | 24 | ### 1.6 25 | 26 | 1 April 2017 27 | 28 | - Sketch iOS, macOS, tvOS, watchOS, Android, Android adaptive, and web favicon templates now use symbols. 29 | 30 | ### 1.5 31 | 32 | 27 March 2017 33 | 34 | - Added Android adaptive icon templates. 35 | - Improved layer name consistency across templates. 36 | 37 | ### 1.4 38 | 39 | 25 July 2016 40 | 41 | - Added initial iMessage app icon templates (more improvements to come). 42 | - Improved PNG optimisation for Affinity Designer templates. 43 | 44 | ### 1.3 45 | 46 | 22 July 2016 47 | 48 | - Added info on how to save all icons for Photoshop, Illustrator, Sketch and Affinity Designer. 49 | - Added “All Icons” slices to the Sketch templates. 50 | 51 | ### 1.2 52 | 53 | 15 June 2016 54 | 55 | - Added Sketch 3.8.1 archived templates. 56 | - Renamed “OS X” to “macOS” across all templates and documentation. 57 | 58 | ### 1.1 59 | 60 | 27 May 2016 61 | 62 | - Added Photoshop (Generator) templates. 63 | 64 | ### 1.0.1 65 | 66 | 27 January 2016 67 | 68 | - Improved iOS Sketch template. 69 | - Improved iOS Android template. 70 | - Fixed Android circular product icon guides. 71 | - Added Android horizontal, vertical and square product icon guides. 72 | - Removed iOS 40px icon size (not needed). 73 | - Complies with iOS 9, watchOS 2, tvOS 1, Android 6, and Windows 10 UWP. 74 | 75 | ### 1.0 76 | 77 | 26 January 2016 78 | 79 | - Initial release. 80 | - Complies with iOS 9, watchOS 2, tvOS 1, Android 6, and Windows 10 UWP. -------------------------------------------------------------------------------- /Help/images/create-step-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Help/images/create-step-1.png -------------------------------------------------------------------------------- /Help/images/create-step-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Help/images/create-step-2.png -------------------------------------------------------------------------------- /Help/images/create-step-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Help/images/create-step-3.png -------------------------------------------------------------------------------- /Help/images/example-template.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Help/images/example-template.png -------------------------------------------------------------------------------- /Help/images/hashes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Help/images/hashes.png -------------------------------------------------------------------------------- /Help/images/icon-masks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Help/images/icon-masks.png -------------------------------------------------------------------------------- /Help/images/photoshop-slices.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Help/images/photoshop-slices.png -------------------------------------------------------------------------------- /Help/images/photoshop-smart-objects.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Help/images/photoshop-smart-objects.png -------------------------------------------------------------------------------- /Help/images/pixel-density-colours.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Help/images/pixel-density-colours.png -------------------------------------------------------------------------------- /Help/images/scaling.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Help/images/scaling.gif -------------------------------------------------------------------------------- /Help/images/sketch-install.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Help/images/sketch-install.png -------------------------------------------------------------------------------- /Help/images/sketch-ios-quick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Help/images/sketch-ios-quick.png -------------------------------------------------------------------------------- /Help/images/sketch-slices.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Help/images/sketch-slices.png -------------------------------------------------------------------------------- /Help/images/style-guide-spacing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Help/images/style-guide-spacing.png -------------------------------------------------------------------------------- /Help/images/templates-hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Help/images/templates-hero.png -------------------------------------------------------------------------------- /Illustrator/App Icon - Apple iMessage.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Illustrator/App Icon - Apple iMessage.ai -------------------------------------------------------------------------------- /Illustrator/App Icon - Apple iOS.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Illustrator/App Icon - Apple iOS.ai -------------------------------------------------------------------------------- /Illustrator/App Icon - Apple macOS.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Illustrator/App Icon - Apple macOS.ai -------------------------------------------------------------------------------- /Illustrator/App Icon - Apple tvOS.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Illustrator/App Icon - Apple tvOS.ai -------------------------------------------------------------------------------- /Illustrator/App Icon - Apple watchOS.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Illustrator/App Icon - Apple watchOS.ai -------------------------------------------------------------------------------- /Illustrator/App Icon - Google Android adaptive icon.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Illustrator/App Icon - Google Android adaptive icon.ai -------------------------------------------------------------------------------- /Illustrator/App Icon - Google Android.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Illustrator/App Icon - Google Android.ai -------------------------------------------------------------------------------- /Illustrator/App Icon - Microsoft Windows Tiles.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Illustrator/App Icon - Microsoft Windows Tiles.ai -------------------------------------------------------------------------------- /Illustrator/App Icon - Microsoft Windows.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Illustrator/App Icon - Microsoft Windows.ai -------------------------------------------------------------------------------- /Illustrator/Favicon - Web.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Illustrator/Favicon - Web.ai -------------------------------------------------------------------------------- /PNG/App Icon - Apple iMessage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/PNG/App Icon - Apple iMessage.png -------------------------------------------------------------------------------- /PNG/App Icon - Apple iOS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/PNG/App Icon - Apple iOS.png -------------------------------------------------------------------------------- /PNG/App Icon - Apple macOS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/PNG/App Icon - Apple macOS.png -------------------------------------------------------------------------------- /PNG/App Icon - Apple tvOS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/PNG/App Icon - Apple tvOS.png -------------------------------------------------------------------------------- /PNG/App Icon - Apple watchOS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/PNG/App Icon - Apple watchOS.png -------------------------------------------------------------------------------- /PNG/App Icon - Google Android adaptive icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/PNG/App Icon - Google Android adaptive icon.png -------------------------------------------------------------------------------- /PNG/App Icon - Google Android.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/PNG/App Icon - Google Android.png -------------------------------------------------------------------------------- /PNG/App Icon - Microsoft Windows Tiles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/PNG/App Icon - Microsoft Windows Tiles.png -------------------------------------------------------------------------------- /PNG/App Icon - Microsoft Windows.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/PNG/App Icon - Microsoft Windows.png -------------------------------------------------------------------------------- /PNG/Favicon - Web.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/PNG/Favicon - Web.png -------------------------------------------------------------------------------- /Photoshop (Generator)/App Icon - Apple iMessage.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Photoshop (Generator)/App Icon - Apple iMessage.psd -------------------------------------------------------------------------------- /Photoshop (Generator)/App Icon - Apple iOS.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Photoshop (Generator)/App Icon - Apple iOS.psd -------------------------------------------------------------------------------- /Photoshop (Generator)/App Icon - Apple macOS.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Photoshop (Generator)/App Icon - Apple macOS.psd -------------------------------------------------------------------------------- /Photoshop (Generator)/App Icon - Apple tvOS.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Photoshop (Generator)/App Icon - Apple tvOS.psd -------------------------------------------------------------------------------- /Photoshop (Generator)/App Icon - Apple watchOS.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Photoshop (Generator)/App Icon - Apple watchOS.psd -------------------------------------------------------------------------------- /Photoshop (Generator)/App Icon - Google Android adaptive icon.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Photoshop (Generator)/App Icon - Google Android adaptive icon.psd -------------------------------------------------------------------------------- /Photoshop (Generator)/App Icon - Google Android.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Photoshop (Generator)/App Icon - Google Android.psd -------------------------------------------------------------------------------- /Photoshop (Generator)/Favicon - Web.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Photoshop (Generator)/Favicon - Web.psd -------------------------------------------------------------------------------- /Photoshop/App Icon - Apple iMessage.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Photoshop/App Icon - Apple iMessage.psd -------------------------------------------------------------------------------- /Photoshop/App Icon - Apple iOS.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Photoshop/App Icon - Apple iOS.psd -------------------------------------------------------------------------------- /Photoshop/App Icon - Apple macOS.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Photoshop/App Icon - Apple macOS.psd -------------------------------------------------------------------------------- /Photoshop/App Icon - Apple tvOS.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Photoshop/App Icon - Apple tvOS.psd -------------------------------------------------------------------------------- /Photoshop/App Icon - Apple watchOS.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Photoshop/App Icon - Apple watchOS.psd -------------------------------------------------------------------------------- /Photoshop/App Icon - Google Android adaptive icon.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Photoshop/App Icon - Google Android adaptive icon.psd -------------------------------------------------------------------------------- /Photoshop/App Icon - Google Android.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Photoshop/App Icon - Google Android.psd -------------------------------------------------------------------------------- /Photoshop/App Icon - Microsoft Windows Tiles.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Photoshop/App Icon - Microsoft Windows Tiles.psd -------------------------------------------------------------------------------- /Photoshop/App Icon - Microsoft Windows.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Photoshop/App Icon - Microsoft Windows.psd -------------------------------------------------------------------------------- /Photoshop/Favicon - Web.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Photoshop/Favicon - Web.psd -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | ![](Help/images/templates-hero.png) 2 | 3 | # Bjango App Icon Templates 4 | 5 | The [Bjango App Icon Templates](https://bjango.com/designresources/) are a comprehensive set of app icon templates for Photoshop, Illustrator, Sketch, and Affinity Designer. The templates cover Android, iOS, macOS, Apple TV (tvOS), Apple Watch (watchOS), iMessage, Windows, Windows Phone and web favicons. Where possible, they’re set up to automate exporting final production assets. All free and open source, released under the [BSD license](https://github.com/bjango/Bjango-Templates/blob/master/Help/License.md). 6 | 7 | **Download:** **[Bjango App Icon Templates](https://github.com/bjango/Bjango-Templates/archive/master.zip)** — 1.9 ([version history](https://github.com/bjango/Bjango-Templates/blob/master/Help/Version%20History.md)) 8 | 9 | ----- 10 | 11 | ### Help 12 | 13 | - [Adding your artwork](https://github.com/bjango/Bjango-Templates/blob/master/Help/Help.md#adding-your-artwork) 14 | - [Using the Photoshop templates](https://github.com/bjango/Bjango-Templates/blob/master/Help/Help.md#using-the-photoshop-templates) 15 | - [Using the Illustrator templates](https://github.com/bjango/Bjango-Templates/blob/master/Help/Help.md#using-the-illustrator-templates) 16 | - [Using the Sketch templates](https://github.com/bjango/Bjango-Templates/blob/master/Help/Help.md#using-the-sketch-templates) 17 | - [Using the Affinity Designer templates](https://github.com/bjango/Bjango-Templates/blob/master/Help/Help.md#using-the-affinity-designer-templates) 18 | - [Using other design tools](https://github.com/bjango/Bjango-Templates/blob/master/Help/Help.md#using-other-design-tools) 19 | - [iOS, tvOS and other icon masks](https://github.com/bjango/Bjango-Templates/blob/master/Help/Help.md#ios-tvos-and-other-icon-masks) 20 | - [Bitmap vs vector scaling](https://github.com/bjango/Bjango-Templates/blob/master/Help/Scaling.md) 21 | - [Hashes in export names](https://github.com/bjango/Bjango-Templates/blob/master/Help/Help.md#hashes-in-export-names) 22 | - [Compressing images](https://github.com/bjango/Bjango-Templates/blob/master/Help/Help.md#compressing-images) 23 | - [Platform icon sizes](https://github.com/bjango/Bjango-Templates/blob/master/Help/Icon%20Sizes.md) 24 | - [Style guide](https://github.com/bjango/Bjango-Templates/blob/master/Help/Style%20Guide.md) 25 | - [Colour management](https://github.com/bjango/Bjango-Templates/blob/master/Help/Help.md#colour%20management) 26 | - [Tips](https://github.com/bjango/Bjango-Templates/blob/master/Help/Help.md#tips) 27 | - [Version history](https://github.com/bjango/Bjango-Templates/blob/master/Help/Version%20History.md) 28 | - [License](https://github.com/bjango/Bjango-Templates/blob/master/Help/License.md) 29 | - [Feedback and future plans](https://github.com/bjango/Bjango-Templates/blob/master/Help/Help.md#feedback-and-future-plans) 30 | 31 | An overview of some common layers included in the templates: 32 | 33 | `Labels` — Indicate icon sizes and scale factor. 34 | `Icon Masks` — In cases where the OS masks icons, this group fills non-icon areas, showing you how icons will be masked. 35 | `Icon Artwork` — Place your icon artwork here. 36 | 37 | In some cases, all layers and groups except the `Icon Artwork` group will need to be hidden before exporting. For most templates, exporting is set up using slices. Short questions can be sent to [@marcedwards](https://twitter.com/marcedwards) or [@bjango](https://twitter.com/bjango) on Twitter. More verbose questions can be sent via the [Bjango contact page](https://bjango.com/contact/). If you notice any errors, please let me know. 38 | 39 | ----- 40 | 41 | ### Legal 42 | 43 | Apple, iPhone, iOS, tvOS, Apple TV and Apple Watch are trademarks of Apple Inc., registered in the U.S. and other countries. Microsoft and Windows are trademarks of Microsoft Corporation Inc., registered in the U.S. and other countries. Google and Android are trademarks of Google Inc., registered in the U.S. and other countries. 44 | 45 | ``` 46 | ::::::::: ::::::: :::: :::: ::: :::::::: :::::::: 47 | :+: :+: :+: :+: :+: :+:+: :+: :+: :+: :+: :+: 48 | +:+ +:+ +:+ +:+ +:+ :+:+:+ +:+ +:+ +:+ +:+ 49 | +#++:++#+ +#+ +#++:++#++: +#+ +:+ +#+ :#: +#+ +:+ 50 | +#+ +#+ +#+ +#+ +#+ +#+ +#+#+# +#+ +#+# +#+ +#+ 51 | #+# #+# #+# #+# #+# #+# #+# #+#+# #+# #+# #+# #+# 52 | ######### ##### ### ### ### #### ######## ######## 53 | ``` 54 | -------------------------------------------------------------------------------- /Sketch/App Icon - Apple iOS.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Sketch/App Icon - Apple iOS.sketch -------------------------------------------------------------------------------- /Sketch/App Icon - Apple macOS Big Sur.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Sketch/App Icon - Apple macOS Big Sur.sketch -------------------------------------------------------------------------------- /Sketch/App Icon - Apple macOS.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Sketch/App Icon - Apple macOS.sketch -------------------------------------------------------------------------------- /Sketch/App Icon - Apple tvOS.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Sketch/App Icon - Apple tvOS.sketch -------------------------------------------------------------------------------- /Sketch/App Icon - Apple watchOS.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Sketch/App Icon - Apple watchOS.sketch -------------------------------------------------------------------------------- /Sketch/App Icon - Google Android adaptive icon.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Sketch/App Icon - Google Android adaptive icon.sketch -------------------------------------------------------------------------------- /Sketch/App Icon - Google Android.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Sketch/App Icon - Google Android.sketch -------------------------------------------------------------------------------- /Sketch/App Icon - Microsoft Windows Tiles.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Sketch/App Icon - Microsoft Windows Tiles.sketch -------------------------------------------------------------------------------- /Sketch/App Icon - Microsoft Windows.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Sketch/App Icon - Microsoft Windows.sketch -------------------------------------------------------------------------------- /Sketch/Favicon - Web.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bjango/Bjango-Templates/079183f5670b0c509c38c5f88179fdb287bb3b00/Sketch/Favicon - Web.sketch -------------------------------------------------------------------------------- /Sketch/Install Sketch templates.command: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # Copy all the Sketch templates! 4 | 5 | echo 6 | echo "Installing Sketch templates…" 7 | 8 | mkdir -p ~/Library/Application\ Support/com.bohemiancoding.sketch3/Templates 9 | 10 | cd "$(dirname "$0")" 11 | 12 | cp "App Icon - Apple iOS.sketch" ~/Library/Application\ Support/com.bohemiancoding.sketch3/Templates/ 13 | cp "App Icon - Apple macOS.sketch" ~/Library/Application\ Support/com.bohemiancoding.sketch3/Templates/ 14 | cp "App Icon - Apple tvOS.sketch" ~/Library/Application\ Support/com.bohemiancoding.sketch3/Templates/ 15 | cp "App Icon - Apple watchOS.sketch" ~/Library/Application\ Support/com.bohemiancoding.sketch3/Templates/ 16 | cp "App Icon - Google Android.sketch" ~/Library/Application\ Support/com.bohemiancoding.sketch3/Templates/ 17 | cp "App Icon - Microsoft Windows Tiles.sketch" ~/Library/Application\ Support/com.bohemiancoding.sketch3/Templates/ 18 | cp "App Icon - Apple macOS Big Sur.sketch" ~/Library/Application\ Support/com.bohemiancoding.sketch3/Templates/ 19 | cp "App Icon - Microsoft Windows.sketch" ~/Library/Application\ Support/com.bohemiancoding.sketch3/Templates/ 20 | cp "Favicon - Web.sketch" ~/Library/Application\ Support/com.bohemiancoding.sketch3/Templates/ 21 | 22 | echo 23 | echo -e "All done! The Bjango App Icon Templates should now be available from inside\nSketch under the File → New From Template menu." 24 | 25 | echo 26 | echo 27 | echo " ::::::::: ::::::: :::: :::: ::: :::::::: ::::::::" 28 | echo " :+: :+: :+: :+: :+: :+:+: :+: :+: :+: :+: :+:" 29 | echo " +:+ +:+ +:+ +:+ +:+ :+:+:+ +:+ +:+ +:+ +:+ " 30 | echo " +#++:++#+ +#+ +#++:++#++: +#+ +:+ +#+ :#: +#+ +:+ " 31 | echo " +#+ +#+ +#+ +#+ +#+ +#+ +#+#+# +#+ +#+# +#+ +#+ " 32 | echo " #+# #+# #+# #+# #+# #+# #+# #+#+# #+# #+# #+# #+# " 33 | echo " ######### ##### ### ### ### #### ######## ######## " 34 | echo 35 | echo 36 | --------------------------------------------------------------------------------