Next.js के लिए सबसे अच्छा Favicon Generator
Next.js आपके हाथ से लिखे link tags इस्तेमाल नहीं करता। App Router app directory से icon, apple-icon, और favicon नाम की files पढ़ता है और markup को build समय पर inject करता है। सही generator आपको ठीक वही files देता है।
Next.js पर असल में क्या मायने रखता है
App Router icons को files से resolve करता है, tags से नहीं। app directory में icon, apple-icon, या favicon नाम की file अपने आप size होकर link हो जाती है। इसलिए generator के लिए निर्णायक सवाल यह है कि उसका output उस convention के अनुसार files को नाम देकर रखता है, या आपको ढीली PNGs और link tags का एक सेट थमाता है जो framework को चाहिए ही नहीं।
Pages Router अलग है: वहाँ आप files public में रखते हैं और tags को एक custom Head में declare करते हैं। जो generator जानता हो कि आप इन दोनों में से किस पर हैं, वह आपको वह एक गलती बचा देता है जिससे Next.js का favicon चुपचाप कुछ भी emit नहीं करता।
Next.js पर जो criteria मायने रखते हैं
| किस चीज़ को देखें | Next.js पर यह क्यों मायने रखता है | यहाँ का generator इसे कैसे करता है |
|---|---|---|
| App Router filenames | Icons app/icon, app/apple-icon, app/favicon.ico से resolve होते हैं | उस convention के अनुसार files को नाम देकर रखता है |
| हाथ से लिखे tags नहीं | framework आपके लिए link tags inject कर देता है | वे फ़ालतू tags छोड़ देता है जो कोई सामान्य tool जोड़ देता |
| Manifest और Android | PWA installs को पूरी size range चाहिए | manifest.json के साथ 192 और 512 Android icons export करता है |
| Router-जागरूक | App और Pages icons को अलग-अलग resolve करते हैं | Install guidance दोनों routers को कवर करती है, सिर्फ़ एक को नहीं |
Files कहाँ जाती हैं (App Router)
- app/
- favicon.icoaddServed at /favicon.ico, tag auto-injected
- icon.pngaddSized and linked at build
- apple-icon.pngadd180x180 home screen icon
- public/
- manifest.jsonaddPWA install metadata
- android-icon-192x192.pngadd
- android-icon-512x512.pngadd
जिन files पर add का निशान है, वे ही generator export करता है। बाकी सब एक stock Next.js project है।
Generator बनाम अकेले Next.js file conventions
एक Next.js-जागरूक generator
Start hereअनुशंसित
- Export app-directory convention से मेल खाता है
- favicon.ico, हर PNG size, और apple-icon बनाता है
- PWA installs के लिए manifest.json और Android sizes शामिल हैं
- एक source image, हर size सही render हुआ
खुद एक ही file डालना
- अकेला app/favicon.ico tab कवर करता है और कुछ नहीं
- कोई apple-touch icon नहीं, इसलिए iOS home screens fallback पर चली जाती हैं
- कोई manifest नहीं, इसलिए Android installs अधूरे दिखते हैं
- एक image हाथ से resize करना 16px पर शायद ही पढ़ने योग्य होता है
क्या Next.js में favicon के लिए link tags चाहिए?
App Router में नहीं। app directory में favicon.ico, icon, और apple-icon नाम की files build समय पर अपने आप पढ़ी, size की, और link हो जाती हैं। जो generator हाथ से लिखे link tags भी emit करता है, वह वही markup जोड़ रहा है जो framework पहले से बना देता है। Pages Router अपवाद है, जहाँ आप tags को एक custom Head में declare करते हैं।
Next.js के लिए generator को कौन-कौन से sizes export करने चाहिए?
tab के लिए favicon.ico, iOS home screens के लिए एक 180x180 apple-icon, और Android व PWA installs के लिए manifest.json से रेफ़र होने वाली 192 और 512 PNGs। mark को पहले 16px पर design करें, क्योंकि वही size तय करता है कि यह पढ़ने योग्य है या नहीं।
The step-by-step for Next.js
You've picked the tool. Here's the exact install for Next.js.