फ़ेविकॉन कैसे जोड़ें
अलग-अलग फ़्रेमवर्क और तरीकों से प्रोजेक्ट में फ़ेविकॉन जोड़ना सीखें। HTML, Next.js, Nuxt.js, React, Vue.js और SvelteKit के कोड उदाहरण सहित कदम दर कदम इंस्टॉलेशन गाइड।
शुरू करने से पहले
सबसे पहले होमपेज पर अपना फ़ेविकॉन डिज़ाइन करें और पूरा ZIP पैकेज डाउनलोड करें। ZIP में वे सभी आकार होते हैं जिनकी आपको ज़रूरत है।
डाउनलोड के बाद ZIP निकालें। अंदर सभी फ़ेविकॉन फ़ाइलें होंगी। फिर इन्हें प्रोजेक्ट की public डायरेक्टरी में रखें (SvelteKit के लिए static, शुद्ध HTML के लिए रूट डायरेक्टरी)।
फ़ाइलें जगह पर आने के बाद, इस्तेमाल किए जा रहे फ़्रेमवर्क के हिसाब से नीचे दिए निर्देश से HTML link जोड़ें।
फ़्रेमवर्क इंस्टॉलेशन गाइड
Pure HTML
सभी फ़ेविकॉन फ़ाइलें साइट की रूट डायरेक्टरी में रखें (या स्टैटिक साइट जेनरेटर हो तो public में), फिर HTML फ़ाइल के head सेक्शन में ये link जोड़ें:
<link rel="icon" type="image/x-icon" sizes="16x16 32x32 48x48" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="180x180" href="/favicon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">Next.js
सभी फ़ेविकॉन फ़ाइलें public डायरेक्टरी में रखें, फिर app/layout.tsx या pages/_document.tsx में मेटाडेटा जोड़ें:
// app/layout.tsx (App Router)
import type { Metadata } from 'next'
export const metadata: Metadata = {
icons: {
icon: [
{ url: '/favicon.ico', sizes: '16x16 32x32 48x48' },
{ url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
{ url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
{ url: '/favicon-48x48.png', sizes: '48x48', type: 'image/png' },
{ url: '/favicon-96x96.png', sizes: '96x96', type: 'image/png' },
{ url: '/favicon-180x180.png', sizes: '180x180', type: 'image/png' },
{ url: '/favicon-192x192.png', sizes: '192x192', type: 'image/png' },
{ url: '/favicon-512x512.png', sizes: '512x512', type: 'image/png' },
{ url: '/favicon.svg', type: 'image/svg+xml' },
],
apple: [
{ url: '/apple-touch-icon.png', sizes: '180x180', type: 'image/png' },
],
},
}या Pages Router में next/head कंपोनेंट इस्तेमाल करें:
// pages/_document.tsx (Pages Router)
import Head from 'next/head'
export default function Document() {
return (
<Head>
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="180x180" href="/favicon-180x180.png" />
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png" />
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
</Head>
)
}Nuxt.js
सभी फ़ेविकॉन फ़ाइलें public डायरेक्टरी में रखें, फिर nuxt.config.ts या app.vue में कॉन्फ़िगर करें:
// nuxt.config.ts
export default defineNuxtConfig({
app: {
head: {
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
{ rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' },
{ rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
{ rel: 'icon', type: 'image/png', sizes: '48x48', href: '/favicon-48x48.png' },
{ rel: 'icon', type: 'image/png', sizes: '96x96', href: '/favicon-96x96.png' },
{ rel: 'icon', type: 'image/png', sizes: '180x180', href: '/favicon-180x180.png' },
{ rel: 'icon', type: 'image/png', sizes: '192x192', href: '/favicon-192x192.png' },
{ rel: 'icon', type: 'image/png', sizes: '512x512', href: '/favicon-512x512.png' },
{ rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
],
},
},
})या app.vue में useHead इस्तेमाल करें:
// app.vue
<script setup>
useHead({
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
{ rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' },
{ rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
{ rel: 'icon', type: 'image/png', sizes: '48x48', href: '/favicon-48x48.png' },
{ rel: 'icon', type: 'image/png', sizes: '96x96', href: '/favicon-96x96.png' },
{ rel: 'icon', type: 'image/png', sizes: '180x180', href: '/favicon-180x180.png' },
{ rel: 'icon', type: 'image/png', sizes: '192x192', href: '/favicon-192x192.png' },
{ rel: 'icon', type: 'image/png', sizes: '512x512', href: '/favicon-512x512.png' },
{ rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
],
})
</script>React (Create React App / Vite)
सभी फ़ेविकॉन फ़ाइलें public डायरेक्टरी में रखें, फिर public/index.html अपडेट करें:
<!-- public/index.html -->
<head>
<link rel="icon" type="image/x-icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="48x48" href="%PUBLIC_URL%/favicon-48x48.png" />
<link rel="icon" type="image/png" sizes="96x96" href="%PUBLIC_URL%/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="180x180" href="%PUBLIC_URL%/favicon-180x180.png" />
<link rel="icon" type="image/png" sizes="192x192" href="%PUBLIC_URL%/favicon-192x192.png" />
<link rel="icon" type="image/png" sizes="512x512" href="%PUBLIC_URL%/favicon-512x512.png" />
<link rel="icon" type="image/svg+xml" href="%PUBLIC_URL%/favicon.svg" />
</head>Vue.js (Vite)
सभी फ़ेविकॉन फ़ाइलें public डायरेक्टरी में रखें, फिर index.html अपडेट करें:
<!-- index.html -->
<head>
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="180x180" href="/favicon-180x180.png" />
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png" />
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
</head>SvelteKit
सभी फ़ेविकॉन फ़ाइलें static डायरेक्टरी में रखें, फिर src/app.html अपडेट करें:
<!-- src/app.html -->
<head>
<link rel="icon" type="image/x-icon" href="%sveltekit.assets%/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="16x16" href="%sveltekit.assets%/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="48x48" href="%sveltekit.assets%/favicon-48x48.png" />
<link rel="icon" type="image/png" sizes="96x96" href="%sveltekit.assets%/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="180x180" href="%sveltekit.assets%/favicon-180x180.png" />
<link rel="icon" type="image/png" sizes="192x192" href="%sveltekit.assets%/favicon-192x192.png" />
<link rel="icon" type="image/png" sizes="512x512" href="%sveltekit.assets%/favicon-512x512.png" />
<link rel="icon" type="image/svg+xml" href="%sveltekit.assets%/favicon.svg" />
</head>