Small .png images generated by Sparkle

No doubt this has been covered somewhere before, but what are the little .png images that Sparkle generates with names such as <android-chrome-196x196-20200723085815.png> and <apple-touch-icon-20200723085815.png>? Are they to do with touch screens and do I need them all on my site?
I am just getting started with Sparkle, and still feeling my way into it.


Hey @ianrid, welcome! When you set a website icon Sparkle creates the variants for all devices, so that it’s always shown as such. We are improving that to place the many small images in the images folder, but I’d suggest that they are the technical counterpart to what you requested in the Sparkle user interface by setting the website icon, so yes you need them.

By “website icon” do you mean what I know as the Favicon? Currently I haven’t added one. Does it have to be in any particular format, such as jpeg? In my old site, which was made with Quark, it was called favicon.ico and showed up fine.

Oh, that’s unexpected. But yes, favicon is just one flavour, there are many different images used for bookmarks or home screen or touchbar or pinned icon or tile etc. You add an image via the site settings, website icon section.

Thanks for the explanation. In the end I decided to stick with my favicon.ico.

I am now starting to make up my first pages with Sparkle and have found one annoying display problem on this page
When zooming in and out on Safari, the text either runs short of the box with pictures near the end, or overlaps the bottom of the frame and is lost. The behaviour changes with each zoom level. (Seems to be OK on Firefox.) Is there any way to avoid this? Any advice most welcome.

I don’t see the issue on Safari. I can zoom in and out quite easily and everything stays in place. Maybe you need to update your browser or maybe it’s something unique to your Safari setting that is causing the problem.

@ianrid, Like @francbrowne I’m not seeing that either?

Unfortunately Safari is only updated per OS update so if you are running an older macOS then your Safari would not be the latest, where the independent browsers are alway updated - like Firefox.

Also make sure you have no red text boxes on the Sparkle canvas. If you do lengthen them in hight or in width so all the text shows.

Same here, no problems with Safari Version 13.1.2 when using “View > Zoom In”.

On the other hand, when using “View > Make Text Bigger”, then I get this:

The text under the image is cut off.

These are two different ways to “zoom” … “Making Text Bigger” will almost always break the layout of a website … because only the text is “zoomed” (made bigger) and the size of the text frame stays the same. So the text will no longer fit in the box …

When using “Zoom In”, the whole website content is zoomed, text, text boxes and images …

Dear All,

Thanks for taking the time to look at this, and for your responses. The behaviour I am seeing happens with Safari both on my laptop with the latest version of Catalina and on my desktop with the most recent version of Mojave. I am using the ‘Zoom in’ facility in Safari — I don’t think Safari has a ‘make text bigger’ option anymore.

I attach two screenshots. The first is how it looks with the first Zoom In level, i.e. one step up from Actual Size. There is a big gap between text and the box below. At the second zoom level, the last couple of lines are cut off. The third level of zoom is OK again, but in the next zoom level the last line is cut off (screenshot not shown).

Firefox handles it OK. I am seeing similar behaviour on another page as well. Is it a Safari issue? I can’t see anything in my Safari Preferences that could account for this. Suggestions welcome.



Thank you for the screenshots …

I’m using the latest version of Safari: 13.1.2

At the second zoom level, I get this:

So everything seems to be okay.

The latest Safari (13) still has “Make Text Bigger” functionality …

Although I’m not sure that has anything to do with it.

Sorry, I can’t help more … maybe someone else has the solution to this problem. I hope.

That’s not how my Safari View menu looks! Nor Safari Technology Preview. Are you perhaps using the iOS version?
In any case, your screenshot is the same as my first one, i.e. too much space between the bottom of the text and the box. When I go to the next step up in Zoom, the text then overflows the box. What happens when you do that? I don’t understand the technicalities, but it looks like a font scaling problem in Safari.
Anyway, thanks for checking.

My safari view menu isn’t showing the make text bigger option either. I think only the mobile version has this option.

Also checked again on Safari (Desktop version 13.1.1) and I cannot recreate the issue. Everything zooms perfectly. Clearly, the only way this could possibly happen is if the text content itself is somehow getting enlarged. If this is the case, the text will overspill the text container, but I’m not sure how this can be happening on Safari Desktop. This is the page at full zoom. and as can be seen, everything is working fine.

That’s not the area I sent the screenshot of, though. Can you scroll further down and tell me what you see, please.
I notice something similar happens on your own site, although it’s not as noticeable – these examples are from the Page Setup page on your site at different levels of zoom:

Thanks for confirming that the different View menus are from different versions of Safari!



Hello Ian

I’m using the Safari version on my MacBook Pro …

Screenshot 2020-07-28 at 17.46.44
Screenshot 2020-07-28 at 17.46.36

Develop menu activated …

But I have no idea, why my “View” menu shows options, that you don’t have. That’s a mystery to me … :thinking:


Don’t know if it is helpful … but more screenshots for you:

Zoom level 1, 2, 3, 4 and 7 …

Thanks for taking the trouble to capture and post these. You are showing a varying gap between text and box at the different levels of zoom, but not the cutoff of the last lines of text that I am seeing at certain levels. According to my layout, there should be a gap of just a single line between text and box.
Clearly your browser is behaving differently from mine!
Very strange that you should have a different View menu! As a wild guess – do you perhaps have a different version of Webkit loaded up?

Thanks again for taking the trouble to join in,


Okay … I just checked with a friend and on his Mac. He has the same Safari “View” menu as you have, without the “Make Text Bigger” option.

When he clicks the Safari “View” menu and at the same time presses the “Option (alt)” button on the keyboard, the text changes from “Zoom In” to “Make Text Bigger” … so the option is there hidden in the background, and for some reason it shows up on my Safari “View” menu all the time. My guess is, this may be a “leftover” from an old preferences file or something … I’m sure if I did a clean install, it would be gone …

So my menu is clearly the odd exception, and yours is the correct one!
:+1: :slightly_smiling_face:


Yes, with my Safari there is a gap … on Firefox there is no gap …


I don’t have any special version of Webkit installed …

I wonder if it has to do with the font rendering … maybe I have a setting, that is different from yours, but I’m not sure. It would be interesting to see other screenshots from other users.

@ianrid, Are you using Web Fonts or System Fonts?
If you are using System Fonts then at times if the user doesn’t have those fonts on their computer their browser will substitute for something similar, and similar can spill over in your set sized text containers.

The Google Web Fonts are universal so will always give a consistent viewing across browsers.

Yep, we are converging here a last! As you say, it must be to do with font rendering, or scaling, although I have no understanding of the technicalities.

As to why you have different Menu choices, have a look at your Develop menu and see what you have got selected under “User Agent”, which is the second line down. I have the Default selected, but perhaps you have chosen something else (Chrome, perhaps?).

Thanks to your friend for pointing out the “Option (alt)” alternative – I didn’t know about that!
We are all learning something.