Home » Wat is een apple-touch-icon.png?

Wat is een apple-touch-icon.png?

Op zijn tijd is het handig om naast Google Analytics ook eens te verifiëren wat je server allemaal voor statistieken bij houdt.

Zo zie je bijvoorbeeld welke crawlers van zoekmachines op bezoek zijn geweest, maar ook dat er bepaalde (vreemde) URLs verschijnen in een 404 Niet gevonden rapportage. Twee van die URLs die ik onlangs aantrof waren /apple-touch-icon-precomposed.png en /apple-touch-icon.png.

Mocht je dit ook in jouw statistieken tegen (zijn) gekomen, no worries! Sterker nog, het is eerder goed nieuws dan slecht nieuws.

/apple-touch-icon.png is goed nieuws

Voorbeelden apple touch iconWaar deze URL namelijk voor staat, zijn gebruikers die op hun smartphone of tablet je website als favoriet hebben opgeslagen op het bureaublad.

Zoals je browser een favicon.ico zoekt, zo zoeken smartphones en tablets een apple-touch-icon.png. Ongeacht van het formaat van de smartphone en de tablet.

Aangezien veel webmasters en website beheerders deze icoon niet aangemaakt hebben, leidt dit dus tot een ‘not found’ error.

Hoe een apple-touch-icon.png te maken

Om je dus helder te positioneren op het smartphone of tablet bureaublad van je bezoekers, kan je zelf een icoon aanmaken.

Kies je voor apple-touch-icon.png, dan rondt het apparaat zelf de hoeken af (oftewel Safari in iOs worden effecten toegevoegd) creëer je een apple-touch-icon-precomposed.png dan doet het dit niet.

Tenzij je voor ieder formaat apparaat een icoon wil verschaffen (een iphone is nou eenmaal kleiner dan een ipad) kies je voor een afbeelding van 114×114 pixels. Zo is deze helder bij groot formaat en wordt deze verkleint voor kleinere apparaten.

Sla deze op als png met de naam apple-touch-icon en upload deze afbeelding naar de root folder van je website (www.website.nl/>>hier dus<<). That’s it!

Weer een stap dichter bij een mobiel-vriendelijke website. Ben benieuwd naar mensen hun ervaringen hiermee en zie ze graag terug in de reacties.

