Content Marketing

Best practices voor het implementeren van een favicon voor uw website

Toen ze oorspronkelijk werden geïntroduceerd, waren de favicon heeft een afbeelding aangewezen die moet worden weergegeven wanneer gebruikers een bestand opslaan URL snelkoppeling op hun bureaublad. Tegenwoordig kan het favicon van uw website worden weergegeven in browsertabbladen, e-mailclients, aandelen op sociale media en zoekresultaten.

Een favicon is nu een noodzakelijk merkelement van elke website, maar wordt vaak over het hoofd gezien… dat zou niet zo moeten zijn. Favicons worden doorgaans op verschillende plaatsen in webbrowsers weergegeven, zodat gebruikers websites kunnen identificeren en er een bladwijzer van kunnen maken. Hier zijn enkele belangrijke punten over favicons:

  • Browser-tabbladen: wanneer gebruikers een website in een webbrowser openen, wordt de favicon weergegeven op het browsertabblad naast de paginatitel. Dit biedt een visuele identificatie voor het geopende tabblad, waardoor gebruikers gemakkelijker meerdere tabbladen kunnen vinden en ertussen kunnen schakelen.
  • Bladwijzers en favorieten: wanneer gebruikers een website als favoriet opslaan of een bladwijzer maken, wordt de favicon vaak weergegeven naast de naam van de website in het bladwijzer- of favorietenmenu. Het helpt gebruikers hun opgeslagen websites snel te identificeren en te openen.
  • Browser adresbalk: in sommige browsers wordt, wanneer gebruikers een website bezoeken, de favicon weergegeven in de adresbalk of omnibox van de browser. Dit voegt een visueel element toe aan de URL van de website.
  • Zoekresultaten: sommige zoekmachines geven favicons weer naast de zoekresultaten, zodat gebruikers websites gemakkelijk kunnen identificeren in zoekresultaten.

Een favicon is een kleine, iconische weergave van een website die de gebruikerservaring verbetert door visuele aanwijzingen te geven voor website-identificatie, bladwijzers en tabbladbeheer in webbrowsers. Het is een belangrijk element van webdesign en branding.

Pictogrambestandstypen

Oorspronkelijk hadden ze een ICO bestand, maar zijn geëvolueerd met veel platforms die kunnen weergeven PNG en SVG bestanden. ICO-bestanden kunnen worden beschouwd als een compilatie van meerdere pictogramafbeeldingen in één bestand. Wanneer u een ICO-bestand maakt, compileert u verschillende pictogramafbeeldingen van verschillende groottes en kleurdieptes tot één bestand met een specifieke structuur. Zo werkt een ICO-bestand:

  1. Meerdere pictogramafbeeldingen: Een ICO-bestand bevat doorgaans meerdere pictogramafbeeldingen met verschillende afmetingen en kleurdieptes. Deze afbeeldingen vertegenwoordigen hetzelfde pictogram, maar zijn ontworpen om in verschillende formaten te worden weergegeven zonder kwaliteitsverlies.
  2. Pictogrammap: Binnen het ICO-bestand bevindt zich een pictogrammenmap die de kenmerken van elke pictogramafbeelding specificeert, inclusief de grootte, kleurdiepte en locatie binnen het bestand.
  3. Koptekst informatie: het ICO-bestand bevat ook headerinformatie die essentiële details over het bestand biedt, zoals het aantal pictogramafbeeldingen dat in het bestand is opgeslagen.
  4. Afbeeldingsgegevens: Elke pictogramafbeelding in het ICO-bestand wordt opgeslagen als onbewerkte afbeeldingsgegevens zonder compressie. Hierdoor kunnen de afzonderlijke pictogramafbeeldingen snel softwarematig worden geopend en weergegeven.
  5. Pictogram ophalen: Wanneer een applicatie of het besturingssysteem een ​​pictogram moet weergeven dat is gekoppeld aan een bestand, map, snelkoppeling of applicatie, kan het de juiste pictogramafbeelding uit het ICO-bestand ophalen op basis van de gewenste grootte en kleurdiepte.

ICO

voordelen:

  • Brede ondersteuning: ICO is een traditioneel favicon-formaat dat breed wordt ondersteund door verschillende webbrowsers, inclusief oudere versies. Het is een veilige keuze om compatibiliteit te garanderen.
  • Meerdere maten en kleurdieptes: ICO-bestanden kunnen meerdere pictogramafbeeldingen van verschillende groottes en kleurdieptes bevatten, waardoor de favicon goed kan worden weergegeven in verschillende contexten.

Nadelen:

  • Beperkte schaalbaarheid: ICO-pictogrammen schalen niet zo goed als vectorformaten zoals SVG. Wanneer ze worden weergegeven in niet-standaardformaten, kunnen ICO-pictogrammen er korrelig uitzien.

