Een favicon is de kleine afbeelding die een website identificeert in browsertabbladen en bladwijzers. De naam komt van ‘favoriet pictogram’. Het geeft lezers een visuele manier om een site tussen geopende pagina's te vinden, zelfs als een tabblad te smal is om de titel ervan weer te geven. Zoekmachines kunnen ook de favicon van een site naast een resultaat weergeven. MDN's favicon-definitie beschrijft dit algemene browsergebruik.
De oranje gesegmenteerde cirkel vanSearchVector is daar een voorbeeld van. Het omslagdiagram gebruikt het daadwerkelijke pictogram om de verbinding tussen een afbeeldingsbestand, de HTML van een pagina en de browser uit te leggen. Het is een leerdiagram, geen screenshot van een zoekresultaat.
Klaar om er een te implementeren? Ga naar de HTML-instellingen of probleemoplossing voor ontbrekende pictogrammen.
Favicon, logo en sociaal imago: wat is wat?
Een logo is de bredere visuele identiteit van een bedrijf. Het kan een symbool, een volledige naam en een slogan bevatten. Een favicon is een kleine toepassing van die identiteit, meestal een vereenvoudigd symbool dat ook op kleine afmetingen herkenbaar blijft. Door een volledig woordmerk te verkleinen, zijn de letters vaak niet meer te onderscheiden.
| Asset | Hoofd job |
|---|---|
| Favicon | Identificeer de pagina in een browsertabblad of bladwijzer |
| Header logo | Identificeer het merk binnen de pagina-indeling |
| Social preview image | Illustrateer een gedeelde link met een grotere afbeelding |
| Startschermpictogram | Representeer een opgeslagen website of geïnstalleerde webapp op een apparaat |
Het wijzigen van het headerlogo betekent niet noodzakelijkerwijs dat de favicon wordt bijgewerkt. Dit kunnen afzonderlijke bestanden zijn die door verschillende instellingen worden beheerd. Op dezelfde manier repareert het vervangen van een sociale preview-afbeelding een ontbrekend tabbladpictogram niet. Begin met het identificeren van het oppervlak dat verkeerd is, en zoek vervolgens de instelling die dit levert.
Kies een pictogram dat kleine formaten overleeft
Begin met een vierkant canvas en een eenvoudig silhouet. Exporteer een grote bronafbeelding en bekijk deze vervolgens op 16×16 en 32×32 als praktische ontwerpcontrole. Deze previews stellen de leesbaarheid op de proef; ze beweren niet dat elke browser het pictogram in één vaste grootte weergeeft. Zoek naar verdwijnende lijnen, overvolle letters en transparante gebieden die samenvloeien met de achtergrond van het tabblad.
Bekijk de markering tegen zowel een lichte als een donkere achtergrond. Een dunne, donkere omtrek kan op een donker tabblad verdwijnen, terwijl een bleek symbool op een licht tabblad kan verdwijnen. Een vaste vorm met opzettelijk contrast is vaak gemakkelijker te herkennen. Vertrouw niet alleen op kleur: een onderscheidende omtrek helpt nog steeds als pictogrammen visueel op elkaar lijken.
Bewaar een bronbestand dat uw team kan bewerken. Als u een grotere kopie van een wazige miniatuur exporteert, worden de details ervan niet hersteld. Voor een rebranding kunt u het kleine pictogram naast het hoofdlogo goedkeuren, zodat de website, bladwijzers en opgeslagen snelkoppelingen verwant lijken.
Voeg een favicon toe met een echt HTML-voorbeeld｟T65��
SearchVector serveert een echte 512×512 PNG op de favicon-afbeeldings-URL. Deze minimale aangifte verwijst naar dat bestaande asset op de SearchVector site:
Plaats de declaratie in de van het document. Het root-relatieve pad wordt omgezet vanaf de huidige hostnaam: op SearchVector vraagt het /favicon.png op van SearchVector; op uw domein wordt dat bestand opgevraagd bij uw domein. Voor uw eigen site uploadt u uw eigen merkitem en gebruikt u het daadwerkelijke pad. Als u de tag kopieert zonder de afbeelding te uploaden, blijft er een verbroken referentie achter.
Het rel attribuut identificeert de bron als een pictogram. De href lokaliseert het, type beschrijft het formaat ervan, en sizes beschrijft de afmetingen van de afbeelding. Als u “512x512” schrijft, wordt de grootte van een bestand niet gewijzigd. Inspecteer de geëxporteerde afbeelding en houd de aangifte accuraat.
SearchVector declareert ook SVG- en ICO-alternatieven. Browsers kunnen kiezen tussen pictogramdeclaraties met behulp van attributen zoals type en grootte, zoals uitgelegd in de pictogramlinkreferentie van T16｠MDN. Meerdere declaraties zijn dus niet automatisch een probleem, maar verouderde alternatieven kunnen inconsistente verschijnselen verklaren.
Als u een CMS gebruikt, begin dan met de instelling van het sitepictogram. Als u een raamwerk gebruikt, gebruik dan het gevestigde metadatamechanisme ervan. Inspecteer vervolgens de resulterende HTML: een succesvolle upload in een beheerdersscherm is slechts een deel van het werk. Vermijd het toevoegen van een tweede concurrerende instelling voordat u controleert wat de bestaande sjabloon al oplevert.
Wat Google nodig heeft voor zoekweergave
De favicon-documentatie van T23｠Google vereist een vierkante afbeelding van minimaal 8×8 pixels en raadt aan groter dan 48×48 te zijn. De vermelde formaten omvatten PNG en ICO. Ga er niet van uit dat een SVG die in een browser werkt, ondersteuning biedt in de zoekpresentatie van Google.De startpagina moet het pictogram declareren. Googlebot heeft toegang nodig tot die startpagina, en Googlebot-Image heeft toegang nodig tot het pictogrambestand. Houd de pictogram-URL stabiel en gebruik een markering die representatief is voor de site. Google ondersteunt één favicon per hostnaam: een subdomein kan zijn eigen favicon hebben, maar een submap krijgt geen aparte zoekfavicon.
De geschiktheid garandeert geen weergave. Na een wijziging moet Google de startpagina opnieuw crawlen en verwerken; Volgens de documentatie kan dit dagen tot weken duren. Site-eigenaren kunnen indexering van de startpagina aanvragen via URL-inspectie. Het herhaaldelijk hernoemen van de afbeelding is geen bruikbare vervanging voor het controleren van de toegang en het toestaan van verwerkingstijd.
Problemen met een ontbrekend of verouderd favicon oplossen
Afzonderlijke drie observaties: wat de HTML declareert, wat de afbeeldings-URL retourneert en wat de browser weergeeft. Een discrepantie tussen hen vertelt u waar u onderzoek moet doen. Houd een korte notitie bij van de pagina-URL, de pictogram-URL en het resultaat, in plaats van meerdere instellingen tegelijk te wijzigen.
| Symptoom | Volgende check |
|---|---|
| Geen pictogram op welke pagina dan ook | Inspecteer de kop op een pictogramdeclaratie; open de afbeeldings-URL direct |
| Homepage werkt, artikel niet | Vergelijk sjablonen en root-relatief versus pagina-relatief paden |
| Oud pictogram in één browser | Vergelijk een nieuw browserprofiel en inspecteer alle aangegeven alternatieven |
| Afbeeldings-URL opent een webpagina | Controleer op een omleiding, toegangsuitdaging of fallback HTML-antwoord |
| Browser werkt, zoeken niet | Bekijk de homepagedeclaratie, crawltoegang en geschiktheid voor zoeken afzonderlijk |
Een antwoord met het label 200 is onvoldoende als de server een inlogpagina of een generieke HTML-fallback verzendt. Inspecteer in het netwerkpaneel van de browser de uiteindelijke URL van het pictogramverzoek, het inhoudstype van het antwoord en het voorbeeld. Een PNG zou eigenlijk moeten worden gedecodeerd als een PNG. Controleer ook of een CDN nog steeds een ouder bestand aanbiedt nadat de oorsprong is bijgewerkt.
Voor een cacheonderzoek opent u de afbeelding rechtstreeks en vergelijkt u deze met een nieuw browserprofiel. Het wissen van een cache kan helpen de oorzaak te achterhalen, maar gebruikers hoeven geen speciale reset uit te voeren om de website te laten functioneren. Controleer de geïmplementeerde asset- en cacheconfiguratie voordat u een lokale vernieuwing als permanente oplossing beschouwt.
Uitgewerkt voorbeeld: een geneste pagina verliest zijn pictogram
Overweeg een fictieve site waarvan de startpagina het juiste pictogram toont, terwijl een artikel onder /blog/ dat niet doet. Beide sjablonen bevatten href="favicon.png", zonder de voorafgaande schuine streep. Ervan uitgaande dat er geen basis-URL-overschrijving is, wordt dat relatieve pad naast de huidige pagina omgezet. Het kan in de root werken terwijl er om een andere locatie voor het artikel wordt gevraagd.
De ontwikkelaar opent het pictogramverzoek van het artikel en ontdekt dat het de HTML-fallback van de site retourneert in plaats van een afbeelding. De oplossing is om te bevestigen dat de afbeelding in de hoofdmap van de site bestaat en de gedeelde declaratie te wijzigen in href="/favicon.png". Vervolgens controleren ze de startpagina en het artikel opnieuw. Beiden vragen nu om hetzelfde asset.
Dit is een uitgewerkt diagnostisch voorbeeld, geen gerapporteerd SearchVector incident. De les is om de gevraagde URL te inspecteren voordat u het artwork vervangt. Een perfect geldige afbeelding kan niet helpen als een geneste sjabloon om het verkeerde bestand vraagt.
Een laatste controle voordat u de taak afsluit
- Open de startpagina en één geneste pagina; bevestig beide, declareer het beoogde pictogram.
- Open elk aangegeven alternatief en controleer of het tot het huidige merk behoort.
- Bevestig dat de beoogde afbeelding wordt geladen zonder authenticatie of een HTML-fallback.
- Inspecteer het kleine pictogram in een lichte en donkere browser uiterlijk.
- Bekijk de geschiktheid van Google afzonderlijk, noteer vervolgens de wijziging en houd rekening met verwerkingstijd.
Voor een bredere websitebeoordeling gaat u verder met SearchVector’s Website Checker of de Web Page Crawler. Bewaar de directe afbeelding en HTML-controles hierboven als uw favicon-bewijs; een algemene paginabeoordeling garandeert niet hoe een zoekmachine uw merk zal weergeven.
Een voltooide favicon-taak heeft een herkenbare afbeelding, een correcte declaratie en een werkende bron-URL voor alle paginasjablonen. Controleer eerst die betonstukken. Controleer vervolgens de zoekweergave zonder een vertraagde vernieuwing te verwarren met een kapotte browserimplementatie.
