App Icon size and File type Issues

Hi,

I can’t find the specs for the app icon size. Both PNG and SVG come out too large. I am down to 275px X 275px. Also, when I upload and SVG file the font changes and placement of an image in the icon moves slightly.

I created the image in Inkscape so I have several different SVG types to choose from. Anyone know which is best so that what I created actually shows up in my app?

Image 1 is what I created and want.
image

Image 2 is what show up on app opening page.

image

Image 3 is what displays in App Icon upload side bar.

image

Thx!

Pixel size doesn’t count as much as the image size ratio does. Images are expanded or compressed to fit the container. In your case, I’d make sure you are using a 1:1 ratio, or a square…which looks to be the case.

As for the font on the image, that may be because you are using an SVG and it may be picking up the app’s font style. I’d recommend trying to create the image as a PNG.

I’m not sure what you mean by the image being two large, but you may need to pad some extra white spaces around the edges of the image, so that it will still fill the container, but the extra white side will make the image appear smaller in the container.

@Jeff_Hager thanks for this information. While svg was recommended on Glide’s site I’m not sure why the font changes after upload.

I’ll give png a 2nd try. Initially the image came out blurry, not crisp. Maybe at a smaller size it will look better.

I’m not overly familiar with SVG files, but as I understand it, they are not exactly image files, but moreso a set of directions for the browser to draw the image on the fly and redraw based on the size needed, without any loss in quality. Since you have text characters as part of the image, it may be drawing those characters using whichever font is set in the app/browser/OS. Other graphics probably aren’t affected because they are not font/text based.

I’m not familiar with Inkscape, but I wonder if they have an option to convert text to a graphic or lock in the font, so the font you used to create the image sticks and isn’t affected when used in the app.

Just a quick search gave me this result
https://inkscape.org/forums/questions/svg-fonts-view-differently/

3 Likes

@Jeff_Hager above and beyond! The solution you suggested was my next search. I’ll see how it goes. Thank you!

1 Like

One last thing on the icon. I converted the font in the app icon to a path and made it small enough to look good in the app builder.

On my phone, a Galaxy S9 with the most recent OS update the icon for my app is still cut off on a few edges. How can I fix this? I have seen other Glideapp instances with the same issue.

20210811_122830

You’ll have to design it with some extra white space around the edges to account for that trimming. If you did that already and the icon just isn’t updating on the device, then you’ll have to try uninstalling the app, clearing your browser cache and reinstall to see it the new icon shows up. If it’s just the device holding on to an old version of the icon, then your other users shouldn’t have a problem when they install it for the first time.

2 Likes