Konfiguracja favicon w Next.js: wygeneruj favicon.ico z SVG

Do podstawowego uruchomienia wystarczy pojedynczy favicon.ico. Jeśli jednak chcesz stabilnego renderowania na kartach przeglądarki, ekranie głównym iOS, instalacjach PWA i wynikach wyszukiwania Google, powinieneś dostarczyć kompletny zestaw ikon.

W tym przewodniku przedstawiono praktyczny przebieg pracy: zdefiniuj wymagane zasoby ikon, wygeneruj je z SVG i zintegruj z Next.js.

Jakich plików ikon faktycznie potrzebujesz

Solidna konfiguracja minimalna obejmuje następujące zasoby:

favicon.ico (fallback zgodności)
icon.svg lub icon.png (nowoczesne przeglądarki)
apple-icon.png (ikona na ekranie głównym iOS)
manifest (metadane PWA)
icon-192.png (rozmiar manifestu)
icon-512.png (rozmiar manifestu)

Praktyczny przepływ pracy: od SVG do zestawu favicon

1. Zacznij od pliku SVG, który będzie czytelny nawet w małych rozmiarach

Favicony są często renderowane w 16x16 i 32x32. Zoptymalizuj odpowiednio swoje źródło:

Zachowaj pierwotny kształt, usuń drobne szczegóły.
Używaj wysokiego kontrastu.
Unikaj bardzo cienkich pociągnięć.

Szybki podgląd w SVG Viewer.

2. Wygeneruj `favicon.ico`

Użyj SVG to ICO:

Prześlij plik SVG
Wybierz popularne rozmiary (16/32/48/64)
Eksportuj pojedynczy plik .ico

To jeden z najpraktyczniejszych elementów zestawu SVGView: szybkie przygotowanie favicon z pliku SVG.

3. Wygeneruj `icon-192.png` i `icon-512.png`

Użyj SVG to PNG i eksportuj:

icon-192.png
icon-512.png

W razie potrzeby wyeksportuj także dedykowany plik apple-icon.png (zwykle 180x180).

4. Opcjonalnie: zoptymalizuj przed wysyłką

Uruchom zasoby źródłowe za pomocą SVG Optimizer lub SVG Minify, aby uzyskać czystsze i lżejsze pliki.

Integracja z routerem aplikacji Next.js

Zalecana struktura:

app/
  favicon.ico
  icon.svg
  apple-icon.png
  manifest.ts
public/
  icon-192.png
  icon-512.png

Przykład app/manifest.ts:

import type { MetadataRoute } from "next";

export default function manifest(): MetadataRoute.Manifest {
  return {
    name: "SVGView",
    short_name: "SVGView",
    description: "Online SVG tools for viewing, optimizing, and converting SVG files.",
    start_url: "/",
    display: "standalone",
    background_color: "#ffffff",
    theme_color: "#ffffff",
    icons: [
      {
        src: "/icon-192.png",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "/icon-512.png",
        sizes: "512x512",
        type: "image/png",
      },
    ],
  };
}

Sprawdzanie favikon Google, które powinieneś uruchomić przed uruchomieniem

To jest walidacja wdrożenia, a nie copywriting:

https://your-domain.com/favicon.ico zwraca 200
Ścieżki ikon nie są blokowane przez robots.txt
Favicon jest kwadratowa i co najmniej 8x8
Preferuj rozmiary będące wielokrotnościami 48
HTML strony głównej zawiera deklarację ikony (rel="icon")

Po ich zastosowaniu aktualizacje ulubionych ikon wyszukiwarki Google zwykle pojawiają się po ponownym zaindeksowaniu.

Jeśli Twoja aplikacja to TanStack Start (jak ten projekt)

Użyj tych samych zasobów i zadeklaruj linki w katalogu głównym <head>:

<head>
  <link rel="icon" href="/favicon.ico" sizes="any" />
  <link rel="apple-touch-icon" href="/apple-icon.png" />
  <link rel="manifest" href="/manifest.webmanifest" />
</head>

Często zadawane pytania

Czy sam `favicon.ico` wystarczy?

Na podstawowy start wystarczy, ale nie na pełne pokrycie platformy.

Dlaczego Google nadal wyświetla moją starą favikonę?

Zwykle opóźnienie indeksowania/pamięci podręcznej. Najpierw sprawdź dostępność adresu URL, a następnie poczekaj na ponowne zaindeksowanie.

Czy powinienem wybrać `icon.svg` czy `favicon.ico`?

Zwykle przechowujesz oba: rezerwowy .ico i nowoczesny svg/png.

Konfiguracja favicon w Next.js: wygeneruj favicon.ico z SVG