Favicon i ikona Apple Touch
Dodawanie ikon wyświetlanych na kartach przeglądarki i ekranach głównych
Favicon i ikona Apple Touch to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.
Czym jest favicon?
Favicon to mała ikona wyświetlana w:
- Kartach przeglądarki
- Listach zakładek
- Historii przeglądarki
- Wynikach wyszukiwania (czasami)
Ułatwia użytkownikom szybkie rozpoznanie witryny wśród wielu otwartych kart.
Podstawowy odnośnik favicon
Favicon należy dodać za pomocą elementu link w sekcji head:
<head>
<!-- SVG favicon (modern, scales at any size) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- PNG fallback -->
<link rel="icon" type="image/png" href="/favicon.png">
<!-- Legacy ICO for Internet Explorer -->
<link rel="shortcut icon" href="/favicon.ico">
</head>Formaty favicon
Zalecana strategia dotycząca formatów favicon:
- SVG — format wektorowy, idealnie skaluje się przy każdej wielkości i ma mały rozmiar pliku (należy używać go jako pierwszego)
- PNG 32x32 — rozwiązanie awaryjne dla przeglądarek, które nie obsługują SVG
- ICO — starszy format zawierający rozmiary 16x16 i 32x32
Umieszczanie pliku ICO
Plik favicon.ico w katalogu głównym domeny jest pobierany automatycznie:
<!-- Browsers request /favicon.ico automatically -->
<!-- Placing it at the domain root means no link tag is needed:
/favicon.ico -- served without any HTML link tag
-->
<!-- But: specifying it explicitly is better: -->
<link rel="icon" href="/favicon.ico" sizes="32x32">Atrybut sizes
Atrybut sizes określa wymiary ikony:
<link rel="icon" href="/icon-16.png" sizes="16x16">
<link rel="icon" href="/icon-32.png" sizes="32x32">
<link rel="icon" href="/icon-64.png" sizes="64x64">Ikona Apple Touch
Ikona Apple Touch jest wyświetlana, gdy użytkownicy dodadzą witrynę do ekranu głównego systemu iOS:
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Recommended size: 180x180 px -->
<!-- Used by: iOS Safari, some Android browsers -->
<!-- Apple applies rounded corners and gloss effect automatically -->
<!-- Pre-composited icon (no transparency) looks best -->Ikony maskable dla Androida
Aplikacje PWA na Androida używają ikon maskable, które wypełniają kształt ikony:
<link rel="manifest" href="/manifest.json">
<!-- In manifest.json: -->
<!--
{
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
}
]
}
-->Favicon w trybie ciemnym
Należy udostępnić favicon SVG uwzględniający tryb ciemny:
<!-- SVG favicon with dark mode support: -->
<!-- In /favicon.svg: -->
<!--
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
@media (prefers-color-scheme: dark) {
.icon-bg { fill: white; }
.icon-mark { fill: black; }
}
.icon-bg { fill: #0070f3; }
.icon-mark { fill: white; }
</style>
<circle class="icon-bg" cx="16" cy="16" r="16"/>
<text class="icon-mark" x="50%" y="60%">C</text>
</svg>
-->Manifest aplikacji internetowej dla ikon PWA
Kompletna konfiguracja ikon dla aplikacji Progressive Web App:
<link rel="manifest" href="/manifest.json">
<!-- manifest.json icons array: -->
<!--
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
-->Kompletna konfiguracja favicon
Kompletna, nowoczesna konfiguracja favicon:
<head>
<!-- SVG: scales to any size, supports dark mode -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- PNG fallback -->
<link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32">
<!-- Apple home screen -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- PWA manifest (for Android home screen) -->
<link rel="manifest" href="/manifest.json">
</head>Testowanie favicon
Jak sprawdzić konfigurację favicon:
- Należy wykonać pełne przeładowanie (Ctrl+Shift+R / Cmd+Shift+R), aby wyczyścić zapisany w pamięci podręcznej favicon
- Należy użyć narzędzia Favicon Checker (realfavicongenerator.net)
- Należy przetestować ikonę Apple Touch na prawdziwym urządzeniu z systemem iOS
- Należy sprawdzić manifest PWA za pomocą Lighthouse → audyt PWA
Szybkie sprawdzenie
Jaki jest zalecany rozmiar obrazów ikony Apple Touch?
Powtórzenie: favicon
Najważniejsze informacje o favicon:
- Favicon SVG — nowoczesny, skalowalny i uwzględniający tryb ciemny
- PNG 32x32 — rozwiązanie awaryjne dla przeglądarek bez obsługi SVG
- ICO w katalogu głównym — rozwiązanie awaryjne dla starszych wersji IE
apple-touch-icon180×180 — ekran główny systemu iOS- Manifest aplikacji internetowej — ikony PWA na Androida (192px i 512px)
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 40
- Lekcje
- 159
Często zadawane pytania
Czy lekcja „Favicon i ikona Apple Touch” jest bezpłatna?
Tak — pełny tekst „Favicon i ikona Apple Touch” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Favicon i ikona Apple Touch”?
Dodawanie ikon wyświetlanych na kartach przeglądarki i ekranach głównych Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML Academy?
Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Favicon i ikona Apple Touch”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?
Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- title i jego rola w SEO
- meta charset viewport author i description
- Kanoniczne adresy URL i meta robots
- Favicon i ikona Apple Touch