HTML -favicon
Een favicon is een kleine afbeelding die naast de paginatitel in het browsertabblad wordt weergegeven.
Hoe een favicon in HTML toe te voegen?
U kunt elke gewenste afbeelding als uw favicon gebruiken. U kunt ook uw eigen favicon maken op sites zoals https://favicon.cc .
Tip: Een favicon is een kleine afbeelding, dus het moet een eenvoudige afbeelding zijn met een hoog contrast.
Een favicon-afbeelding wordt weergegeven aan de linkerkant van de paginatitel in het browsertabblad, zoals dit:
Om een favicon aan uw website toe te voegen, slaat u ofwel uw favicon-afbeelding op in de hoofdmap van uw webserver, of maakt u een map in de hoofdmap met de naam afbeeldingen, en slaat u uw favicon-afbeelding op in deze map. Een veel voorkomende naam voor een favicon-afbeelding is "favicon.ico".
Voeg vervolgens een <link>element toe aan uw "index.html"-bestand, na het <title>element, zoals dit:
Voorbeeld
<!DOCTYPE html>
<html>
<head>
<title>My Page
Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Sla nu het bestand "index.html" op en laad het opnieuw in uw browser. Uw browsertabblad zou nu uw favicon-afbeelding links van de paginatitel moeten weergeven.
Ondersteuning voor Favicon-bestandsindelingen
De volgende tabel toont de ondersteuning van de bestandsindeling voor een favicon-afbeelding:
| Browser | ICO | PNG | GIF | JPEG | SVG |
|---|---|---|---|---|---|
| Edge | Yes | Yes | Yes | Yes | Yes |
| Chrome | Yes | Yes | Yes | Yes | Yes |
| Firefox | Yes | Yes | Yes | Yes | Yes |
| Opera | Yes | Yes | Yes | Yes | Yes |
| Safari | Yes | Yes | Yes | Yes | Yes |
Hoofdstuk samenvatting
- Gebruik het HTML
<link>-element om een favicon in te voegen
HTML-linktag
| Tag | Description |
|---|---|
| <link> | Defines the relationship between a document and an external resource |
Bezoek onze HTML Tag Reference voor een volledige lijst van alle beschikbare HTML-tags .