Ulubione HTML
Favikona to mały obrazek wyświetlany obok tytułu strony w zakładce przeglądarki.
Jak dodać favicon w HTML
Jako favicon możesz użyć dowolnego obrazu. Możesz także stworzyć własną favicon na stronach takich jak https://favicon.cc .
Wskazówka: favikona to mały obraz, więc powinien to być prosty obraz o wysokim kontraście.
Obraz favicon jest wyświetlany po lewej stronie tytułu strony na karcie przeglądarki, w następujący sposób:
Aby dodać favicon do swojej witryny, zapisz obraz favicon w katalogu głównym serwera WWW lub utwórz folder w głównym katalogu o nazwie images i zapisz obraz favicon w tym folderze. Popularna nazwa obrazu favicon to „favicon.ico”.
Następnie dodaj <link>
element do swojego pliku „index.html”, po <title>
elemencie, w ten sposób:
Przykład
<!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>
Teraz zapisz plik „index.html” i załaduj go ponownie w przeglądarce. Twoja karta przeglądarki powinna teraz wyświetlać obraz favicon po lewej stronie tytułu strony.
Obsługa formatu pliku Favicon
W poniższej tabeli przedstawiono obsługę formatu pliku dla obrazu 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 |
Podsumowanie rozdziału
- Użyj elementu HTML
<link>
, aby wstawić favicon
Znacznik linku HTML
Tag | Description |
---|---|
<link> | Defines the relationship between a document and an external resource |
Pełną listę wszystkich dostępnych tagów HTML można znaleźć w naszym podręczniku HTML Tag Reference .