WordPress

WordPress nazywa favicon Site Icon i z jednego przesłanego obrazu tworzy wszystkie rozmiary (32, 180, 192 i 270 px). Potrzebuje kwadratowego obrazu o wymiarach co najmniej 512 × 512 px.

• Motywy klasyczne: Appearance → Customize → Site Identity → Site Icon, prześlij obraz i kliknij Publish.
• Motywy blokowe: otwórz Appearance → Editor, zaznacz blok Site Logo i w jego ustawieniach włącz Use as Site Icon. Nowsze wersje WordPressa pokazują Site Icon także w Settings → General.

Jeśli ikona jest ustawiona, a lista kontrolna nadal jej nie znajduje, motyw nie wywołuje wp_head() w nagłówku, co psuje też większość wtyczek: przejdź na utrzymywany motyw albo zwróć się do jego autora. Następnie wyczyść pamięć podręczną stron.

Node.js i Next.js

Next.js, App Router. Umieść pliki w katalogu app, a Next.js sam doda znaczniki:

favicon.ico działa tylko bezpośrednio w app/, nie w podkatalogu.

Next.js, Pages Router, i inne aplikacje Node.js. Umieść pliki w public/ (lub w swoim katalogu statycznym) i dodaj znaczniki do nagłówka strony: w Next.js w pages/_document.js, w Express, Nuxt, Astro lub SvelteKit w głównym szablonie. Znaczniki są takie same jak w zakładce Statyczny HTML.

Laravel

Nowe projekty Laravel mają public/favicon.ico, a w wielu wersjach ten plik jest pusty (0 bajtów). Odpowiada 200, więc sprawdzenie przechodzi, ale przeglądarki nic nie pokazują. Zastąp go prawdziwą ikoną i dodaj pozostałe pliki do public/.

Następnie podlinkuj je w głównym layoucie (na przykład resources/views/layouts/app.blade.php), wewnątrz <head>:

<link rel="icon" href="{{ asset('favicon.ico') }}" sizes="32x32">
<link rel="icon" href="{{ asset('icon.svg') }}" type="image/svg+xml">
<link rel="apple-touch-icon" href="{{ asset('apple-touch-icon.png') }}">

Statyczny HTML

Umieść pliki w katalogu głównym witryny i dodaj te linie wewnątrz <head> na każdej stronie (lub w szablonie bazowym generatora stron):

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Manifest jest opcjonalny i potrzebny tylko dla ekranu głównego Androida. Minimalny, zapisany jako site.webmanifest:

{
    "name": "Example",
    "icons": [
        { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
        { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
    ]
}

Do zrobienia favicon.ico nada się każdy edytor grafiki z eksportem do ICO, a także wiele darmowych generatorów faviconów online, które tworzą cały zestaw.

Shopify

Online Store → Themes → Customize, potem otwórz Theme settings (ikona koła zębatego). Zależnie od motywu favicon jest w sekcji Logo albo we własnej sekcji Favicon. Prześlij kwadratowy obraz (Shopify zmniejszy go do 32 × 32) i kliknij Save.

Wix

Otwórz panel witryny i przejdź do Settings → Favicon. Prześlij kwadratowy obraz i zapisz. Wix pokazuje własny favicon tylko z planem Premium i podłączoną domeną; bez tego pokazuje ikonę Wix.

Webflow

Site settings → General → Favicon: prześlij PNG lub ICO o wymiarach 32 × 32. W tej samej sekcji Webclip to ikona ekranu głównego (256 × 256). Następnie opublikuj witrynę ponownie.

Squarespace

Squarespace nazywa favicon browser icon. Wyszukaj w ustawieniach witryny "Browser icon" (jego miejsce w menu zmieniało się między wersjami), prześlij kwadratowy PNG (co najmniej 300 × 300 px) i zapisz.