Decrease Icons Size. In the above command, the rows and columns are set as four and four. You can simply increase the numbers to reduce the icons size. Let us make it 7×6 size using the below commands in Terminal. Defaults write com.apple.dock springboard-rows -int 7 defaults write com.apple.dock springboard-columns -int 6;killall Dock. Widgets can come in three sizes. Small widgets are the same size as a 2 by 2 block of app icons. Medium widgets are two icons high, but four icons wide (taking up the entire width of your home.
Image Size and Resolution
![Apple Macos App Icon Size Apple Macos App Icon Size](/uploads/1/3/4/0/134050817/395578739.png)
The coordinate system iOS uses to place content onscreen is based on measurements in points, which map to pixels in the display. A standard-resolution display has a 1:1 pixel density (or @1x), where one pixel is equal to one point. High-resolution displays have a higher pixel density, offering a scale factor of 2.0 or 3.0 (referred to as @2x and @3x). As a result, high-resolution displays demand images with more pixels.
For example, suppose you have a standard resolution (@1x) image that's 100px × 100px. The @2x version of this image would be 200px × 200px, and the @3x version would be 300px × 300px.
Supply high-resolution images for all artwork in your app, for all devices your app supports. Depending on the device, you accomplish this by multiplying the number of pixels in each image by a specific scale factor.
Device | Scale Factor |
---|---|
12.9' iPad Pro | @2x |
11' iPad Pro | @2x |
10.5' iPad Pro | @2x |
9.7' iPad | @2x |
7.9' iPad mini 4 | @2x |
iPhone XS Max | @3x |
iPhone XS | @3x |
iPhone XR | @2x |
iPhone X | @3x |
iPhone 8 Plus | @3x |
iPhone 8 | @2x |
iPhone 7 Plus | @3x |
iPhone 7 | @2x |
iPhone 6s Plus | @3x |
iPhone 6s | @2x |
iPhone SE | @2x |
Designing High-Resolution Artwork
Use an 8px-by-8px grid. A grid keeps lines sharp and ensures that content is as crisp as possible at all sizes, requiring less retouching and sharpening. Snap the image boundaries to the grid to minimize half pixels and blurry details that can occur when scaling down.
Produce artwork in the appropriate format. In general, use de-interlaced PNG files for bitmap/raster artwork. PNG supports transparency and, because it's lossless, compression artifacts don't blur important details or alter colors. It's a good choice for intricate artwork that requires effects like shading, textures, and highlights. Use JPEG for photos. Its compression algorithm usually produces smaller sizes than lossless formats and artifacts are harder to discern in photos. Photo-realistic app icons, however, look best as PNGs. Use PDF for glyphs and other flat, vector artwork that requires high-resolution scaling.
Use the 8-bit color palette for PNG graphics that don’t require full 24-bit color. Uninstall an app on your mac. Using an 8-bit color palette reduces file size without reducing image quality. This palette is not appropriate for photos.
Optimize JPEG files to find a balance between size and quality. Most JPEG files can be compressed without noticeable degradation of the resulting image. Even a small amount of compression can save significant disk space. Cant connect iphone to forecast bar app on mac. Experiment with compression settings on each image to find the optimal value that yields an acceptable result.
Provide alternative text labels for images and icons. Alternative text labels aren’t visible onscreen, but they let VoiceOver audibly describe what's onscreen, making navigation easier for people with visual impairments.
Custom Icons (iOS 12 and Earlier)
In iOS 13 or later, prefer using SF Symbols to represent tasks and modes in your app. If your app is running in iOS 12 or earlier, or if you need to create custom bitmap icons, follow the guidance below.
Create recognizable, highly-simplified designs. Too many details can make an icon confusing or unreadable. Strive for a simple, universal design that most people will recognize quickly and won’t find offensive. The best icons use familiar visual metaphors that are directly related to the actions they initiate or content they reveal.
Glyph
Design icons as glyphs. A glyph, also known as a template image, is a monochromatic image with transparency, anti-aliasing, and no drop shadow that uses a mask to define its shape. Glyphs automatically receive the appropriate appearance—including coloring, highlighting, and vibrancy—based on the context and user interactions. A variety of standard interface elements support glyphs, including navigation bars, tab bars, toolbars, and Home screen quick actions.
Prepare glyphs with a scale factor of @2x and save them as PDFs. Because PDF is a vector format that allows for high-resolution scaling, it's typically sufficient to provide a single @2x version in your app and allow it to scale for other resolutions.
Keep your icons consistent. Whether you use only custom icons or mix custom and system icons, all icons in your app should be the same in terms of level of detail, optical weight, stroke weight, position, and perspective.
Make sure icons are legible. In general, solid icons tend to be clearer than outlined icons. If an icon must includes lines, coordinate the weight with other icons and your app's typography.
Use color to communicate selected and deselected states. Avoid toggling between two different icon designs, like a solid version and an outlined version.
Avoid including text in an icon. If you need text, display a label beneath the icon and adjust its placement accordingly.
Don’t use replicas of Apple hardware products. Apple products are copyrighted and can’t be reproduced in your icons or images. In general, avoid displaying replicas of devices because hardware designs tend to change frequently and can make your icon look dated.
Provide alternative text labels for icons. Alternative text labels aren’t visible onscreen, but they let VoiceOver audibly describe what's onscreen, making navigation easier for people with visual impairments.
Custom Icon Sizes
Above all, your app's icon family should be visually consistent in size. If individual icon designs vary in weight, some icons may need to be slightly larger than others to achieve this effect.
Home Screen Quick Action Icon Size
A Home screen quick action icon appears next to the title. If you need to create a custom icon for your Home screen quick action, use the following sizes for guidance.
Maximum width and height |
---|
104px × 104px (34.67pt × 34.67pt @3x) |
70px × 70px (35pt × 35pt @2x) |
Target width and height |
---|
80px × 80px (26.67pt × 26.67pt @3x) |
54px × 54px (27pt × 27pt @2x) |
Target width (wide glyphs) |
---|
88px (29.33pt @3x) |
60px (30pt @2x) |
Target height (tall glyphs) |
---|
88px (29.33pt @3x) |
60px (30pt @2x) |
Navigation Bar and Toolbar Icon Size
Use the following sizes for guidance when preparing custom navigation bar and toolbar icons, but adjust as needed to create balance.
Target sizes | Maximum sizes |
---|---|
72px × 72px (24pt × 24pt @3x) | 84px × 84px (28pt × 28pt @3x) |
48px × 48px (24pt × 24pt @2x) | 56px × 56px (28pt × 28pt @2x) |
Tab Bar Icon Size
In portrait orientation, tab bar icons appear above tab titles. In landscape orientation, the icons and titles appear side-by-side. Depending on the device and orientation, the system displays either a regular or compact tab bar. Your app should include custom tab bar icons for both sizes.
Target width and height (circular glyphs)
Regular tab bars | Compact tab bars |
---|---|
75px × 75px (25pt × 25pt @3x) | 54px × 54px (18pt × 18pt @3x) |
50px × 50px (25pt × 25pt @2x) | 36px × 36px (18pt × 18pt @2x) |
Target width and height (square glyphs)
Regular tab bars | Compact tab bars |
---|---|
69px × 69px (23pt × 23pt @3x) | 51px × 51px (17pt × 17pt @3x) |
46px × 46px (23pt × 23pt @2x) | 34px × 34px (17pt × 17pt @2x) |
Macos Big Sur Icons
Target width (wide glyphs) Background apps running on mac.
Regular tab bars | Compact tab bars |
---|---|
93px (31pt @3x) | 69px (23pt @3x) |
62px (31pt @2x) | 46px (23pt @2x) |
Apple Macos App Icon Size Windows 10
Target height (tall glyphs) Bookends mac app store.
Apple Macos Updates
Regular tab bars | Compact tab bars |
---|---|
84px (28pt @3x) | 60px (20pt @3x) |
56px (28pt @2x) | 40px (20pt @2x) |