Przewodnik

Favikona dla Next.js

Next.js 14+ App Router traktuje /app/icon.png i /app/favicon.ico jako konwencje — wrzuć je, a Next automatycznie wyemituje odpowiednie tagi.

Umieść favicon.ico w /app, a Next wyświetli go w /favicon.ico i wstrzyknie tag linku.

W przypadku ikon o wielu rozmiarach lub tematycznych użyj konwencji plików: icon.png, icon.svg, apple-icon.png w /app. Następnie generuje tagi <link> na podstawie metadanych pliku.

Jak to działa

  1. 1

    Wygeneruj favicon.ico

    Wiele rozmiarów 16/32/48/64 ze źródła 512×512.

  2. 2

    Umieść w /app

    /app/favicon.ico jest obsługiwany automatycznie. Dodaj icon.png w jakości HD.

  3. 3

    Zweryfikować

    Otwórz /favicon.ico w swojej przeglądarce — Next obsługuje go bez żadnej konfiguracji.

Wypróbuj teraz

Wygeneruj favikonę gotową do Next.js

Generator Favicon

FAQ

Gdzie trafiają ikony w routerze aplikacji Next.js?+

Wewnątrz katalogu /app. Nazwa pliku (ikona, ikona jabłka, ikona favikonu) określa rolę.

A co z routerem Pages?+

Wrzuć favicon.ico do /public i połącz go z _document.tsx.

Czy nadal potrzebuję pliku .ico w wielu rozmiarach?+

Zalecane w przypadku obsługi starszych przeglądarek, zwłaszcza skrótów Edge i trybu IE.

Powiązane narzędzia

Więcej przewodników

Przewodniki

Przeglądaj FetchFavicon

Kategorie

Konwertery

Narzędzia

Przewodniki

Poradniki