HTML favicon
Favicon je malý obrázek zobrazený vedle názvu stránky na kartě prohlížeče.
Jak přidat favicon do HTML
Jako favicon můžete použít jakýkoli obrázek, který se vám líbí. Můžete si také vytvořit vlastní favicon na stránkách jako https://favicon.cc .
Tip: Favicon je malý obrázek, takže by to měl být jednoduchý obrázek s vysokým kontrastem.
Vlevo od názvu stránky na kartě prohlížeče se zobrazí obrázek favicon takto:
Chcete-li přidat favicon na svůj web, buď uložte svůj obrázek favicon do kořenového adresáře svého webového serveru, nebo vytvořte složku v kořenovém adresáři nazvanou obrázky a uložte obrázek své favicon do této složky. Běžný název pro obrázek favicon je „favicon.ico“.
Dále přidejte <link>do svého souboru „index.html“ prvek za <title>prvek takto:
Příklad
<!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>
Nyní uložte soubor „index.html“ a znovu jej načtěte do prohlížeče. Karta vašeho prohlížeče by nyní měla zobrazovat váš obrázek favicon vlevo od názvu stránky.
Podpora formátu souborů Favicon
Následující tabulka ukazuje podporu formátu souboru pro obrázek favicon:
| 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 |
Shrnutí kapitoly
- Pomocí elementu HTML
<link>vložte favicon
HTML značka odkazu
| Tag | Description |
|---|---|
| <link> | Defines the relationship between a document and an external resource |
Úplný seznam všech dostupných značek HTML naleznete v naší Referenční příručce značek HTML .