ImageConver

ImageConver · Dag 16 · Browserpictogram

Apple Touch-pictogramgenerator

Generate 180×180, 167×167, and 152×152 Apple touch icon PNG files from one source image, then download a ZIP containing the icons and ready-to-review link markup. Cropping, padding, background color, and output are handled locally in the browser.

Lokale verwerking. De bronafbeelding blijft op dit browsertabblad staan. Bewaar de bewerkbare master en valideer de gegenereerde assets in de officiële tools van het platform.

256px werkvoorbeeldUpload artwork to preview output.

Kies een afbeelding om te beginnen.

Direct antwoord

Wat deze pagina oplevert en waar het past

Generate 180×180, 167×167, and 152×152 Apple touch icon PNG files from one source image, then download a ZIP containing the icons and ready-to-review link markup. Cropping, padding, background color, and output are handled locally in the browser. Apple touch icons represent a website saved to an Apple device Home Screen. They are separate from native iOS application icons, App Store assets, favicons, launch screens, and complete progressive web app manifests.

Pictogramwerk is een bezorgsysteem, geen enkele wijziging van het formaat. Een platform kan dezelfde identiteit gebruiken in een winkel, opstartprogramma, melding, instellingenscherm, browsertabblad, geïnstalleerde webapp, snelkoppeling of zoekresultaat op besturingssysteem. Elke context kan een ander masker, dichtheid, cache, compositieregel of validatiestap toepassen. Het gegenereerde pakket moet daarom worden behandeld als een geteste afgeleide van een bewerkbare merkmaster.

Begin met schone bronillustraties. Houd het primaire onderwerp gecentreerd, verwijder onnodige tekst, vermijd haarlijndetails en beoordeel het ontwerp op de kleinste werkelijke weergavegrootte. Voeg het buitenste ronde masker of de systeemschaduw van een platform niet toe aan de bron, tenzij de huidige officiële richtlijnen deze behandeling expliciet vereisen. Een groot voorbeeld kan problemen verbergen die duidelijk worden bij 16, 32 of 48 pixels.

Bestandsafmetingen alleen bewijzen de juistheid niet. Bevestig kleurruimte, alfagedrag, bestandspaden, MIME-typen, metagegevens van manifesten of activacatalogi, doeldeclaraties, naamgeving, cachegedrag en daadwerkelijke apparaatpresentatie. Bewaar het bronbestand en documenteer welke generatorinstellingen de beoordeelde release-items hebben opgeleverd.

Werkstroom

Een gecontroleerd pictogramproces in vier stappen

  1. 1

    Inspecteer de bron

    Choose a clear square or near-square PNG, JPG, or WebP source.

  2. 2

    Kies instellingen

    Select contain or cover fitting, padding, and a background color.

  3. 3

    Genereer activa

    Preview the 180-pixel result and generate all three PNG sizes.

  4. 4

    Valideer de levering

    Inspect the ZIP, place files at stable URLs, and add the supplied link markup to the site head.

Visuele kwaliteit

Pasvorm, detail, transparantie en herkenning

Inlijsten en opvullen

Fit-modus verandert de betekenis. Contain behoudt de volledige broncode en kan er achtergrond omheen toevoegen; dekking vult het vierkant en kan randen bijsnijden. Opvulling is handig voor gecentreerde markeringen, maar te veel zorgt voor een klein uitziend pictogram. Vergelijk maskers en kleine voorbeelden voordat u een waarde accepteert.

Klein detail

Door rasterverkleining worden details verwijderd. Dunne lijnen, kleine tellers, fotografische texturen en letters kunnen vervagen of verdwijnen. Het beste kleine pictogram is vaak een vereenvoudigde tekening in plaats van een mechanisch verkleinde versie van marketingkunstwerk. Bekijk de werkelijke pixeluitvoer op een schaal van 100%.

Achtergrond gedrag

Transparantie is niet neutraal. Een browser, opstartprogramma, winkel of besturingssysteem kan transparante pixels samenstellen tegen een kleur die u niet hebt gekozen. Full-bleed platformillustraties moeten een bewuste achtergrond gebruiken waar de begeleiding dit verwacht, terwijl formaten zoals ICO opzettelijk alpha kunnen behouden.

Kleurcontrast en -herkenning zijn van belang in lichte, donkere, getinte en thematische omgevingen. Test het pictogram in de buurt van concurrerende pictogrammen en tegen meerdere achtergronden. Geautomatiseerde generatie kan niet bepalen of een merk onderscheidend, toegankelijk, juridisch goedgekeurd of consistent is met de huidige merkregels.

Belangrijke grenzen

