Panduan

Favicon untuk Next.js

Penghala Apl Next.js 14+ menganggap /app/icon.png dan /app/favicon.ico sebagai konvensyen — lepaskannya dan Seterusnya mengeluarkan teg yang betul secara automatik.

Letakkan favicon.ico di dalam /app dan Seterusnya akan menyampaikannya di /favicon.ico dan menyuntik teg pautan.

Untuk ikon berbilang saiz atau bertema, gunakan konvensyen fail: icon.png, icon.svg, apple-icon.png di dalam /app. Seterusnya menjana teg <link> daripada metadata fail.

Cara ia berfungsi

  1. 1

    Jana favicon.ico

    Berbilang saiz 16/32/48/64 daripada sumber 512×512.

  2. 2

    Letakkan dalam /app

    /app/favicon.ico disiarkan secara automatik. Tambahkan icon.png untuk HD.

  3. 3

    Sahkan

    Buka /favicon.ico dalam penyemak imbas anda — Seterusnya menyajikannya tanpa sebarang konfigurasi.

Cuba sekarang

Hasilkan favicon sedia Next.js

Penjana Favicon

Soalan lazim

Di manakah ikon pergi dalam Penghala Apl Next.js?+

Di dalam direktori /app. Nama fail (ikon, ikon epal, favicon) menentukan peranan.

Bagaimana pula dengan Penghala Halaman?+

Lepaskan favicon.ico ke /public dan pautkannya daripada _document.tsx.

Adakah saya masih memerlukan .ico berbilang saiz?+

Disyorkan untuk sokongan penyemak imbas lama, terutamanya pintasan Edge dan mod IE.

Alat berkaitan

Lagi panduan

Panduan

Teroka FetchFavicon

Kategori

Penukar

Utiliti

Pemandu

Tutorial