Ga naar de hoofdinhoud

Apple Touch Icon versus Favicon: wat moet een moderne site bevatten?

Door Converty Team

Vergelijk Apple Touch-pictogrammen en favicons, begrijp waarom moderne sites vaak beide nodig hebben, en leer hoe u ze vanuit één bronafbeelding kunt bundelen.

Apple Touch Icon versus Favicon: wat moet een moderne site bevatten?

Een Apple touch-pictogram en een favicon zijn gerelateerd, maar zijn niet hetzelfde bestand dat hetzelfde doel dient. Een favicon wordt meestal geassocieerd met browsertabbladen, bladwijzers en bekend browserchroom. Een Apple Touch-pictogram is bedoeld voor snelkoppelingen op Apple-apparaten, waarbij de site meer op een app-pictogram lijkt.

De verwarring is begrijpelijk omdat in veel projecten beide bestanden vanuit hetzelfde merkteken vertrekken. Het bronontwerp kan één vierkante afbeelding zijn, maar de verpakking moet verschillende oppervlakken bedienen. Dat is de reden waarom een ​​moderne favicon-workflow niet mag stoppen bij een enkel favicon.ico-bestand.

Wat een favicon doet

Een favicon is de kleine visuele markering die gebruikers zien in browsertabbladen, bladwijzers, geschiedenis en gerelateerde browserinterfaces. Het helpt gebruikers de site snel te herkennen wanneer er meerdere tabbladen geopend zijn.

Het klassieke bestand is favicon.ico, hoewel veel moderne instellingen ook PNG-pictogrambestanden bevatten. Voor routinematige lanceringen van sites is het nog steeds praktisch om favicon.ico in het pakket te houden, omdat het bekende verwachtingen en compatibiliteitspaden dekt.

Wat een Apple-aanraakpictogram doet

Een Apple Touch-pictogram wordt gebruikt wanneer een site wordt opgeslagen op Apple-apparaatoppervlakken, zoals snelkoppelingen op het startscherm. Het is niet alleen een kleine tabmarkering. Het moet werken als een pictogram in een meer app-achtige context.

Dat verandert de ontwerpdruk. Een browsertabbladpictogram kan extreem klein zijn. Een aanraakpictogram kan groter lijken, maar het moet ook schoon, gecentreerd en herkenbaar aanvoelen als een op zichzelf staand merkteken. Dezelfde bronillustratie kan voor beide werken als deze eenvoudig en vierkant is, maar de uitvoer nog steeds correct moet worden verpakt.

Waarom moderne sites vaak beide nodig hebben

Als uw site alleen een favicon heeft, kan de desktopbrowserervaring er prima uitzien, terwijl de oppervlakken van mobiele snelkoppelingen onvolledig of inconsistent aanvoelen. Als uw pakket zich alleen op aanraakpictogrammen richt, mist u mogelijk nog steeds het traditionele browsertabbladpad.

Voor een SaaS-lancering, documentatiesite, productmicrosite of kleine webapp is het praktische antwoord meestal beide. U wilt een pakket dat browsertabbladen en app-achtige snelkoppelingen omvat zonder iemand te vragen elke pictogramvariant handmatig te exporteren.

Dit is waar de Favicon / App Icon Generator past. Het genereert favicon.ico, PNG-pictogrammen, Apple Touch-pictogrammen, pictogrammen die klaar zijn voor Android en een starter site.webmanifest uit één vierkante bronafbeelding.

Bronillustraties zijn de gedeelde beperking

De grootste kwaliteitsfactor is de bronafbeelding. Hetzelfde merkteken moet meerdere oppervlakken en formaten overleven. Gedetailleerde illustraties, kleine tekst en illustraties van rand tot rand presteren meestal slecht. Een eenvoudige vorm met voldoende vulling blijft waarschijnlijk herkenbaar.

Converty bevat een ronde optie voor browser- en Android-uitvoer, terwijl Apple-aanraakpictogrammen vierkant blijven. Dat is van belang als uw merk beter tot zijn recht komt in een cirkelvormig kader, maar u toch wilt dat Apple-oppervlakken hun verwachte vierkante uitstraling behouden.

De praktische beslissing

Gebruik een favicon als je browserherkenning nodig hebt. Gebruik een Apple Touch-pictogram als u om Apple-snelkoppelingsoppervlakken geeft. Gebruik een compleet pakket als u wilt dat de site over beide kanten afgewerkt aanvoelt.

Voor een uitgebreidere checklist voor bestanden leest u Welke bestanden heeft u nodig in een Favicon-pakket?. Wanneer u klaar bent om de assets te exporteren, opent u de Favicon / App Icon Generator, uploadt u één vierkante bronafbeelding, bekijkt u het pakket en downloadt u de ZIP.

Misschien vind je dit ook interessant