Welke geautomatiseerde pictogramgeneratie kan niet worden gegarandeerd

  • The tool does not create native App Store or Xcode asset catalogs.
  • Safari and device behavior can change, so test on supported physical devices.
  • Fine text and edge details may become unreadable at Home Screen sizes.
  • Transparent areas are flattened to the selected background to avoid unpredictable presentation.

Gebruiksgevallen

Waar deze pagina past in de productie

Levering van producten

Create Home Screen artwork for a web application.

Compatibiliteit werk

Replace a blurry touch icon with correctly sized PNG assets.

Kwaliteitsbeoordeling

Prepare iPhone and iPad-specific icon files from one brand master.

Overdracht van ontwikkelaar

Package repeatable icon assets for a website deployment.

Uitvoering

Configuratie-, caching- en releasecontroles

Bewaar gegenereerde bestanden op stabiele, cachebewuste URL's. Een manifest of HTML-declaratie die naar een ontbrekend bestand verwijst, wordt niet gered door de juiste PNG op de computer van een ontwikkelaar te hebben. Controleer de HTTP-status, het inhoudstype, de afmetingen, bestandsbytes en het gedrag van dezelfde oorsprong of cross-origin, waar relevant.

Behandel configuratiebestanden als reviewbare code. Inspecteer elk manifestitem, itemcatalogusrecord, mapnaam, schaalfactor, doeltoken en bestandsnaam voordat u samenvoegt. Een gegenereerd fragment vermijdt opzettelijk het raden van applicatienamen, start-URL's, bundel-ID's, themakleuren of projectinstellingen die bij de echte applicatie horen.

Cache-invalidatie verdient een releasecontrole. Geïnstalleerde web-apps, browsers, draagraketten, bouwsystemen en winkels kunnen oude pictogrambronnen behouden. Gebruik doelbewuste versiepaden of cachebeleid, bouw de applicatie opnieuw op, installeer deze indien nodig opnieuw en onderscheid een verouderde bron van een onjuist gegenereerde bron.

Valideer zowel de geometrie als de workflow. Geometrie omvat bijsnijden, veilige zones, centreren, randbehandeling en helderheid op klein formaat. De workflow omvat correct bronbeheer, herhaalbare instellingen, platformconfiguratie, build-uitvoer, implementatie en terugdraaien. Een visueel aantrekkelijk bestand kan nog steeds mislukken omdat het project naar een andere bestandsnaam verwijst.

Privacy

Lokale verwerking en activabehandeling

De browser leest de geselecteerde bron met lokale bestands-API's, tekent afgeleiden naar canvas, codeert PNG-gegevens en verzamelt de gevraagde ZIP of ICO in het geheugen. ImageConver verzendt in deze workflow geen bronpixels naar een pictogramconversie-eindpunt.

Lokale verwerking vermindert de blootstelling aan overdrachten, maar maakt een gedeeld apparaat niet privé. Browserdownloads, lijsten met recente bestanden, gesynchroniseerde mappen, back-ups, extensies en voorbeelden van besturingssystemen kunnen kopieën bevatten. Gebruik een goedgekeurd werkstation voor niet-uitgebrachte merken of vertrouwelijke productillustraties.

Gegenereerde object-URL's zijn tijdelijk en worden ingetrokken wanneer ze worden vervangen of opnieuw worden ingesteld. Verplaats beoordeelde assets naar gecontroleerde projectopslag, bewaar de bewerkbare master en sluit het tabblad nadat u gevoelige materialen heeft verwerkt.

Veelgestelde vragen

Apple Touch Icon Generator FAQ

What is the main Apple touch icon size?

A 180×180 PNG is the common modern iPhone touch icon. The ZIP also includes 167×167 and 152×152 variants for established iPad workflows.

Is an Apple touch icon the same as an iOS app icon?

No. A touch icon belongs to a website saved to the Home Screen. A native app icon is configured through Xcode and App Store tooling.

Should the artwork include rounded corners?

Do not bake in a device-specific corner mask. Supply square artwork and let the platform present it.

Can the source have transparency?

Yes, but the generator composites it onto the selected solid background because transparent presentation can vary.

Which fit mode should I use?

Contain preserves the complete artwork with padding. Cover fills the square and may crop the source edges.

Are images uploaded?

No. Decoding, resizing, PNG encoding, ZIP creation, and download occur in the active browser tab.

Do I still need a favicon?

Yes. Touch icons and favicons serve different browser and operating-system contexts, so provide both.

Primaire referenties

Actuele platformdocumentatie

  1. Apple: Configuring Web Applications
  2. Apple Human Interface Guidelines: App icons
  3. MDN: CanvasRenderingContext2D drawImage

Laatst beoordeeld: 20 oktober 2026. Platformvereisten en toolwijziging; verifieer release-kritieke assets aan de hand van de huidige primaire documentatie.