Pikkola Icon, tool No. 10

One picture in. A whole icon set out.

Q: Is my logo uploaded anywhere?

No. The picture is read by the browser, drawn on a canvas, and turned into files in memory. The page is static files with a security policy that blocks every other origin, so there is no path out for the image.

Q: Why does a favicon need so many files?

Each surface asks for a different size. Browsers read favicon.ico for tabs, iOS reads apple-touch-icon.png on the home screen, Android reads the two android-chrome PNGs through the manifest, and search results like a square logo. One file cannot serve all of them well.

Q: Can I use a transparent background?

Yes, and it works for most browsers. iOS paints a white or black plate behind a transparent touch icon, so the preview shows what that looks like before you commit.

Q: What is a maskable icon?

Android crops home screen icons to its own shape. A maskable icon keeps its important content inside the middle 80 percent so the crop never cuts it. The padding control sets that safe area, and the phone mockup shows the crop.

Q: Which shape should I choose?

Squircle matches iOS and looks soft in a browser tab. Circle is for round marks. Square is for logos that already have their own frame, and rounded sits in between.

Q: Do I need to keep the ZIP structure?

The archive mirrors the root of a public folder. Unzip it into public or the folder your host serves from root, then paste the head tags into the page.

Q: Does the ICO hold several sizes?

Yes, three: 16, 32 and 48 pixels. Windows and older browsers pick the one they need, and modern browsers read the PNG entries directly.

Q: Will it work for a Korean or Japanese letter?

Yes. Hangul, kana and kanji are drawn with the Korean or Japanese font of the site, and the bundle generates the same way.

Drop a logo, or type one letter. The studio draws every size a browser, a phone and a search result will ask for, then hands you a folder you can unzip into public.

Make the set ICO · PNG · SVG · ZIP

0: pixels sent anywhere
9: files in the bundle
4: shapes
3: languages

P512

P180

P48

P32

P16

P one mark, every size × +

The same mark at five sizes, then the size a browser tab actually shows.

Studio

Start from a picture or a letter

Everything is drawn on a canvas in this tab. Change a colour and the preview, the sizes and the mockups follow at once.

Drop a PNG, SVG, JPG or WebP here

A square picture works best. 512 px or larger keeps every size crisp.

Choose a file

You can also paste with Ctrl or Command and V, right after copying an image.

Source

Shape and colour

Shape

Square Rounded Squircle Circle

Squircle is the iOS shape. Circle suits round marks.

Background

#1D46C4 Transparent

Mark colour

#FFFDF7

Used for letters and for the tint behind a transparent logo.

Padding

16%

18 percent keeps Android's crop off the mark. Zero lets it run edge to edge.

Site name, for the manifest Include favicon.svg in the bundle

Where it shows up

Live, at the real size

Safari tab

Pikkola × +

icon.pikkola.com

Chrome tab strip

Pikkola × New tab

pikkola.com

Home screen

Pikkola Mail Notes

80% safe area

The bundle

Nine files, or one archive

Take the ZIP for a project, or pull a single file when only one size is missing.

File	What it is	Size	Download

Everything at once

nine files

Unzip into the folder your host serves from the root, then paste the tags on the right.

In the head of every page

Why this one

Most icon generators stop at the download button.

Your logo stays yours.

The picture is read by the browser and never posted to a server. A content security policy blocks every other origin, so there is nowhere for it to go.

Every file a device asks for.

The ICO holds three sizes inside one file, and the manifest points Android at the two PNGs it needs. Nothing is left as an exercise.

Checked at 16 px, not just 512.

The preview strip shows the sizes side by side and the tab mockup shows what people actually see. If a letter disappears at 16, you find out before the deploy.

Reference

Which device reads which file

You do not have to remember this. It is here for the day a client asks.

All sizes are square. Larger always downsamples better than a small file scales up.

Where	Reads	Size
Browser tab	favicon.ico	16, 32, 48
Bookmarks, history	favicon-32x32.png	32
iPhone home screen	apple-touch-icon.png	180
Android home screen	android-chrome-192	192
Android splash, store	android-chrome-512	512
Google search result	favicon or PNG	48 and up

No upload. No account. No queue.

The file picker reads your logo into the page and nothing else. Close the tab and the picture is gone, because it was never anywhere else.

Read the privacy note

Questions

Asked before people ship the set

Is my logo uploaded anywhere?

No. It is read by the browser, drawn on a canvas and turned into files in memory.

Why does a favicon need so many files?

Each surface asks for a different size, and one file cannot serve all of them well.

Can I use a transparent background?

Yes. iOS paints its own plate behind a transparent touch icon, and the preview shows that.

What is a maskable icon?

An Android icon that survives being cropped to a shape. Keep the mark inside the middle 80 percent.

Which shape should I choose?

Squircle for iOS, circle for round marks, square when the logo has its own frame.

Do I need to keep the ZIP structure?

It mirrors the root of a public folder, so unzip it there and paste the head tags.

Does the ICO hold several sizes?

Three: 16, 32 and 48. Windows picks the one it needs.

Will it work for a Korean or Japanese letter?

Yes. Hangul, kana and kanji are drawn with the site's own font.