Favicon w Joomla - jak działa i jak go poprawnie zmienić

Favicon to mała ikona widoczna na karcie przeglądarki obok tytułu strony.

W Joomla od wersji 4 (i w nowszych) favicon zwykle nie jest “jednym plikiem” — szablony ładują kilka wariantów (SVG/ICO i czasem mask-icon), żeby działało to poprawnie w różnych przeglądarkach.

Najważniejsze: podmiana samego pliku ICO często nie wystarczy, bo przeglądarka może używać wersji SVG.

1) Dlaczego favicon to nie jeden plik

  • SVG – nowoczesny favicon, skalowalny i “ostry” w każdym rozmiarze.
  • ICO – fallback (zgodność wsteczna), nadal używany przez część przeglądarek/narzędzi.
  • Mask icon (SVG) – używany w niektórych przeglądarkach jako ikona “pinned”.

2) Skąd Joomla bierze favicony (od Joomla 4+)

W typowych szablonach (np. opartych o Cassiopeia) linki do faviconów są dodawane w pliku index.php szablonu. Joomla najpierw szuka ikon w katalogu mediów aktywnego szablonu, a dopiero potem w katalogu systemowym.

Najczęstszy schemat ścieżek

1) Katalog szablonu (zalecane)

media/templates/site/NAZWA_SZABLONU/images/

2) Katalog systemowy (fallback)

media/system/images/

W praktyce: jeśli wrzucisz swoje favicony do katalogu szablonu, aktualizacje Joomla rzadziej je nadpiszą.

3) Najbezpieczniejszy sposób zmiany favicon (zalecany)

  1. Sprawdź, jakich nazw plików oczekuje szablon.
    Otwórz plik index.php szablonu i wyszukaj rel="icon", addHeadLink albo mask-icon.
  2. Przygotuj pliki zgodnie z tymi nazwami.
    Minimum to zwykle SVG + ICO (a czasem także pinned/mask SVG).
  3. Wgraj pliki do:
    media/templates/site/NAZWA_SZABLONU/images/
  4. Nie ruszaj plików w media/system/images, jeśli nie musisz. To miejsce jest częściej “dotykane” przez aktualizacje i łatwiej o nadpisanie.

Uwaga: nazwy plików muszą się zgadzać 1:1 z tym, co jest w szablonie. Jeśli szablon linkuje do pliku o innej nazwie, Joomla nie “zgadnie” właściwego.

4) Cache – najczęstszy powód “nie zmieniło się”

Przeglądarki mocno cache’ują favicony. Jeśli po podmianie nadal widzisz starą ikonę:

  • otwórz stronę w trybie prywatnym lub w innej przeglądarce,
  • zrób twarde odświeżenie (bez cache),
  • wyczyść cache przeglądarki,
  • jeśli używasz cache Joomla / cache wtyczki / CDN – wyczyść również tam.

5) Jak sprawdzić, który favicon jest używany

Najprościej w narzędziach deweloperskich przeglądarki:

  • DevTools → Network → wyszukaj “favicon” albo filtruj po .svg/.ico
  • DevTools → Elements → sprawdź sekcję head i linki rel="icon"

FAQ

  • Podmieniłem favicon.ico, ale dalej widać starą ikonę. Dlaczego?

    Najczęściej winny jest cache (przeglądarki trzymają favicon bardzo długo) albo szablon ładuje SVG, a nie ICO. Sprawdź w head, czy jest link do SVG oraz co faktycznie pobiera przeglądarka (Network).

  • Co to jest “mask icon (SVG)” i czy muszę to mieć?

    “Mask icon” to specjalna ikona (zwykle SVG), której przeglądarka używa jako maski – nie wyświetla jej w pełnych kolorach jak zwykłego obrazka, tylko traktuje jako kształt i wypełnia jednym kolorem podanym w linku (atrybut color). Najczęściej dotyczy to Safari i tzw. pinned tabs.

    Jeśli nie zależy Ci na dopracowaniu tego wariantu, możesz zostawić domyślną mask-icon i podmienić tylko SVG favicon + ICO. Jeśli chcesz pełną spójność, przygotuj również własny plik mask-icon (prosty, jednokolorowy kształt).

  • Czy muszę edytować pliki Joomla, żeby zmienić favicon?

    Zwykle nie. Najbezpieczniej jest wgrać własne ikony do media/templates/site/NAZWA_SZABLONU/images/ zgodnie z nazwami plików używanymi przez szablon.