desktop-app icon indicating copy to clipboard operation
desktop-app copied to clipboard

Icon larger than macOS defaults

Open dhruvkb opened this issue 2 years ago • 6 comments

The icon for Station in the docs is a bit larger than the conventional size for macOS icons and it looks out of place.

Screenshot 2023-10-18 at 8 29 38 AM

Is it possible to reduce the size of the icon by a little?

dhruvkb avatar Oct 18 '23 04:10 dhruvkb

It's necessary to adjust MacOS icon file a little bit. Unfortunately it's totally not my area of expertise. We need some help here. Icon file: build/icon.icns

viktor44 avatar Feb 09 '24 15:02 viktor44

According to apple design guide app icons must have some padding around, because you might want to overlap the border like here image

I created a png with apples template for sketch and used your icon.icns file. It might have some loss of quality. https://file.io/PhrYLmeFf9nQ

If you have a raw svg file (without shadows) I could make it once again with full quality.

nikolai-nikolajevic avatar Aug 08 '24 09:08 nikolai-nikolajevic

I'm really appreciate for your help! The only image I have now is 512x512 PNG @magne4000 please help us to find SVG

viktor44 avatar Aug 09 '24 12:08 viktor44

I finally managed to find the original SVG: app-icon-512-export

magne4000 avatar Aug 13 '24 23:08 magne4000

<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_dii_22_11)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M500 163.983C500 158.19 500.002 152.396 499.967 146.602C499.938 141.722 499.882 136.842 499.749 131.964C499.462 121.332 498.835 110.608 496.944 100.094C495.026 89.4289 491.895 79.5025 486.96 69.8118C482.108 60.2869 475.771 51.5711 468.209 44.0148C460.649 36.4585 451.931 30.1252 442.403 25.2766C432.702 20.3404 422.765 17.2099 412.088 15.2928C401.573 13.4048 390.846 12.7788 380.214 12.4916C375.332 12.3595 370.451 12.3038 365.568 12.2736C359.771 12.2381 353.974 12.241 348.177 12.241L280.872 12H230.532L164.418 12.241C158.61 12.241 152.802 12.2381 146.994 12.2736C142.101 12.3038 137.21 12.3595 132.319 12.4916C121.662 12.7788 110.911 13.4054 100.371 15.2958C89.6797 17.2122 79.7279 20.3416 70.0141 25.2743C60.4656 30.1234 51.7285 36.4574 44.1527 44.0148C36.5781 51.5705 30.2288 60.2846 25.3684 69.8077C20.4197 79.5031 17.2821 89.4354 15.3597 100.107C13.467 110.617 12.8398 121.336 12.5514 131.964C12.4199 136.843 12.363 141.722 12.3334 146.602C12.2979 152.397 12 159.594 12 165.388L12.0018 230.586L12 281.465L12.3009 348.049C12.3009 353.85 12.2985 359.652 12.3334 365.453C12.363 370.341 12.4199 375.226 12.552 380.112C12.8398 390.758 13.4681 401.497 15.3627 412.025C17.2845 422.704 20.4215 432.645 25.366 442.348C30.227 451.887 36.5775 460.614 44.1527 468.181C51.7279 475.748 60.4627 482.089 70.0094 486.945C79.729 491.888 89.6856 495.022 100.384 496.942C110.919 498.833 121.666 499.46 132.319 499.747C137.21 499.879 142.101 499.935 146.994 499.965C152.802 500.001 158.61 499.998 164.418 499.998L231.13 500H281.594L348.177 499.998C353.974 499.998 359.771 500.001 365.568 499.965C370.451 499.935 375.332 499.879 380.214 499.747C390.85 499.459 401.58 498.832 412.1 496.939C422.771 495.02 432.703 491.886 442.399 486.947C451.929 482.092 460.649 475.749 468.209 468.181C475.77 460.615 482.106 451.889 486.958 442.352C491.896 432.644 495.028 422.699 496.946 412.012C498.836 401.488 499.462 390.754 499.749 380.112C499.882 375.226 499.938 370.34 499.967 365.453C500.003 359.652 500 353.85 500 348.049C500 348.049 499.996 282.641 499.996 281.465V230.533C499.996 229.665 500 163.983 500 163.983Z" fill="url(#paint0_linear_22_11)"/>
</g>
<g filter="url(#filter1_d_22_11)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M256 324.264C201.299 324.264 156.955 279.809 156.955 224.971C156.955 170.133 201.299 125.678 256 125.678C310.701 125.678 355.045 170.133 355.045 224.971C355.045 279.809 310.701 324.264 256 324.264ZM256 294.476C294.29 294.476 325.331 263.357 325.331 224.971C325.331 186.584 294.29 155.466 256 155.466C217.709 155.466 186.668 186.584 186.668 224.971C186.668 263.357 217.709 294.476 256 294.476ZM330.284 361.499H181.717V386.322H330.284V361.499Z" fill="url(#paint1_linear_22_11)"/>
</g>
<defs>
<filter id="filter0_dii_22_11" x="6.07767" y="10.2233" width="499.845" height="501.621" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="5.92233"/>
<feGaussianBlur stdDeviation="2.96117"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_22_11"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_22_11" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="2.36893"/>
<feGaussianBlur stdDeviation="0.592233"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_22_11"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-1.7767"/>
<feGaussianBlur stdDeviation="1.18447"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="effect2_innerShadow_22_11" result="effect3_innerShadow_22_11"/>
</filter>
<filter id="filter1_d_22_11" x="133.266" y="111.464" width="245.468" height="308.023" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="9.47573"/>
<feGaussianBlur stdDeviation="11.8447"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_22_11"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_22_11" result="shape"/>
</filter>
<linearGradient id="paint0_linear_22_11" x1="256" y1="12" x2="256" y2="500" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#ECECEC"/>
</linearGradient>
<linearGradient id="paint1_linear_22_11" x1="355.045" y1="386.322" x2="355.045" y2="125.678" gradientUnits="userSpaceOnUse">
<stop stop-color="#1410B8"/>
<stop offset="1" stop-color="#4ED8E4"/>
</linearGradient>
</defs>
</svg>

magne4000 avatar Aug 13 '24 23:08 magne4000

Here we go :) In the zip file you find the icon as .icns and .svg with the specified spacing and shadow.

I removed the shadow of your svg because Apple’s design guide wants it a little bit different 🤷

station_macos_app_icons.zip

nikolai-nikolajevic avatar Aug 14 '24 06:08 nikolai-nikolajevic