15 Reacties op “Wat is een apple-touch-icon.png?”

  1. Mona zegt:

    Verbaasd me dat nog niemand hierop gereageerd heeft. Thanks voor de info! Weer iets nieuws geleerd :)

  2. Mark Haveman zegt:

    Hallo Thijs, ook bedankt voor deze heldere uitleg. Wij kwamen ook deze errors tegen en weten nu hoe dit op te lossen. Top,..

  3. Eline zegt:

    OMG, ik zit al twee dagen te googlen hiernaar! Ik erger me er dood aan, dat mijn eigen site zo’n lelijk kompasje vertoond in Safari 8. Ik had enorme hoop dat zelfs ik dit zou kunnen, maar…. toch niet! :D Nog steeds een kompasje…. De apple-touch-icon staat er volgens mij wel goed in (http://www.dreamcakefactory.nl/apple-touch-icon.png), maar desondanks…. Heb je nog goede raad voor mij misschien? :)

  4. Eline zegt:

    Thijs to the rescue! Ik had natuurlijk mijn cache niet geleegd, duhuh… Dus het was gewoon goed gegaan. Zie, zelfs ik kan het… Thijs, ENORM bedankt. Ik ga je bericht delen, want dit moet iedereen die een site heeft weten!

  5. John zegt:

    Handige tip, meteen gedaan. Een kind kan de was doen.

  6. Mag deze dombo even wat vragen?
    - Moet ik eerst deze (in een generator) gemaakte png naar mijn WP-mediatheek uploaden?
    - Of moet die png op een aparte page/post die dan deze url (www.website.nl/>>hier dus<<) krijgt?

    Hartelijk dank!!
    Magda

    • Dag Magda, de verwarring is begrijpelijk wanneer je gewend bent met WordPress te werken. De afbeelding moet namelijk buiten WordPress om op je server geüpload worden.

      In mijn geval heb ik van mijn hosting partij toegang gekregen tot Cpanel (andere hosting partijen gebruiken ook wel DirectAdmin) waarin de optie Bestandsbeheer (een soort Windows verkenner) te vinden is. Hierin moet de afbeelding in de map public_html geüpload worden om uiteindelijk op de juiste plek te belanden (www.website.nl/>>hier dus<<).

      • Dag Thijs!

        Allereerst héél erg bedankt voor je snelle antwoord. Ik krijg de laatste tijd via m’n Wordfence plugin zóveel meldingen van die apple-icon, dat ik eindelijk maar eens rond ging kijken waar het om draaide. Blij dat ik bij jou terechtkwam!

        Met dat Cpanel: kan ik ook via Filezilla in m’n map public_html komen?
        Daar customize ik soms wel es een plugin.

        Ik ben na 30 jaar kinderboeken illustreren eindelijk eens in de digiwereld gedoken (na ‘n cursus WP) en heb dit publicatieplatform voor mezelf gecreëerd. Ik begrijp inmiddels wel al iets meer dan de basiskennis, maar al ik dan ‘in de root zetten’ hoor, dan weet ik tot m’n grote frustratie weer niet wat dat is…

        Ik hoop dat je Filezilla bedoelt, want daar weet ik al die mapjes te vinden.

        Lieve groet uit zonnig Amsterdam,
        Magda

        • Ha Magda, blij een handje te kunnen helpen en leuk te horen dat het je verder allemaal goed afgaat met WordPress. Zeker het customizen van plugins via FTP (ok, Filezilla :-) ) is een onmisbare vaardigheid. De afbeelding uploaden naar public_html via Filezilla heeft overigens inderdaad hetzelfde resultaat als via Cpanel. Groeten, Thijs

          • Hai Thijs! Wauw, ik vind dit heel opwindend, om je eerlijk te zeggen.
            Ik heb de png in het mapje gestopt in de ftp. Als ik dan de url intik zoals jij boven beschreef, krijg ik inderdaad in een zwart scherm mijn icoontje te zien. Was het echt zó simpel?? :-)
            Omdat ik geen enkele device van Apple in huis heb, mag ik dan nog ‘n brutale vraag stellen? Kun jij checken of ik het goed heb gedaan?
            In ‘n Generator had ik ‘t aangemaakt, maar ik kreeg er VIER! Boven schreef je dat één formaat afdoende is. Helaas zat 114×114 er niet bij, wel 120×120.
            Ik ben zó benieuwd of ik het goed heb gedaan!
            Alvast een dikke knuf als bedankje voor al je goede zorgen!!
            Groetjes,
            Magda

  7. Mieke zegt:

    Hoi Thijs,
    Ik heb in diverse afmetingen een apple-touch-icon.png aangemaakt en direct via wordpress geüploadnaar de server.
    Na dit bericht van jou gelezen te hebben, hebik gecontroleerd of de afbeeldingen ook in map public_html/wp-content/uploads terecht gekomen zijn en dat is gelukkig het geval.
    Maar nu krijg ik een 404 error link dat het bestand browserconfig.xml niet gevonden kan worden. Dit bestand zou te maken hebben met de apple-icon afbeeldingen.
    Ik heb nu een leeg browserconfig.xml bestand aangemaakt in map public_html/wp-content/ om geen 404 error te krijgen. Mijn Engels is redelijk maar ik begrijp niet uit engelstalige sites waarom ik een apart bestand moet aanmaken en wat daar dan voor code in moet staan.
    Ben jij hier bekend mee?

  8. Dag Mieke, tot jouw reactie had ik nog niet gehoord van browserconfig.xml en snap inmiddels dat het bedoeld is voor Internet Explorer 11 zodat de mobiele favorieten plaatjes (zoals voor iPhones de apple-touch-icon.png) te vinden zijn. Wat betreft de 404 error, die komt door het uploaden van de afbeeldingen via WordPress zelf. Om ze in de root folder (direct na woonkamer-ideeen.nl/>hier<) te krijgen, moeten ze geüpload worden via FTP (zie ook de reactie van Magda hierboven) of het Directadmin controlpanel van je hosting pakket.

  9. Hé wat grappig, Mieke en Thijs! Ik liep vandaag ook op tegen een tsuami aan 404-browserconfig,xml op bij m’n Stats.
    Ik heb tiles (voor de Windows 8 browser met IE11) aangemaakt op deze site: http://www.buildmypinnedsite.com/en
    Dat hele winzip pakketje heb ik uitgepakt & gedownload (4 formaten tiles én het browserconfig,xml-bestand) en vervolgens via Filezilla direkt in m’n public_html gestopt, bij de apple-touch-icons.

    Nu lees ik dat Mieke haar appeltjes in de map wp-content heeft gestopt. Is dat juist? Had ik daar ook alles moeten zetten?

    Ik weet niet hoe ik kan controleren of die config. met z’n tegeltjes werkt… Is daar ‘n manier voor op je laptopje (ik heb Windows 7 en geen tablet/smartfoon)?

    Groetjes,
    Magda

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *


drie − = 1

De volgende HTML tags en attributen zijn toegestaan: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>