PNG

voordelen:

  • Compressie zonder verlies: PNG-favicons bieden compressie zonder verlies, waardoor een hoge beeldkwaliteit bij kleine bestandsgroottes wordt gegarandeerd. Dit is vooral handig voor scherpe en gedetailleerde pictogrammen.
  • Transparantie: PNG ondersteunt alfa-transparantie, waardoor complexe en semi-transparante ontwerpen mogelijk zijn die naadloos aansluiten bij de achtergrond.
  • Ondersteuning in moderne browsers: PNG wordt goed ondersteund door moderne webbrowsers en biedt goede compatibiliteit.

Nadelen:

  • Meerdere bestanden: Om verschillende formaten en resoluties te kunnen dekken, moet u mogelijk meerdere PNG-bestanden in verschillende afmetingen aanleveren, waardoor het aantal HTTP-verzoeken kan toenemen.
  • Gebrek aan vectorondersteuning: PNG is een rasterformaat, dus het schaalt niet zo mooi als vectorformaten zoals SVG.

SVG

voordelen:

  • Vector-gebaseerd: SVG is een vectorformaat, wat betekent dat het kan worden geschaald zonder kwaliteitsverlies. Het is ideaal voor het maken van scherpe pictogrammen van hoge kwaliteit op elk formaat.
  • Kleine bestandsgrootte: SVG-bestanden zijn vaak kleiner in vergelijking met hun raster-tegenhangers, waardoor ze efficiënt zijn voor internetgebruik.
  • Veelzijdigheid: SVG maakt complexe en artistieke ontwerpen mogelijk, waaronder meerkleurige pictogrammen, verlopen en ingewikkelde vormen.
  • CSS-styling: SVG-favicons kunnen eenvoudig worden opgemaakt met behulp van CSS, wat een grotere ontwerpflexibiliteit biedt.

Nadelen:

  • Browser compatibiliteit: Hoewel moderne browsers SVG-favicons ondersteunen, hebben oudere browsers mogelijk beperkte of geen ondersteuning. Het is essentieel om reserveformaten zoals ICO of PNG te bieden voor bredere compatibiliteit.
  • Ingewikkeldheid: Het ontwerpen van SVG-pictogrammen kan complexer zijn, vooral voor degenen die niet bekend zijn met software voor vectorafbeeldingen.

De keuze voor het favicon-formaat hangt af van uw ontwerpvereisten en het compatibiliteitsniveau dat u wilt bereiken. ICO is een veilige keuze voor bredere compatibiliteit, PNG biedt verliesvrije kwaliteit en transparantie, en SVG is ideaal voor schaalbaarheid en ingewikkelde ontwerpen, maar vereist een zorgvuldige afweging van browserondersteuning en fallbacks. Het gebruik van een combinatie van formaten, zoals weergegeven in de volgende voorbeelden, kan maximale compatibiliteit en kwaliteit voor de favicon van uw website garanderen.

Hoe u een ICO-bestand maakt

Naar mijn mening is het behoorlijk raar dat Adobe Illustrator en Photoshop standaard geen .ICO-bestanden bouwen (plug-ins zijn beschikbaar). Je kunt echter elk van de verschillende afbeeldingsformaten uitvoeren met behulp van deze... en ze vervolgens bouwen met een van de volgende methoden:

  • GIMP ondersteunt native ICO-bestanden. Het is een gratis, open-sourceplatform dat beschikbaar is voor alle besturingssystemen.
  • ImageMagick is een gratis, open-sourceservice die u op uw pc of Mac kunt laden, zodat u meerdere bestanden kunt combineren tot een ICO-bestand. Voorbeeld commando:
convert image1.png image2.png image3.png favicon.ico
  • Er zijn ook online tools waarmee u een .ICO-bestand kunt maken, maar u moet deze zorgvuldig kiezen. Velen wijzigen het formaat van een enkel geüpload afbeeldingsbestand en comprimeren elk slecht. Favicon.io is een gratis online site waarmee u uw ICO-bestand kunt uploaden en opbouwen. Gebruik altijd de grootste bestandsgrootte en resolutie wanneer u het platform gebruikt, omdat de kleinere afbeeldingsformaten automatisch worden aangemaakt.

U wilt experimenteren met uw ICO-bestand. Door uw logo eenvoudigweg te verkleinen tot een pictogram van 16 px in het vierkant, kunt u het niet meer onderscheiden. Je zult zelfs zien dat het onze niet ons hele logo is, maar alleen het logo M van ons logo.

Controleer de favicon van uw website

Favicon HTML-best practices

