Een app icon voor je website maken

app icons

Heb je een iPhone, iPad of misschien beide en wil je een eigen app icon van je website op je homescreen hebben staan? Dat kan! In een paar minuten tijd heb je een app icon gemaakt en is deze te vinden op je homescreen. Het is makkelijk en ziet er ook nog eens heel gaaf uit!

Maar hoe maak je zo’n app icon?

Je hebt het volgende nodig:

  • een programma als Photoshop of Illustrator
  • FTP toegang tot je website (bijvoorbeeld via Filezilla)
  • basis kennis van HTML/CSS
  • en een beetje creativiteit!

Stappenplan app icon voor je website maken

Doorloop de volgende stappen om je eigen app icon te maken:

1. Maak een nieuw Photoshop of Illustrator bestand aan met de afmeting 144 x 144 pixels en maak een mooi ontwerp wat je wilt gebruiken als app icon
2. Wees er zeker van dat je in RGB modus werkt en niet in CMYK om verandering in kleur te voorkomen
3. Sla dit bestand op als een .png bestand in de volgende formaten: 144×144 pixels, 114×114 pixels, 72×72 pixels en 57×57 pixels*. Geef ze een makkelijk te onthouden naam.
4. Plaats deze afbeeldingen via FTP in een map op je website of upload ze via de media bibliotheek van je website
5. Kopieer en plak de volgende code in de header van je website (in de tag):

<link href="/pad-naar-de-afbeeldingen-map/naam-bestand-57-pixels.png" rel="apple-touch-icon">
<link href="/pad-naar-de-afbeeldingen-map/naam-bestand-72-pixels.png" rel="apple-touch-icon" sizes="72x72">
<link href="/pad-naar-de-afbeeldingen-map/naam-bestand-114-pixels.png" rel="apple-touch-icon" sizes="114x114">
<link href="/pad-naar-de-afbeeldingen-map/naam-bestand-144-pixels.png" rel="apple-touch-icon" sizes="144x144">

6. Zorg ervoor dat je correct verwijst naar de map waar je afbeeldingen in staan en dat de naam van de afbeeldingen overeenkomt
7. Bezoek de betreffende website op je iPhone of iPad en kies voor de mogelijkheid ‘Voeg toe aan beginscherm’ (te vinden in de onderste balk van Safari)
8. Als het goed is zie je het symbool wat je ontworpen hebt en kan je deze opslaan op je homescreen van je device
9. En zie daar: het resultaat!

App icon website

*Je hebt vier verschillende formaten nodig, namelijk voor de iPhone retina (114×114 pixels), de iPhone zonder retina scherm (57×57 pixels), de iPad retina (144×144 pixels) en de iPad zonder retina scherm (72×72 pixels)