Aby dodać ikonę w HTML, możesz skorzystać z różnych metod, w zależności od tego, jaki efekt chcesz osiągnąć: dodać favicon (ikonę strony wyświetlaną na karcie przeglądarki), wstawić ikonę w treści strony (np. za pomocą bibliotek ikon) lub załadować własny plik graficzny jako ikonę. Poniżej znajdziesz szczegółowy poradnik do wszystkich tych zastosowań.
Dodawanie favicon – ikony strony internetowej
Favicon to niewielka ikona reprezentująca stronę, która pojawia się obok tytułu karty w przeglądarce, na liście zakładek, w historii i innych miejscach.
Krok po kroku
- Przygotuj plik ikony
Najczęściej favicon jest plikiem.ico, ale możesz użyć także.pnglub.svg(zalecany rozmiar to 16×16 px lub 32×32 px); - Umieść plik na serwerze
Skopiuj plik do folderu ze stroną, np. do głównego katalogu lub do podfolderu, np.assets; - Dodaj odpowiedni tag do sekcji
<head>w pliku HTML
Wstaw linię:
<link rel="icon" type="image/x-icon" href="favicon.ico">Lub, jeśli plik jest w innym folderze:
<link rel="icon" type="image/png" href="assets/favicon.png">- Odśwież stronę i wyczyść cache przeglądarki, jeśli favicon się nie wyświetla.
Przykład użycia w kodzie HTML –
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Moja strona</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<!-- zawartość strony -->
</body>
</html>
Wyświetlanie ikony w treści strony – wykorzystanie bibliotek ikon
Chcąc wyświetlić ikonę w elemencie strony (przycisk, nagłówek), warto użyć popularnych bibliotek jak Font Awesome, Bootstrap Icons czy Material Icons. Umożliwiają one łatwe dodawanie ikon za pomocą specjalnych klas CSS.
Font Awesome
Jak dodać do projektu
- Dodaj link do CDN w sekcji
<head>
(fragment do pobrania z oficjalnej strony lub przykładowo:);
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">- Użyj odpowiedniej klasy CSS w elemencie HTML;
<i class="fa-solid fa-house"></i>Przykłady zastosowań –
- Ikona w nagłówku –;
<h1><i class="fa-solid fa-house"></i> Strona główna</h1>- Ikona w przycisku –;
<button>
<i class="fa-solid fa-download"></i> Pobierz
</button>
Ikona z pliku SVG lub PNG
Możesz także umieścić własny plik graficzny jako ikonę w dowolnym miejscu strony.
<img src="ikona.svg" alt="Opis ikony" width="24" height="24">Ikona jako dekoracja przy elemencie HTML (np. z wykorzystaniem CSS)
Czasem ikonę można dodać za pomocą pseudoelementów i fontów-ikon:
.przycisk-koszyk::before {
content: "\f07a"; /* kod Unicode z Font Awesome */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-right: 6px;
}
Wymaga to dołączenia wybranej biblioteki ikon.
Podsumowanie
- Favicon umieszczamy w
<head>z pomocą tagu<link>; - Ikony w treści strony najłatwiej dodać przez biblioteki ikon (Font Awesome, Bootstrap Icons);
- Własny obrazek (SVG/PNG) można wstawić jako
<img>; - Ikon można używać w dowolnych elementach: nagłówkach, przyciskach, menu, formularzach czy linkach, poprawiając czytelność i atrakcyjność wizualną strony.
Dzięki tym technikom łatwo poprawisz zarówno rozpoznawalność strony w przeglądarce, jak i jakość nawigacji oraz estetykę serwisu internetowego.
