{"id":1894,"date":"2019-09-09T12:32:45","date_gmt":"2019-09-09T12:32:45","guid":{"rendered":"https:\/\/architsingh.com\/webioticnew\/?p=1342"},"modified":"2021-07-05T10:28:09","modified_gmt":"2021-07-05T10:28:09","slug":"app-icon-template","status":"publish","type":"post","link":"https:\/\/architsingh.com\/webioticnew\/app-icon-template\/","title":{"rendered":"App Icon Template &#8211; How to Make One, and Do it Right"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; disabled_on=&#8221;off|off|off&#8221; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; use_background_color_gradient=&#8221;on&#8221; background_color_gradient_start=&#8221;rgba(255,255,255,0.54)&#8221; background_color_gradient_end=&#8221;rgba(255,255,255,0.67)&#8221; background_color_gradient_overlays_image=&#8221;on&#8221; background_image=&#8221;https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/Banner3-1-min.jpg&#8221; custom_padding=&#8221;100px||100px||true|false&#8221; global_module=&#8221;5926&#8243; saved_tabs=&#8221;all&#8221;][et_pb_row _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; width=&#8221;70%&#8221; width_tablet=&#8221;90%&#8221; width_phone=&#8221;&#8221; width_last_edited=&#8221;on|phone&#8221; custom_padding=&#8221;100px||100px||true|false&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.8.0&#8243; _module_preset=&#8221;default&#8221;][et_pb_sidebar area=&#8221;et_pb_widget_area_4&#8243; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; header_text_align=&#8221;center&#8221; header_text_color=&#8221;#000000&#8243;][\/et_pb_sidebar][et_pb_post_title featured_image=&#8221;off&#8221; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; title_font=&#8221;Nexa-Bold|700|||||||&#8221; title_text_align=&#8221;center&#8221; title_text_color=&#8221;#000000&#8243; title_font_size=&#8221;44px&#8221; meta_font=&#8221;Nexa Regular|500|||||||&#8221; meta_text_align=&#8221;center&#8221; meta_text_color=&#8221;#2ea0d2&#8243; meta_font_size=&#8221;15px&#8221;][\/et_pb_post_title][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.8.0&#8243; _module_preset=&#8221;default&#8221;][et_pb_row column_structure=&#8221;2_3,1_3&#8243; module_class=&#8221;blog-cnt-row&#8221; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; width=&#8221;90%&#8221; max_width=&#8221;1280px&#8221; module_alignment=&#8221;center&#8221;][et_pb_column type=&#8221;2_3&#8243; _builder_version=&#8221;4.8.0&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; text_font=&#8221;Helvetica||||||||&#8221; text_text_color=&#8221;#26282d&#8221; text_font_size=&#8221;18px&#8221; text_letter_spacing=&#8221;0.03em&#8221; text_line_height=&#8221;1.8em&#8221; header_2_font=&#8221;Helvetica Bold||||||||&#8221; header_2_text_color=&#8221;#26282d&#8221; header_2_font_size=&#8221;50px&#8221; header_2_line_height=&#8221;54px&#8221; header_3_font=&#8221;Nexa Bold||||||||&#8221; header_3_text_color=&#8221;#26282d&#8221; header_3_font_size=&#8221;24px&#8221; header_4_font=&#8221;Nexa Bold||||||||&#8221; header_4_text_color=&#8221;#26282d&#8221;]<\/p>\n<p>If you\u2019re in the midst of <a href=\"https:\/\/architsingh.com\/webioticnew\/app-development\/\">developing a brand new mobile app<\/a>, the app icon may be the last thing on your mind, but it\u2019s actually an incredibly important aspect of the project and should be given its due diligence.<\/p>\n<p>In short, an app icon is a visual representation of your app displayed in the app store and on your home screen. It\u2019s one of the first encounters your users will have with your mobile app and so it\u2019s a fundamental component in building a positive and memorable user experience.<\/p>\n<p>And once you&#8217;re ready to move on to creating an app preview video for app stores, you can learn how in this video.<\/p>\n<p><iframe loading=\"lazy\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/VG8lN88T20I\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p><strong>In this article, we\u2019re going to cover the whole topic of app icon template and give you some useful tricks that will help you design the best app icon and run through how to get started.<\/strong><\/p>\n<h2>Tips and Tricks to Design the Perfect App Icon<\/h2>\n<p>Remember, a good app icon can go a long way in swaying a user to download your app. Just like a catchy app title, description, and thumbnails, the app icon is what will help capture your users and pique their interest. It\u2019s one of the first things a user will see before deciding to download your app, so it has to be grabbing.<\/p>\n<p>Let\u2019s review a few useful tips that will get you on your way.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/image2-11.png\" alt=\"app icon template \" class=\"wp-image-1343\"\/><\/figure>\n<\/div>\n<h3>Make your App Icon Memorable and Recognizable<\/h3>\n<p>When designing a successful app icon, factors like visual attractiveness, simplicity, and being in step with platform guidelines are all important, but making it memorable and recognizable is key.<\/p>\n<p>If I told you to imagine the Uber or Facebook icon, I bet you could easily picture them in your mind without looking at your phone. And it\u2019s not just because you use these apps all the time (sure, that helps in remembering them), it\u2019s because the overall simple design stands out and is memorable. This makes the icons unique and easily recognizable, which is key.<\/p>\n<p>When designing your app icon, you want it to be memorable and unique, but not too unique to the point that you\u2019re confusing users. Try searching in the app store apps that fall into the same niche as yours. Take note of common colors or symbols these apps are using and prepare alternate versions for your own app.<\/p>\n<h3>Keep your App Icon Simple<\/h3>\n<p>While it may be tempting to utilize those design skills and spruce up your app icon to the max, don\u2019t. Simplicity is key, and adding too much complexity to your icon can have an impact on its success.<\/p>\n<p>Some of the best app icons are so simple a child can draw them in a matter of seconds. A great way to test out your icon design is to show it to a child and then hide it from them. If they can recall the design and draw it with ease, that\u2019s a good sign.<\/p>\n<h3>Make Sure Your App Icon Matches Your App\u2019s Brand<\/h3>\n<p>Another important factor when designing your app icon is ensuring that its style and tone matches that of your overall app and brand. You want your UI to be consistent, so keep elements like color palettes, symbols and fonts uniform. If your app uses all Helvetica font, you don\u2019t want to use Comic Sans in your icon.<\/p>\n<p>Remember, the idea is to build a coherent, original, and consistent experience for your users. It\u2019ll make your app icon all the more memorable and recognizable.<\/p>\n<h3>Design with Platform in Mind<\/h3>\n<p>You also want to remember that every operating system has its own set of design principles. Not adhering to them when creating your app icon will bring a sense of discomfort for your users. While it may not be obvious to them, they will recognize something is off about your app icon design if the look and feel of it isn\u2019t consistent with the platform. This is all a part of establishing good user experience.<\/p>\n<p>While <a href=\"https:\/\/medium.muz.li\/the-design-guide-to-ios-and-android-app-icons-c1a73d3f278f\" target=\"_blank\" rel=\"noopener\">iOS and Android app icons<\/a> look similar, they still have some noticeable differences in their design, such as proportions, size, and style. More specifically, when considering an app icon for iOS, you\u2019ll notice rounded corners, which is not required for Android. Android app icons are a bit more flexible in this regard.<\/p>\n<p>Additionally, iOS app icons lean towards a flat UI design trend and larger retina display than Android.It\u2019s important to read through the guidelines for <a href=\"https:\/\/developer.apple.com\/design\/human-interface-guidelines\/ios\/icons-and-images\/app-icon\/\" target=\"_blank\" rel=\"noopener\">iOS<\/a> or <a href=\"https:\/\/developer.android.com\/google-play\/resources\/icon-design-specifications\" target=\"_blank\" rel=\"noopener\">Android<\/a> to ensure you get it right.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/image1-11.png\" alt=\"tempalte icon app\" class=\"wp-image-1344\"\/><\/figure>\n<\/div>\n<h2>How to Create an App Icon<\/h2>\n<p>The first step in creating your own app icon is to carefully read through <a href=\"https:\/\/developer.apple.com\/design\/human-interface-guidelines\/ios\/icons-and-images\/image-size-and-resolution\/\" target=\"_blank\" rel=\"noopener\">Apple\u2019s Human Interface Guidelines<\/a> to see what they recommend for app icon images. These documents contain a ton of useful information on how to design your apps, not only from a graphics perspective, but also from a UI perspective.<\/p>\n<p>The section on Icons and Images reviews what sort of image sizes you will be needing to provide. You\u2019ll notice that there are several different resolutions for the different iOS devices. So when you create your graphic asset, you\u2019ll need these sizes.<\/p>\n<h3>App icon section<\/h3>\n<p><a href=\"https:\/\/developer.apple.com\/design\/human-interface-guidelines\/ios\/icons-and-images\/app-icon\/\" target=\"_blank\" rel=\"noopener\">This section<\/a> on their Human Interface Guidelines page reviews everything you need to know about building a beautiful and memorable app icon. Read through it and you\u2019ll find some more recommendations on standards, such as not including any fancy backgrounds or patterns\u2014basically, keeping your app icon simple. Remember, the point of your icon is to convey what your app is and does. A user shouldn\u2019t have to look at it for more than a few seconds to understand its purpose.<\/p>\n<p>You also should not be using words as part of your logo, no screenshots, and no photos. Don\u2019t show apple hardware (trademark reasons) and keep your image corners squared. You don\u2019t need to round them, as the system will automatically do that.<\/p>\n<p>This section will also review the different sizes that you need to provide your app icon image in since your icon doesn\u2019t just show up on the homescreen, but also in the settings, notifications, and other areas which all require a unique size.<\/p>\n<h3>Creating your graphic<\/h3>\n<p>When it comes to actually creating your graphic, you can use whatever graphic program you\u2019d like and are most comfortable with. These programs will either create the graphic in raster or vector format.<\/p>\n<p>Vector format is best for app icons because it allows you to scale your image without losing quality. Rastor, on the other hand, can look fuzzy when enlarging. <a href=\"https:\/\/www.sketch.com\/\" target=\"_blank\" rel=\"noopener\">Sketch<\/a> and <a href=\"https:\/\/www.figma.com\/\" target=\"_blank\" rel=\"noopener\">Figma<\/a> are examples of vector programs. Photoshop uses raster.<\/p>\n<p>Once you choose your program, you would begin by creating a square and then choosing a gradient color. Any program should have gradients as a basic core functionality. At this point, you can draw your icon or design it on your own. You can export your asset as 1x, 2x, or 3x size, but you can also use an app icon resizer tool to resize as well.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/image4-8.png\" alt=\"app icons - guide \" class=\"wp-image-1345\"\/><\/figure>\n<\/div>\n<p>The important thing when using an app icon resizer is to check that it\u2019s been updated recently so you know it conforms with the latest Apple sizing guidelines.<\/p>\n<p>And it\u2019s as easy as that!<\/p>\n<h2>Sketch App Icon Template<\/h2>\n<p>Sketch is a popular Photoshop alternative for designers and offers a simple, easy to use and super effective tool for things like vector drawing, general layout, and mockups.<\/p>\n<p>Another perk to using their software is that it comes with some great <a href=\"http:\/\/designersstash.com\/appicontemplate\/\" target=\"_blank\" rel=\"noopener\">app icon templates <\/a>you can use to get started in designing your icon for both iOS and Android.<\/p>\n<p>The first step is to visit <a href=\"http:\/\/applypixels.com\" target=\"_blank\" rel=\"noopener\">Applypixels.com<\/a> to purchase an app icon template for sketch which will essentially automate the process of rendering the various sizes needed with iOS apps. It features the proper icon shape, official icon grid, and gradients you can use in your app icon design.<\/p>\n<p>The template conveniently allows users to preview their app icon in a native environment, like the home screen and app store. All you need is a copy of sketch version 3 or later.<\/p>\n<p>The template comes with 3 pages\u2014a preview page, export page, and symbols page.<\/p>\n<p>The preview page, as you can guess, allows you to preview your icon. You can view it in the home screen environment and compare it icon with other stock icons on the platform.<\/p>\n<p>The background section of the Sketch app icon template contains common gradients found in iOS. Here, you can find something you like, and build and tweak it from there.<\/p>\n<p>The export page will show you the different slices sketch will export. The symbols page allows you to create a symbol for your icon, if you\u2019d like.<\/p>\n<ul>\n<li>Create: You can create your icon in the size your users will see it, which will automatically scale to the required sizes for both platforms.<\/li>\n<li>Review: You can see how the icon will look in every size.<\/li>\n<li>Showcase: See how your icon looks on the phone\u2019s home screen and in app stores. This helps compare it to other app icons.<\/li>\n<li>Export: Once you\u2019re finished with the design phase, you can quickly and easily export your icon.<\/li>\n<\/ul>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/image3-12.png\" alt=\"app icon template \" class=\"wp-image-1346\"\/><\/figure>\n<\/div>\n<h2>Conclusion<\/h2>\n<p>While following app icon guidelines is crucial in the development process, the most important thing is to be mindful of what goes into making your app icon memorable and recognizable.<\/p>\n<p>Start doing research and paying closer attention to other app icons out there to find commonalities in their design. Show your app icon to friends and family to see what they think and if they can recognize the app\u2019s purpose right away. Don\u2019t be afraid to play around with different designs, backgrounds, and logos throughout the process.<\/p>\n<p>Our <a href=\"https:\/\/architsingh.com\/webioticnew\/simple-starter\/\">Simple Starter<\/a> package offers three simple steps to a successful app, which includes wireframe sketches that will show how your app will look and function once it&#8217;s published, among other key ingredients in planning an app.<\/p>\n<p>[\/et_pb_text][et_pb_comments _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; form_field_background_color=&#8221;#FFFFFF&#8221; form_field_focus_background_color=&#8221;#FFFFFF&#8221; header_font=&#8221;Helvetica||||||||&#8221; header_text_align=&#8221;left&#8221; title_font=&#8221;Helvetica|700|||||||&#8221; title_text_align=&#8221;left&#8221; title_text_color=&#8221;#2ea0d2&#8243; title_font_size=&#8221;25px&#8221; title_line_height=&#8221;1.2em&#8221; meta_font=&#8221;Helvetica||||||||&#8221; meta_text_color=&#8221;#000000&#8243; body_font=&#8221;Helvetica||||||||&#8221; body_text_align=&#8221;left&#8221; body_font_size=&#8221;16px&#8221; body_line_height=&#8221;1.6em&#8221; form_field_font=&#8221;Helvetica||||||||&#8221; form_field_text_align=&#8221;left&#8221; custom_button=&#8221;on&#8221; button_text_color=&#8221;#2ea0d2&#8243; button_bg_color=&#8221;#FFFFFF&#8221; button_border_color=&#8221;#2ea0d2&#8243; button_font=&#8221;Helvetica||||||||&#8221; button_use_icon=&#8221;off&#8221; button_alignment=&#8221;right&#8221; text_orientation=&#8221;left&#8221; border_width_bottom=&#8221;1px&#8221; border_color_bottom=&#8221;#e5e5e5&#8243; border_radii_fields=&#8221;on|5px|5px|5px|5px&#8221; border_width_all_fields=&#8221;1px&#8221; border_color_all_fields=&#8221;#c6c6c6&#8243; global_module=&#8221;5439&#8243; saved_tabs=&#8221;all&#8221; button_bg_color__hover_enabled=&#8221;on|hover&#8221; button_bg_color__hover=&#8221;#2ea0d2&#8243; button_bg_enable_color__hover=&#8221;on&#8221; button_border_color__hover_enabled=&#8221;off|hover&#8221; button_text_color__hover_enabled=&#8221;on|hover&#8221; button_text_color__hover=&#8221;#FFFFFF&#8221;][\/et_pb_comments][et_pb_text disabled_on=&#8221;on|on|on&#8221; admin_label=&#8221;Up Next&#8221; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; text_font=&#8221;Helvetica|||on|||||&#8221; text_text_color=&#8221;#9e9e9e&#8221; text_font_size=&#8221;20px&#8221; width=&#8221;100%&#8221; max_width=&#8221;50%&#8221; module_alignment=&#8221;left&#8221; custom_margin=&#8221;-50px|0px|0px|0px|false|false&#8221; custom_margin_tablet=&#8221;0px||||false|false&#8221; custom_margin_phone=&#8221;0px|0px|0px|0px|false|false&#8221; custom_margin_last_edited=&#8221;off|desktop&#8221; custom_padding=&#8221;50px||||false|false&#8221; custom_css_main_element=&#8221;float: left;||margin-bottom:0px !important;&#8221; disabled=&#8221;on&#8221; global_module=&#8221;6525&#8243; locked=&#8221;off&#8221;]<\/p>\n<p>Up Next<\/p>\n<p>[\/et_pb_text][et_pb_post_title title=&#8221;off&#8221; date=&#8221;off&#8221; categories=&#8221;off&#8221; comments=&#8221;off&#8221; featured_image=&#8221;off&#8221; disabled_on=&#8221;on|on|on&#8221; admin_label=&#8221;Author&#8221; module_class=&#8221;author-bottom&#8221; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; meta_font=&#8221;Journal||||||||&#8221; meta_text_align=&#8221;right&#8221; meta_text_color=&#8221;#0ab1db&#8221; meta_font_size=&#8221;35px&#8221; width=&#8221;100%&#8221; max_width=&#8221;50%&#8221; module_alignment=&#8221;right&#8221; custom_margin=&#8221;0px|40px|0px|0px|true|false&#8221; custom_css_post_title=&#8221;float: right;||margin: 0px !important;||margin-right: 40px !important;&#8221; disabled=&#8221;on&#8221; global_module=&#8221;5440&#8243; saved_tabs=&#8221;all&#8221;][\/et_pb_post_title][et_pb_sidebar area=&#8221;et_pb_widget_area_2&#8243; show_border=&#8221;off&#8221; disabled_on=&#8221;on|on|on&#8221; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; header_font=&#8221;|700|||||||&#8221; header_text_color=&#8221;#000000&#8243; header_font_size=&#8221;0px&#8221; header_line_height=&#8221;1.1em&#8221; body_font=&#8221;Helvetica Bold|700|||||||&#8221; body_text_align=&#8221;left&#8221; body_text_color=&#8221;#000000&#8243; body_font_size=&#8221;35px&#8221; body_line_height=&#8221;1.2em&#8221; custom_margin=&#8221;-20px||||false|false&#8221; custom_margin_tablet=&#8221;&#8221; custom_margin_phone=&#8221;0px||0px||false|false&#8221; custom_margin_last_edited=&#8221;on|phone&#8221; disabled=&#8221;on&#8221; global_module=&#8221;5442&#8243; saved_tabs=&#8221;all&#8221;][\/et_pb_sidebar][et_pb_text admin_label=&#8221;Read Time&#8221; module_class=&#8221;timer_d&#8221; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; text_font=&#8221;Helvetica||||||||&#8221; text_text_color=&#8221;#26282d&#8221; text_font_size=&#8221;20px&#8221; custom_margin=&#8221;0px||50px||false|false&#8221; custom_padding=&#8221;0px||50px||false|false&#8221; border_width_bottom=&#8221;1px&#8221; border_color_bottom=&#8221;#e5e5e5&#8243; global_module=&#8221;6522&#8243; locked=&#8221;off&#8221;]<\/p>\n<div class=\"related_posts\">\n\t\t<p class=\"up-next\">Up Next<\/p>\n\t\t<div class=\"author-meta\">\n\t\t<img decoding=\"async\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/ken.png\"\/><span class=\"author-emoji\">Ken<\/span>\n\t\t<\/div>\n\t\t<div class=\"related-content\">\n\t\t<a href=\"https:\/\/architsingh.com\/webioticnew\/app-store-submission-checklist\/\">\n\t\t<div class=\"related_post_title\">App Store Submission Checklist - How To Submit an iOS App To The App Store<\/div> <\/a>\n\t\t<div class=\"post-category\">App Development, Strategy Planning, App Development<\/div>\n\t\t<\/div>\n\t\t\n\t\t<div class=\"related_featured_img\"><a href=\"https:\/\/architsingh.com\/webioticnew\/app-store-submission-checklist\/\">\n\t\t<img decoding=\"async\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/2019\/10\/Banner13-min.jpg\"\/><\/a><\/div>\n\t\t\n\t\t<span class=\"related_post_time\"><i class=\"far fa-clock\"><\/i> <p>10 minute read<\/p><\/span>\n\t\t<\/div>\n<p>[\/et_pb_text][\/et_pb_column][et_pb_column type=&#8221;1_3&#8243; module_class=&#8221;post-sticky&#8221; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; custom_css_main_element=&#8221;    margin: 0;||    top: 40px;||    text-align: center;||    float: right;||    right: 0;||max-width:350px;||overflow: scroll;&#8221;][et_pb_post_title title=&#8221;off&#8221; date=&#8221;off&#8221; categories=&#8221;off&#8221; comments=&#8221;off&#8221; featured_image=&#8221;off&#8221; disabled_on=&#8221;on|on|on&#8221; admin_label=&#8221;Author&#8221; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; meta_font=&#8221;Journal||||||||&#8221; meta_text_align=&#8221;center&#8221; meta_text_color=&#8221;#0ab1db&#8221; meta_font_size=&#8221;35px&#8221; custom_padding=&#8221;0px||0px||false|false&#8221; disabled=&#8221;on&#8221; global_module=&#8221;5438&#8243; saved_tabs=&#8221;all&#8221;][\/et_pb_post_title][et_pb_code disabled_on=&#8221;on|on|off&#8221; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#ffffff&#8221; position_origin_f=&#8221;top_right&#8221; vertical_offset=&#8221;40px&#8221; text_orientation=&#8221;center&#8221; height=&#8221;100vh&#8221; custom_padding=&#8221;||||false|false&#8221; link_option_url=&#8221;https:\/\/architsingh.com\/webioticnew\/calendar\/&#8221; global_module=&#8221;5437&#8243; saved_tabs=&#8221;all&#8221;]<\/p>\n<div class=\"header-sticky-post\"><!-- [et_pb_line_break_holder] -->  <img decoding=\"async\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/ken.png\" \/> <span class=\"author_name\">Ken<\/span><!-- [et_pb_line_break_holder] --><\/div>\n<p><!-- [et_pb_line_break_holder] --><img loading=\"lazy\" decoding=\"async\" width=\"874\" height=\"722\" class=\"wp-image-6141 aligncenter size-full\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/grey_calender_002-1.png\" alt=\"\"  \/>[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; module_class=&#8221;fixed-image&#8221; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; z_index=&#8221;4&#8243; custom_margin=&#8221;-30px||0px||false|false&#8221; custom_padding=&#8221;0px||0px||false|false&#8221; global_module=&#8221;6228&#8243; saved_tabs=&#8221;all&#8221;][et_pb_row _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; width=&#8221;100%&#8221; max_width=&#8221;100%&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221;][et_pb_image src=&#8221;https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/newsletter_bg.png&#8221; title_text=&#8221;newsletter_bg&#8221; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; position_origin_a=&#8221;center_left&#8221; z_index=&#8221;3&#8243; width=&#8221;100%&#8221; max_width=&#8221;35%&#8221; custom_css_main_element=&#8221;position: absolute;||width: 100%;||height: 100%;||top: 50%;||left: 0;||&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; module_class=&#8221;form-section&#8221; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;rgba(255,255,255,0)&#8221; background_enable_image=&#8221;off&#8221; background_size=&#8221;contain&#8221; background_position=&#8221;center_left&#8221; z_index=&#8221;5&#8243; width=&#8221;100%&#8221; max_width=&#8221;100%&#8221; custom_padding=&#8221;0px||||false|false&#8221; background_last_edited=&#8221;on|phone&#8221; background_enable_image_phone=&#8221;off&#8221; global_module=&#8221;6229&#8243; saved_tabs=&#8221;all&#8221;][et_pb_row disabled_on=&#8221;on|off|off&#8221; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; width=&#8221;100%&#8221; max_width=&#8221;100%&#8221; module_alignment=&#8221;center&#8221; custom_margin=&#8221;||0px||false|false&#8221; custom_padding=&#8221;||0px||false|false&#8221; scroll_scaling=&#8221;0|50|50|100|70|100|85%&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.7.5&#8243; _module_preset=&#8221;default&#8221;][et_pb_image src=&#8221;https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/2020\/12\/heart.png&#8221; title_text=&#8221;heart&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.7.5&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text admin_label=&#8221;Your inbox wants some love.&#8221; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; text_font=&#8221;Nexa Regular||||||||&#8221; text_text_color=&#8221;#010101&#8243; text_font_size=&#8221;48px&#8221; text_orientation=&#8221;center&#8221; text_font_size_tablet=&#8221;&#8221; text_font_size_phone=&#8221;28px&#8221; text_font_size_last_edited=&#8221;on|phone&#8221;]<\/p>\n<p>Your inbox <strong>wants some love.<\/strong><\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row disabled_on=&#8221;on|off|off&#8221; module_id=&#8221;email-optin&#8221; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;rgba(255,255,255,0.77)&#8221; width=&#8221;70%&#8221; custom_padding=&#8221;41px|60px|41px|60px|true|true&#8221; border_radii=&#8221;on|5px|5px|5px|5px&#8221; box_shadow_style=&#8221;preset1&#8243; box_shadow_horizontal=&#8221;2px&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.7.5&#8243; _module_preset=&#8221;default&#8221;][et_pb_text admin_label=&#8221;Stay informed with Webiotic latest&#8221; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; text_font=&#8221;Journal||||||||&#8221; text_text_color=&#8221;#2fa2d5&#8243; text_font_size=&#8221;45px&#8221; text_line_height=&#8221;1.3em&#8221; text_font_size_tablet=&#8221;&#8221; text_font_size_phone=&#8221;25px&#8221; text_font_size_last_edited=&#8221;on|phone&#8221; custom_css_before=&#8221;    width: 64px;||    height: 64px;||    background: url(https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/C-C_01A.png) no-repeat;||    background-size: 100%;||    content: %22%22;||    position: absolute;||    top: -66px;||    right: -86px;&#8221;]Stay informed with Webiotic latest[\/et_pb_text][et_pb_text _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221;]<\/p>\n<script>(function() {\n\twindow.mc4wp = window.mc4wp || {\n\t\tlisteners: [],\n\t\tforms: {\n\t\t\ton: function(evt, cb) {\n\t\t\t\twindow.mc4wp.listeners.push(\n\t\t\t\t\t{\n\t\t\t\t\t\tevent   : evt,\n\t\t\t\t\t\tcallback: cb\n\t\t\t\t\t}\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t}\n})();\n<\/script><!-- Mailchimp for WordPress v4.10.3 - https:\/\/wordpress.org\/plugins\/mailchimp-for-wp\/ --><form id=\"mc4wp-form-1\" class=\"mc4wp-form mc4wp-form-6256\" method=\"post\" data-id=\"6256\" data-name=\"Subscribe to our newsletter\" ><div class=\"mc4wp-form-fields\">\t\t\t<div class=\"row cus_dis\">\r\n\t\t\t\t\t<div class=\"col-md-5 padding-right\">\r\n\t\t\t\t\t\t\t<div class=\"form-group\">\r\n\t\t\t\t\t\t\t\t\t<label for=\"exampleInputEmail1\"><\/label>\r\n\t\t\t\t\t\t\t\t\t<input class=\"form-control\" type=\"text\" name=\"FNAME\" placeholder=\"First, introduce yourself\">\r\n\t\t\t\t\t\t\t\t\t<small id=\"emailHelp\" class=\"form-text text-muted\">No need for\r\n\t\t\t\t\t\t\t\t\t\t\tformalities (just your name)<\/small>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<div class=\"col-md-5 padding-right\">\r\n\t\t\t\t\t\t\t<div class=\"form-group\">\r\n\t\t\t\t\t\t\t\t\t<label for=\"exampleInputEmail1\"><\/label>\r\n\t\t\t\t\t\t\t\t\t<input class=\"form-control\" type=\"email\" name=\"EMAIL\" placeholder=\"Email Address\" required=\"\">\r\n\t\t\t\t\t\t\t\t\t<small id=\"emailHelp\" class=\"form-text text-muted\">Ok, some need\r\n\t\t\t\t\t\t\t\t\t\t\tfor formalities <\/small>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<div class=\"col-md-2\">\r\n\t\t\t\t\t\t\t<p>(ohh, Intrigued!)<\/p>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<div class=\"col-md-12\" style=\" width:100%;\">\r\n\t\t\t\t\t\t\t<div class=\"form-group text-right\" style=\"display: block;\">\r\n\t\t\t\t\t\t\t\t\t<input class=\"btn btn-info\" type=\"submit\" value=\"join the list\">\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t<\/div><\/div><label style=\"display: none !important;\">Leave this field empty if you're human: <input type=\"text\" name=\"_mc4wp_honeypot\" value=\"\" tabindex=\"-1\" autocomplete=\"off\" \/><\/label><input type=\"hidden\" name=\"_mc4wp_timestamp\" value=\"1777472282\" \/><input type=\"hidden\" name=\"_mc4wp_form_id\" value=\"6256\" \/><input type=\"hidden\" name=\"_mc4wp_form_element_id\" value=\"mc4wp-form-1\" \/><div class=\"mc4wp-response\"><\/div><\/form><!-- \/ Mailchimp for WordPress Plugin -->\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; disabled_on=&#8221;on|off|off&#8221; module_id=&#8221;next-step-section&#8221; module_class=&#8221;calendar-sections&#8221; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; background_enable_image=&#8221;off&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;0px||||false|false&#8221; global_module=&#8221;3218&#8243; saved_tabs=&#8221;all&#8221; collapsed=&#8221;off&#8221;][et_pb_row admin_label=&#8221;Featured Clients&#8221; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; text_font=&#8221;Nexa Regular||||||||&#8221; text_text_color=&#8221;#1e78cc&#8221; text_font_size=&#8221;18px&#8221; header_2_font=&#8221;Nexa Regular||||||||&#8221; header_2_text_align=&#8221;center&#8221; header_2_text_color=&#8221;#000000&#8243; header_2_font_size=&#8221;40px&#8221; text_orientation=&#8221;center&#8221; header_2_font_size_tablet=&#8221;&#8221; header_2_font_size_phone=&#8221;28px&#8221; header_2_font_size_last_edited=&#8221;on|phone&#8221;]<\/p>\n<h2 style=\"margin-bottom:0;\">Featured Clients<\/h2>\n<p><a style=\"color:#1e78cc;\" href=\"\/clients\/\">View all &gt;<\/a>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=&#8221;1_3,1_3,1_3&#8243; make_equal=&#8221;on&#8221; disabled_on=&#8221;on|off|off&#8221; module_class=&#8221;featured-images&#8221; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; width=&#8221;50%&#8221; width_tablet=&#8221;60%&#8221; width_phone=&#8221;100%&#8221; width_last_edited=&#8221;on|phone&#8221; module_alignment=&#8221;center&#8221;][et_pb_column type=&#8221;1_3&#8243; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; border_width_right=&#8221;1px&#8221; border_color_right=&#8221;#e8e8e8&#8243; border_width_right_tablet=&#8221;&#8221; border_width_right_phone=&#8221;0px&#8221; border_width_right_last_edited=&#8221;on|desktop&#8221;][et_pb_image src=&#8221;https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/trump.png&#8221; title_text=&#8221;trump&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;|20px|||false|false&#8221; border_width_right_tablet=&#8221;&#8221; border_width_right_phone=&#8221;0px&#8221; border_width_right_last_edited=&#8221;on|phone&#8221;][\/et_pb_image][\/et_pb_column][et_pb_column type=&#8221;1_3&#8243; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221;][et_pb_image src=&#8221;https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/labellamafia.png&#8221; title_text=&#8221;labellamafia&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][\/et_pb_column][et_pb_column type=&#8221;1_3&#8243; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; border_width_left=&#8221;1px&#8221; border_color_left=&#8221;#e8e8e8&#8243; border_width_left_tablet=&#8221;&#8221; border_width_left_phone=&#8221;0px&#8221; border_width_left_last_edited=&#8221;on|phone&#8221;][et_pb_image src=&#8221;https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/star-new.png&#8221; title_text=&#8221;star-new&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;|||20px|false|false&#8221; border_width_left_tablet=&#8221;&#8221; border_width_left_phone=&#8221;0px&#8221; border_width_left_last_edited=&#8221;on|phone&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row disabled_on=&#8221;off|on|off&#8221; module_class=&#8221;featured-images-amp&#8221; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221;][et_pb_image src=&#8221;https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/New-Project.png&#8221; title_text=&#8221;New Project&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.0&#8243; width=&#8221;90%&#8221; max_width=&#8221;1920px&#8221; module_alignment=&#8221;center&#8221; custom_padding=&#8221;50px||||false|false&#8221; border_color_top=&#8221;#dddddd&#8221; border_color_bottom=&#8221;#eeeeee&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.0.9&#8243;][et_pb_divider color=&#8221;#eeeeee&#8221; divider_position=&#8221;center&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; width=&#8221;100%&#8221; max_width=&#8221;500px&#8221; module_alignment=&#8221;center&#8221; custom_margin=&#8221;||100px||false|false&#8221; locked=&#8221;off&#8221;][\/et_pb_divider][et_pb_text admin_label=&#8221;So, what&#8217;s the next step?&#8221; module_class=&#8221;why-its&#8221; _builder_version=&#8221;4.7.5&#8243; text_font=&#8221;Nexa Regular||||||||&#8221; text_text_color=&#8221;#333333&#8243; text_font_size=&#8221;56px&#8221; text_orientation=&#8221;center&#8221; text_font_size_tablet=&#8221;&#8221; text_font_size_phone=&#8221;28px&#8221; text_font_size_last_edited=&#8221;on|desktop&#8221;]<\/p>\n<p>So, what&#8217;s the <strong>next step?<\/strong><\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=&#8221;1_2,1_2&#8243; use_custom_gutter=&#8221;on&#8221; gutter_width=&#8221;2&#8243; make_equal=&#8221;on&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; width=&#8221;48%&#8221; width_tablet=&#8221;&#8221; width_phone=&#8221;&#8221; width_last_edited=&#8221;on|desktop&#8221; module_alignment=&#8221;center&#8221;][et_pb_column type=&#8221;1_2&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_css_main_element=&#8221;margin: auto;&#8221;][et_pb_text module_class=&#8221;talk-content&#8221; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; text_font=&#8221;Nexa Regular||||||||&#8221; text_text_color=&#8221;#000000&#8243; text_font_size=&#8221;21px&#8221; text_line_height=&#8221;1.3em&#8221; text_orientation=&#8221;right&#8221; module_alignment=&#8221;left&#8221; text_orientation_tablet=&#8221;&#8221; text_orientation_phone=&#8221;center&#8221; text_orientation_last_edited=&#8221;on|tablet&#8221;]Talk with a real app developer [\/et_pb_text][\/et_pb_column][et_pb_column type=&#8221;1_2&#8243; _builder_version=&#8221;4.7.5&#8243; _module_preset=&#8221;default&#8221;][et_pb_button button_url=&#8221;@ET-DC@eyJkeW5hbWljIjp0cnVlLCJjb250ZW50IjoicG9zdF9saW5rX3VybF9wYWdlIiwic2V0dGluZ3MiOnsicG9zdF9pZCI6IjY2NiJ9fQ==@&#8221; button_text=&#8221;Free 15 min consultation&#8221; button_alignment=&#8221;left&#8221; button_alignment_tablet=&#8221;center&#8221; button_alignment_phone=&#8221;&#8221; button_alignment_last_edited=&#8221;on|phone&#8221; module_class=&#8221;calendar-btn&#8221; _builder_version=&#8221;4.9.7&#8243; _dynamic_attributes=&#8221;button_url&#8221; _module_preset=&#8221;default&#8221; custom_button=&#8221;on&#8221; button_text_size=&#8221;15px&#8221; button_text_color=&#8221;#2fa2d5&#8243; button_bg_color=&#8221;#ffffff&#8221; button_border_width=&#8221;1px&#8221; button_border_color=&#8221;#2fa2d5&#8243; button_border_radius=&#8221;10px&#8221; button_font=&#8221;Nexa Regular|700|||||||&#8221; button_use_icon=&#8221;off&#8221; custom_padding=&#8221;15px|30px|15px|30px|true|true&#8221; button_text_color_last_edited=&#8221;off|desktop&#8221; button_text_color__hover_enabled=&#8221;on|hover&#8221; button_text_color__hover=&#8221;#ffffff&#8221; button_bg_color__hover_enabled=&#8221;on|hover&#8221; button_bg_color__hover=&#8221;#2fa2d5&#8243; button_bg_enable_color__hover=&#8221;on&#8221;][\/et_pb_button][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you\u2019re in the midst of developing a brand new mobile app, the app icon may be the last thing on your mind, but it\u2019s actually an incredibly important aspect of the project and should be given its due diligence. In short, an app icon is a visual representation of your app displayed in the [&hellip;]<\/p>\n","protected":false},"author":15,"featured_media":2458,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"<p>If you\u2019re in the midst of <a href=\"https:\/\/architsingh.com\/webioticnew\/app-development\/\">developing a brand new mobile app<\/a>, the app icon may be the last thing on your mind, but it\u2019s actually an incredibly important aspect of the project and should be given its due diligence.<\/p><p>In short, an app icon is a visual representation of your app displayed in the app store and on your home screen. It\u2019s one of the first encounters your users will have with your mobile app and so it\u2019s a fundamental component in building a positive and memorable user experience.<\/p><p><strong>In this article, we\u2019re going to cover the whole topic of app icon template and give you some useful tricks that will help you design the best app icon and run through how to get started.<\/strong><\/p><p><img class=\"aligncenter size-full wp-image-1343\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/2019\/09\/image2-11.png\" alt=\"app icon template \" width=\"800\" height=\"498\" \/><\/p><h2>Tips and Tricks to Design the Perfect App Icon<\/h2><p>Remember, a good app icon can go a long way in swaying a user to download your app. Just like a catchy app title, description, and thumbnails, the app icon is what will help capture your users and pique their interest. It\u2019s one of the first things a user will see before deciding to download your app, so it has to be grabbing.<\/p><p>Let\u2019s review a few useful tips that will get you on your way.<\/p><h3>Make your App Icon Memorable and Recognizable<\/h3><p>When designing a successful app icon, factors like visual attractiveness, simplicity, and being in step with platform guidelines are all important, but making it memorable and recognizable is key.<\/p><p>If I told you to imagine the Uber or Facebook icon, I bet you could easily picture them in your mind without looking at your phone. And it\u2019s not just because you use these apps all the time (sure, that helps in remembering them), it\u2019s because the overall simple design stands out and is memorable. This makes the icons unique and easily recognizable, which is key.<\/p><p>When designing your app icon, you want it to be memorable and unique, but not too unique to the point that you\u2019re confusing users. Try searching in the app store apps that fall into the same niche as yours. Take note of common colors or symbols these apps are using and prepare alternate versions for your own app.<\/p><h3>Keep your App Icon Simple<\/h3><p>While it may be tempting to utilize those design skills and spruce up your app icon to the max, don\u2019t. Simplicity is key, and adding too much complexity to your icon can have an impact on its success.<\/p><p>Some of the best app icons are so simple a child can draw them in a matter of seconds. A great way to test out your icon design is to show it to a child and then hide it from them. If they can recall the design and draw it with ease, that\u2019s a good sign.<\/p><h3>Make Sure Your App Icon Matches Your App\u2019s Brand<\/h3><p>Another important factor when designing your app icon is ensuring that its style and tone matches that of your overall app and brand. You want your UI to be consistent, so keep elements like color palettes, symbols and fonts uniform. If your app uses all Helvetica font, you don\u2019t want to use Comic Sans in your icon.<\/p><p>Remember, the idea is to build a coherent, original, and consistent experience for your users. It\u2019ll make your app icon all the more memorable and recognizable.<\/p><h3>Design with Platform in Mind<\/h3><p>You also want to remember that every operating system has its own set of design principles. Not adhering to them when creating your app icon will bring a sense of discomfort for your users. While it may not be obvious to them, they will recognize something is off about your app icon design if the look and feel of it isn\u2019t consistent with the platform. This is all a part of establishing good user experience.<\/p><p>While <a href=\"https:\/\/medium.muz.li\/the-design-guide-to-ios-and-android-app-icons-c1a73d3f278f\" target=\"_blank\" rel=\"noopener\">iOS and Android app icons<\/a> look similar, they still have some noticeable differences in their design, such as proportions, size, and style. More specifically, when considering an app icon for iOS, you\u2019ll notice rounded corners, which is not required for Android. Android app icons are a bit more flexible in this regard.<\/p><p>Additionally, iOS app icons lean towards a flat UI design trend and larger retina display than Android.It\u2019s important to read through the guidelines for <a href=\"https:\/\/developer.apple.com\/design\/human-interface-guidelines\/ios\/icons-and-images\/app-icon\/\" target=\"_blank\" rel=\"noopener\">iOS<\/a> or <a href=\"https:\/\/developer.android.com\/google-play\/resources\/icon-design-specifications\" target=\"_blank\" rel=\"noopener\">Android<\/a> to ensure you get it right.<\/p><p><img class=\"aligncenter size-full wp-image-1344\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/2019\/09\/image1-11.png\" alt=\"tempalte icon app\" width=\"800\" height=\"498\" \/><\/p><h2>How to Create an App Icon<\/h2><p>The first step in creating your own app icon is to carefully read through <a href=\"https:\/\/developer.apple.com\/design\/human-interface-guidelines\/ios\/icons-and-images\/image-size-and-resolution\/\" target=\"_blank\" rel=\"noopener\">Apple\u2019s Human Interface Guidelines<\/a> to see what they recommend for app icon images. These documents contain a ton of useful information on how to design your apps, not only from a graphics perspective, but also from a UI perspective.<\/p><p>The section on Icons and Images reviews what sort of image sizes you will be needing to provide. You\u2019ll notice that there are several different resolutions for the different iOS devices. So when you create your graphic asset, you\u2019ll need these sizes.<\/p><h3>App icon section<\/h3><p><a href=\"https:\/\/developer.apple.com\/design\/human-interface-guidelines\/ios\/icons-and-images\/app-icon\/\" target=\"_blank\" rel=\"noopener\">This section<\/a> on their Human Interface Guidelines page reviews everything you need to know about building a beautiful and memorable app icon. Read through it and you\u2019ll find some more recommendations on standards, such as not including any fancy backgrounds or patterns\u2014basically, keeping your app icon simple. Remember, the point of your icon is to convey what your app is and does. A user shouldn\u2019t have to look at it for more than a few seconds to understand its purpose.<\/p><p>You also should not be using words as part of your logo, no screenshots, and no photos. Don\u2019t show apple hardware (trademark reasons) and keep your image corners squared. You don\u2019t need to round them, as the system will automatically do that.<\/p><p>This section will also review the different sizes that you need to provide your app icon image in since your icon doesn\u2019t just show up on the homescreen, but also in the settings, notifications, and other areas which all require a unique size.<\/p><h3>Creating your graphic<\/h3><p>When it comes to actually creating your graphic, you can use whatever graphic program you\u2019d like and are most comfortable with. These programs will either create the graphic in raster or vector format.<\/p><p>Vector format is best for app icons because it allows you to scale your image without losing quality. Rastor, on the other hand, can look fuzzy when enlarging. <a href=\"https:\/\/www.sketch.com\/\" target=\"_blank\" rel=\"noopener\">Sketch<\/a> and <a href=\"https:\/\/www.figma.com\/\" target=\"_blank\" rel=\"noopener\">Figma<\/a> are examples of vector programs. Photoshop uses raster.<\/p><p>Once you choose your program, you would begin by creating a square and then choosing a gradient color. Any program should have gradients as a basic core functionality. At this point, you can draw your icon or design it on your own. You can export your asset as 1x, 2x, or 3x size, but you can also use an app icon resizer tool to resize as well.<\/p><p><img class=\"aligncenter size-full wp-image-1345\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/2019\/09\/image4-8.png\" alt=\"app icons - guide \" width=\"800\" height=\"498\" \/><\/p><p>The important thing when using an app icon resizer is to check that it\u2019s been updated recently so you know it conforms with the latest Apple sizing guidelines.<\/p><p>And it\u2019s as easy as that!<\/p><h2>Sketch App Icon Template<\/h2><p>Sketch is a popular Photoshop alternative for designers and offers a simple, easy to use and super effective tool for things like vector drawing, general layout, and mockups.<\/p><p>Another perk to using their software is that it comes with some great <a href=\"http:\/\/designersstash.com\/appicontemplate\/\" target=\"_blank\" rel=\"noopener\">app icon templates <\/a>you can use to get started in designing your icon for both iOS and Android.<\/p><p>The first step is to visit <a href=\"http:\/\/applypixels.com\" target=\"_blank\" rel=\"noopener\">Applypixels.com<\/a> to purchase an app icon template for sketch which will essentially automate the process of rendering the various sizes needed with iOS apps. It features the proper icon shape, official icon grid, and gradients you can use in your app icon design.<\/p><p>The template conveniently allows users to preview their app icon in a native environment, like the home screen and app store. All you need is a copy of sketch version 3 or later.<\/p><p>The template comes with 3 pages\u2014a preview page, export page, and symbols page.<\/p><p>The preview page, as you can guess, allows you to preview your icon. You can view it in the home screen environment and compare it icon with other stock icons on the platform.<\/p><p>The background section of the Sketch app icon template contains common gradients found in iOS. Here, you can find something you like, and build and tweak it from there.<\/p><p>The export page will show you the different slices sketch will export. The symbols page allows you to create a symbol for your icon, if you\u2019d like.<\/p><ul><li>Create: You can create your icon in the size your users will see it, which will automatically scale to the required sizes for both platforms.<\/li><\/ul><ul><li>Review: You can see how the icon will look in every size.<\/li><\/ul><ul><li>Showcase: See how your icon looks on the phone\u2019s home screen and in app stores. This helps compare it to other app icons.<\/li><\/ul><ul><li>Export: Once you\u2019re finished with the design phase, you can quickly and easily export your icon.<\/li><\/ul><p><img class=\"aligncenter size-full wp-image-1346\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/2019\/09\/image3-12.png\" alt=\"app icon template \" width=\"800\" height=\"498\" \/><\/p><h2>Conclusion<\/h2><p>While following app icon guidelines is crucial in the development process, the most important thing is to be mindful of what goes into making your app icon memorable and recognizable.<\/p><p>Start doing research and paying closer attention to other app icons out there to find commonalities in their design. Show your app icon to friends and family to see what they think and if they can recognize the app\u2019s purpose right away. Don\u2019t be afraid to play around with different designs, backgrounds, and logos throughout the process.<\/p>","_et_gb_content_width":"","footnotes":""},"categories":[20],"tags":[56,54,53,40,55],"class_list":["post-1894","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-app-development","tag-android","tag-app-icon","tag-icons","tag-iphone","tag-template"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>App Icon Template - How to Make One, and Do it Right<\/title>\n<meta name=\"description\" content=\"In this article, we\u2019re going to cover the whole topic of app icon template and give you some useful tricks that will help you design the best app icon and\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/architsingh.com\/webioticnew\/app-icon-template\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"App Icon Template - How to Make One, and Do it Right\" \/>\n<meta property=\"og:description\" content=\"In this article, we\u2019re going to cover the whole topic of app icon template and give you some useful tricks that will help you design the best app icon and\" \/>\n<meta property=\"og:url\" content=\"https:\/\/architsingh.com\/webioticnew\/app-icon-template\/\" \/>\n<meta property=\"og:site_name\" content=\"Webiotic\" \/>\n<meta property=\"article:published_time\" content=\"2019-09-09T12:32:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-07-05T10:28:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/2019\/09\/Banner10-1-min.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1639\" \/>\n\t<meta property=\"og:image:height\" content=\"567\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ken\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ken\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"19 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"App Icon Template - How to Make One, and Do it Right","description":"In this article, we\u2019re going to cover the whole topic of app icon template and give you some useful tricks that will help you design the best app icon and","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/architsingh.com\/webioticnew\/app-icon-template\/","og_locale":"en_US","og_type":"article","og_title":"App Icon Template - How to Make One, and Do it Right","og_description":"In this article, we\u2019re going to cover the whole topic of app icon template and give you some useful tricks that will help you design the best app icon and","og_url":"https:\/\/architsingh.com\/webioticnew\/app-icon-template\/","og_site_name":"Webiotic","article_published_time":"2019-09-09T12:32:45+00:00","article_modified_time":"2021-07-05T10:28:09+00:00","og_image":[{"width":1639,"height":567,"url":"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/2019\/09\/Banner10-1-min.jpg","type":"image\/jpeg"}],"author":"Ken","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Ken","Est. reading time":"19 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/architsingh.com\/webioticnew\/app-icon-template\/#article","isPartOf":{"@id":"https:\/\/architsingh.com\/webioticnew\/app-icon-template\/"},"author":{"name":"Ken","@id":"https:\/\/architsingh.com\/webioticnew\/#\/schema\/person\/e77a2e52b5087d4988ce1777c63f3b58"},"headline":"App Icon Template &#8211; How to Make One, and Do it Right","datePublished":"2019-09-09T12:32:45+00:00","dateModified":"2021-07-05T10:28:09+00:00","mainEntityOfPage":{"@id":"https:\/\/architsingh.com\/webioticnew\/app-icon-template\/"},"wordCount":3886,"commentCount":0,"publisher":{"@id":"https:\/\/architsingh.com\/webioticnew\/#organization"},"image":{"@id":"https:\/\/architsingh.com\/webioticnew\/app-icon-template\/#primaryimage"},"thumbnailUrl":"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/2019\/09\/Banner10-1-min.jpg","keywords":["android","app icon","icons","iPhone","template"],"articleSection":["App Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/architsingh.com\/webioticnew\/app-icon-template\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/architsingh.com\/webioticnew\/app-icon-template\/","url":"https:\/\/architsingh.com\/webioticnew\/app-icon-template\/","name":"App Icon Template - How to Make One, and Do it Right","isPartOf":{"@id":"https:\/\/architsingh.com\/webioticnew\/#website"},"primaryImageOfPage":{"@id":"https:\/\/architsingh.com\/webioticnew\/app-icon-template\/#primaryimage"},"image":{"@id":"https:\/\/architsingh.com\/webioticnew\/app-icon-template\/#primaryimage"},"thumbnailUrl":"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/2019\/09\/Banner10-1-min.jpg","datePublished":"2019-09-09T12:32:45+00:00","dateModified":"2021-07-05T10:28:09+00:00","description":"In this article, we\u2019re going to cover the whole topic of app icon template and give you some useful tricks that will help you design the best app icon and","breadcrumb":{"@id":"https:\/\/architsingh.com\/webioticnew\/app-icon-template\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/architsingh.com\/webioticnew\/app-icon-template\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/architsingh.com\/webioticnew\/app-icon-template\/#primaryimage","url":"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/2019\/09\/Banner10-1-min.jpg","contentUrl":"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/2019\/09\/Banner10-1-min.jpg","width":1639,"height":567},{"@type":"BreadcrumbList","@id":"https:\/\/architsingh.com\/webioticnew\/app-icon-template\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/architsingh.com\/webioticnew\/"},{"@type":"ListItem","position":2,"name":"App Icon Template &#8211; How to Make One, and Do it Right"}]},{"@type":"WebSite","@id":"https:\/\/architsingh.com\/webioticnew\/#website","url":"https:\/\/architsingh.com\/webioticnew\/","name":"Webiotic","description":"360 Degree App Development &amp; Web Solutions Company","publisher":{"@id":"https:\/\/architsingh.com\/webioticnew\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/architsingh.com\/webioticnew\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/architsingh.com\/webioticnew\/#organization","name":"Webiotic","url":"https:\/\/architsingh.com\/webioticnew\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/architsingh.com\/webioticnew\/#\/schema\/logo\/image\/","url":"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/checkout-logo.png","contentUrl":"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/checkout-logo.png","width":300,"height":68,"caption":"Webiotic"},"image":{"@id":"https:\/\/architsingh.com\/webioticnew\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/architsingh.com\/webioticnew\/#\/schema\/person\/e77a2e52b5087d4988ce1777c63f3b58","name":"Ken","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/architsingh.com\/webioticnew\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/26c9520c6139415ba3342de24431f5b8ba5f6cf43d121d63784601d0f5daa10a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/26c9520c6139415ba3342de24431f5b8ba5f6cf43d121d63784601d0f5daa10a?s=96&d=mm&r=g","caption":"Ken"},"url":"https:\/\/architsingh.com\/webioticnew\/team\/ken\/"}]}},"_links":{"self":[{"href":"https:\/\/architsingh.com\/webioticnew\/wp-json\/wp\/v2\/posts\/1894","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/architsingh.com\/webioticnew\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/architsingh.com\/webioticnew\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/architsingh.com\/webioticnew\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/architsingh.com\/webioticnew\/wp-json\/wp\/v2\/comments?post=1894"}],"version-history":[{"count":0,"href":"https:\/\/architsingh.com\/webioticnew\/wp-json\/wp\/v2\/posts\/1894\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/architsingh.com\/webioticnew\/wp-json\/wp\/v2\/media\/2458"}],"wp:attachment":[{"href":"https:\/\/architsingh.com\/webioticnew\/wp-json\/wp\/v2\/media?parent=1894"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/architsingh.com\/webioticnew\/wp-json\/wp\/v2\/categories?post=1894"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/architsingh.com\/webioticnew\/wp-json\/wp\/v2\/tags?post=1894"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}