Browsers geven prioriteit aan de selectie van favicons op basis van verschillende factoren, waaronder het formaat, de grootte en de aanwezigheid van specifieke declaraties. Hier ziet u hoe browsers doorgaans favicons prioriteren en selecteren:

  1. Prioriteit bestandsformaat: Browsers geven doorgaans voorrang aan .ico-bestanden indien aanwezig, omdat dit het traditionele favicon-formaat is. Als u een .ico favicon opgeeft met behulp van <link rel="icon" type="image/x-icon" href="favicon.ico">, zal het vaak voorrang hebben op andere formaten.
  2. Grootte prioriteit: Browsers houden ook rekening met het kenmerk size om de meest geschikte favicon voor de context te selecteren. Als u verschillende formaten opgeeft voor .png- of .svg-favicons, kiest de browser degene die het beste past bij de weergavevereisten van het apparaat.
  3. SVG “elke” grootte: Wanneer u de waarde “any” gebruikt voor de sizes attribuut in een SVG favicon-declaratie (sizes="any"), geeft dit aan dat de SVG zich aan elk formaat kan aanpassen. Browsers kunnen prioriteit geven aan een SVG met “elk” formaat om ervoor te zorgen dat deze goed kan worden geschaald om in verschillende schermresoluties te passen.
  4. De laatste verklaring heeft voorrang: Als u meerdere favicon-declaraties met hetzelfde formaat en dezelfde grootte opgeeft, kiest de browser doorgaans de laatste declaratie die hij in de HTML tegenkomt. Daarom is de bestelling van uw <link> elementen zijn belangrijk. De laatst gevonden persoon krijgt voorrang.
  5. Terugval naar standaardpictogram: Als geen van de opgegeven favicons overeenkomt met de criteria van de browser of als er geen favicon-declaraties zijn, kan de browser een standaardpictogram gebruiken (bijvoorbeeld het browserpictogram) of geen pictogram.
  6. Gebruiker voorkeuren: In sommige browsers kunnen gebruikers hun voorkeuren voor favicons instellen. De keuze van de gebruiker kan in dergelijke gevallen de opgegeven favicon van de website overschrijven.

Als u eerst een ICO-favicon-declaratie vermeldt, maar wilt dat de SVG als voorkeursfavicon wordt gebruikt, werkt deze mogelijk niet altijd zoals bedoeld, omdat sommige browsers prioriteit geven aan de eerste geldige favicon-declaratie die ze tegenkomen. U kunt er echter nog steeds voor zorgen dat de SVG het favoriete favicon is door deze als laatste op te geven en de elke maat attribuut.

Zo kunt u het doen:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Website Title</title>

    <!-- Favicon Declarations -->

    <!-- .ico Format (for maximum compatibility) -->
    <link rel="icon" type="image/x-icon" href="favicon.ico">

    <!-- .png Format (for modern browsers) -->
    <link rel="icon" type="image/png" href="favicon.png" sizes="32x32">

    <!-- .svg Format (preferred) -->
    <link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any">

    <!-- Alternative Text for Accessibility -->
    <link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any" alt="Your Website Favicon">

    <!-- Additional Sizes (optional) -->
    <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
    <link rel="icon" type="image/png" href="favicon-48x48.png" sizes="48x48">

    <!-- End of Favicon Declarations -->

    <!-- Your other meta tags, styles, and scripts go here -->

</head>
<body>
    <!-- Your website content goes here -->
</body>
</html>

In dit voorbeeld is het .ico-formaat nog steeds opgenomen voor maximale compatibiliteit, maar wordt het SVG-formaat als laatste gespecificeerd bij de elke maat attribuut. Deze opstelling geeft een hogere voorkeur aan het SVG-formaat, terwijl het nog steeds het .ico-formaat biedt als reserve voor browsers die er prioriteit aan geven. Door de SVG als laatste op te geven met de elke size, vergroot u de kans dat moderne browsers het SVG-formaat als favoriete favicon-indeling kiezen, omdat deze zich aan verschillende formaten kan aanpassen.

Douglas Karr

Douglas Karr is CMO van INZICHTEN openen en de oprichter van de Martech Zone. Douglas heeft tientallen succesvolle MarTech-startups geholpen, heeft geholpen bij het due diligence-onderzoek van meer dan $ 5 miljard aan Martech-overnames en -investeringen, en blijft bedrijven helpen bij het implementeren en automatiseren van hun verkoop- en marketingstrategieën. Douglas is een internationaal erkend expert en spreker op het gebied van digitale transformatie en MarTech. Douglas is ook een gepubliceerde auteur van een Dummie's-gids en een boek over zakelijk leiderschap.

Gerelateerde artikelen

Terug naar boven knop
Sluiten

Adblock gedetecteerd

Martech Zone kan u deze inhoud gratis aanbieden omdat we inkomsten genereren met onze site via advertentie-inkomsten, gelieerde links en sponsoring. We zouden het op prijs stellen als u uw adblocker zou verwijderen terwijl u onze site bekijkt.