2026 ਵਿੱਚ ਤੁਹਾਨੂੰ ਕਿਹੜੇ ਫੈਵੀਕਨ ਸਾਈਜ਼ ਚਾਹੀਦੇ ਹਨ? ਆਦਰਸ਼ ਸੈੱਟ

2026 ਵਿੱਚ ਆਦਰਸ਼ ਫੈਵੀਕਨ ਸੈੱਟ ਇਹ ਹੈ: 16, 32 ਅਤੇ 48 px ਦੀਆਂ ਤਸਵੀਰਾਂ ਵਾਲੀ ਇੱਕ favicon.ico, ਇੱਕ 96x96 PNG (Google Search ਲਈ), ਇੱਕ ਵਿਕਲਪਿਕ SVG ਫੈਵੀਕਨ, ਇੱਕ 180x180 apple-touch-icon.png, ਅਤੇ ਵੈੱਬ ਐਪ ਮੈਨੀਫੈਸਟ ਵਿੱਚ ਦਰਜ 192x192 ਅਤੇ 512x512 PNG (ਨਾਲ ਇੱਕ ਮਾਸਕੇਬਲ 512)। Windows ਟਾਈਲਾਂ ਅਤੇ ਪੁਰਾਣੇ Apple ਸਾਈਜ਼ ਸਿਰਫ਼ ਉਦੋਂ ਚਾਹੀਦੇ ਹਨ ਜਦੋਂ ਤੁਹਾਨੂੰ ਬਹੁਤ ਪੁਰਾਣੇ ਡਿਵਾਈਸਾਂ ਨੂੰ ਸਪੋਰਟ ਕਰਨਾ ਪਵੇ। ਹੇਠਾਂ ਸਭ ਕੁਝ ਕਾਰਨਾਂ ਸਮੇਤ ਸਮਝਾਇਆ ਗਿਆ ਹੈ, ਸਾਈਜ਼ ਟੇਬਲ, ਵਰਤਣ ਲਈ ਤਿਆਰ HTML ਅਤੇ ਬਚਣ ਵਾਲੀਆਂ ਆਮ ਗ਼ਲਤੀਆਂ ਦੇ ਨਾਲ।

ਫੈਵੀਕਨ ਦਾ ਮਾਮਲਾ ਪਹਿਲਾਂ ਬਹੁਤ ਉਲਝਿਆ ਹੋਇਆ ਸੀ: ਹਰ ਬ੍ਰਾਊਜ਼ਰ ਅਤੇ ਓਪਰੇਟਿੰਗ ਸਿਸਟਮ ਆਪਣਾ ਵੱਖਰਾ ਸਾਈਜ਼ ਮੰਗਦਾ ਸੀ, ਜਿਸ ਕਾਰਨ 20-20 ਲਾਈਨਾਂ ਵਾਲੇ ਬਦਨਾਮ <head> ਬਲਾਕ ਬਣ ਜਾਂਦੇ ਸਨ। ਅੱਜ ਇਸ ਵਿੱਚੋਂ ਜ਼ਿਆਦਾਤਰ ਪੁਰਾਣਾ ਹੋ ਚੁੱਕਾ ਹੈ। ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰ ਇੱਕ ਚੰਗੇ ਆਈਕਨ ਨੂੰ ਹੀ ਸਕੇਲ ਕਰ ਲੈਂਦੇ ਹਨ, iOS ਇੱਕ ਹੀ ਸਾਈਜ਼ ਮੰਗਦਾ ਹੈ, ਅਤੇ Android ਮੈਨੀਫੈਸਟ ਪੜ੍ਹਦਾ ਹੈ। ਇਹ ਲੇਖ ਦੱਸਦਾ ਹੈ ਕਿ ਅਸਲ ਵਿੱਚ ਕੀ ਜ਼ਰੂਰੀ ਹੈ ਅਤੇ ਕੀ ਸਿਰਫ਼ ਹੋਵੇ ਤਾਂ ਚੰਗਾ ਹੈ।

ਛੋਟਾ ਜਵਾਬ: ਫੈਵੀਕਨ ਫਾਈਲਾਂ ਦਾ ਆਦਰਸ਼ ਸੈੱਟ

• ਸਾਈਟ ਦੇ ਰੂਟ ਵਿੱਚ favicon.ico (ਇੱਕ ਫਾਈਲ ਵਿੱਚ 16, 32, 48 px)। ਬ੍ਰਾਊਜ਼ਰ, ਫੀਡ ਰੀਡਰ ਅਤੇ ਕਈ ਟੂਲ ਅੱਜ ਵੀ ਆਪਣੇ ਆਪ /favicon.ico ਮੰਗਦੇ ਹਨ।
• ਕਿਸੇ ਵੀ ਸਾਈਜ਼ ਉੱਤੇ ਸਾਫ਼ ਦਿੱਖ ਅਤੇ ਡਾਰਕ ਮੋਡ ਸਪੋਰਟ ਲਈ favicon.svg (ਵਿਕਲਪਿਕ ਪਰ ਸਿਫ਼ਾਰਸ਼ੀ)।
• ਸਪਸ਼ਟ ਫਾਲਬੈਕ ਵਜੋਂ PNG 16x16, 32x32 ਅਤੇ 96x96। 96 px ਵਾਲਾ ਸੰਸਕਰਣ Google Search ਲਈ ਲਾਭਦਾਇਕ ਹੈ, ਜਿਸ ਨੂੰ 48 px ਦਾ ਗੁਣਜ ਚਾਹੀਦਾ ਹੈ।
• 180x180 ਦਾ apple-touch-icon.png, ਠੋਸ ਬੈਕਗ੍ਰਾਊਂਡ ਵਾਲਾ, ਬਿਨਾਂ ਪਾਰਦਰਸ਼ਤਾ ਦੇ।
• manifest.json ਵਿੱਚ 192x192 ਅਤੇ 512x512 PNG, ਨਾਲ Android ਲਈ ਇੱਕ ਮਾਸਕੇਬਲ 512x512 ਆਈਕਨ।
• ਮੋਬਾਈਲ ਉੱਤੇ ਬ੍ਰਾਊਜ਼ਰ UI ਨੂੰ ਰੰਗ ਦੇਣ ਲਈ theme-color ਮੈਟਾ ਟੈਗ।
• browserconfig.xml ਨਾਲ Windows ਟਾਈਲਾਂ (70, 150, 310 px) ਸਿਰਫ਼ ਪੁਰਾਣੇ Windows ਅਤੇ IE11 ਦੀਆਂ ਪਿੰਨ ਕੀਤੀਆਂ ਸਾਈਟਾਂ ਲਈ।

ਫੈਵੀਕਨ ਸਾਈਜ਼ ਟੇਬਲ: ਮਕਸਦ, ਫਾਈਲ ਨਾਂ ਅਤੇ ਤਰਜੀਹ

ਇਸ ਟੇਬਲ ਨੂੰ ਚੈੱਕਲਿਸਟ ਵਜੋਂ ਵਰਤੋ। "ਲਾਜ਼ਮੀ" ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਇਸ ਤੋਂ ਬਿਨਾਂ ਆਮ ਸਾਈਟ ਟੁੱਟੀ ਜਾਂ ਅਧੂਰੀ ਲੱਗੇਗੀ; "ਸਿਫ਼ਾਰਸ਼ੀ" ਦਾ ਮਤਲਬ ਹੈ ਗੁਣਵੱਤਾ ਵਿੱਚ ਸਾਫ਼ ਸੁਧਾਰ; "ਵਿਕਲਪਿਕ" ਦਾ ਮਤਲਬ ਹੈ ਖ਼ਾਸ ਜਾਂ ਪੁਰਾਣੀ ਵਰਤੋਂ।

favicon.ico: ਇੱਕ ਫਾਈਲ ਵਿੱਚ 16, 32 ਅਤੇ 48 px

ICO ਫਾਈਲ ਇੱਕ ਕੰਟੇਨਰ ਹੈ ਜਿਸ ਵਿੱਚ ਕਈ ਬਿੱਟਮੈਪ ਹੁੰਦੇ ਹਨ। ਇੱਕ ਚੰਗੀ favicon.ico ਵਿੱਚ 16x16, 32x32 ਅਤੇ 48x48 ਤਸਵੀਰਾਂ ਹੁੰਦੀਆਂ ਹਨ, ਤਾਂ ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਜਾਂ OS ਸਭ ਤੋਂ ਨੇੜਲਾ ਸਾਈਜ਼ ਚੁਣ ਸਕੇ। ਇਸਨੂੰ ਆਪਣੇ ਡੋਮੇਨ ਦੇ ਰੂਟ ਵਿੱਚ ਰੱਖੋ (https://example.com/favicon.ico)। ਭਾਵੇਂ ਤੁਹਾਡਾ HTML ਕਿਤੇ ਹੋਰ ਇਸ਼ਾਰਾ ਕਰਦਾ ਹੋਵੇ, ਕਈ ਕ੍ਰਾਲਰ, RSS ਰੀਡਰ ਅਤੇ ਪੁਰਾਣੇ ਬ੍ਰਾਊਜ਼ਰ ਅੱਜ ਵੀ ਇਹੀ URL ਮੰਗਦੇ ਹਨ, ਇਸ ਲਈ ਇਸਦੇ ਹੋਣ ਨਾਲ ਤੁਹਾਡੇ ਲੌਗਾਂ ਵਿੱਚ 404 ਦਾ ਸ਼ੋਰ ਨਹੀਂ ਪੈਂਦਾ।

ਕਿਸੇ PNG ਦਾ ਨਾਂ ਬਦਲ ਕੇ ਸਿਰਫ਼ .ico ਨਾ ਕਰੋ। ਜ਼ਿਆਦਾਤਰ ਬ੍ਰਾਊਜ਼ਰ ਇਸਨੂੰ ਬਰਦਾਸ਼ਤ ਕਰ ਲੈਂਦੇ ਹਨ, ਪਰ ਕੁਝ ਟੂਲ ਇਸਨੂੰ ਰੱਦ ਕਰ ਦਿੰਦੇ ਹਨ ਅਤੇ ਤੁਸੀਂ ਬਹੁ-ਰੈਜ਼ੋਲੂਸ਼ਨ ਦਾ ਫਾਇਦਾ ਗੁਆ ਦਿੰਦੇ ਹੋ। ਅਸਲੀ ICO ਐਕਸਪੋਰਟ ਕਰੋ।

PNG ਫੈਵੀਕਨ: 16, 32 ਅਤੇ 96 px

ਸਪਸ਼ਟ sizes ਵਾਲੇ PNG ਲਿੰਕ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ICO ਪੜ੍ਹੇ ਬਿਨਾਂ ਸਭ ਤੋਂ ਵਧੀਆ ਬਿੱਟਮੈਪ ਚੁਣਨ ਦਿੰਦੇ ਹਨ। ਅਮਲ ਵਿੱਚ 32x32 ਹਾਈ-DPI ਟੈਬਾਂ ਨੂੰ ਕਵਰ ਕਰਦਾ ਹੈ, ਅਤੇ 16x16 ਅੱਜ ਲਗਭਗ ਫ਼ਾਲਤੂ ਹੈ। 96x96 ਸਾਈਜ਼ ਜੋੜਨਾ ਫਾਇਦੇਮੰਦ ਹੈ ਕਿਉਂਕਿ Google Search ਨਤੀਜਿਆਂ ਦੇ ਨਾਲ ਫੈਵੀਕਨ ਦਿਖਾਉਂਦਾ ਹੈ ਅਤੇ ਇੱਕ ਅਜਿਹਾ ਵਰਗਾਕਾਰ ਆਈਕਨ ਮੰਗਦਾ ਹੈ ਜਿਸਦਾ ਸਾਈਜ਼ 48 px ਦਾ ਗੁਣਜ ਹੋਵੇ (48x48, 96x96, 144x144 ਅਤੇ ਹੋਰ)। ਮੋਬਾਈਲ ਨਤੀਜਿਆਂ ਲਈ ਛੋਟਾ ਕਰਨ ਵੇਲੇ 96 px ਦੀ ਫਾਈਲ Google ਨੂੰ 48 px ਵਾਲੀ ਨਾਲੋਂ ਵਧੇਰੇ ਤਿੱਖਾ ਸਰੋਤ ਦਿੰਦੀ ਹੈ।

ਡਿਜ਼ਾਈਨ ਸੁਝਾਅ: 16 px ਉੱਤੇ ਬਾਰੀਕ ਵੇਰਵੇ ਗਾਇਬ ਹੋ ਜਾਂਦੇ ਹਨ। ਮੋਟਾ, ਸਧਾਰਨ ਆਕਾਰ, ਉੱਚ ਕੰਟ੍ਰਾਸਟ ਅਤੇ ਬਹੁਤ ਘੱਟ ਜਾਂ ਬਿਨਾਂ ਟੈਕਸਟ ਵਰਤੋ। ਐਕਸਪੋਰਟ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਤੁਸੀਂ MakeFav ਐਡੀਟਰ ਵਿੱਚ ਆਪਣੇ ਆਈਕਨ ਨੂੰ ਸੋਧ ਅਤੇ ਪ੍ਰੀਵਿਊ ਕਰ ਸਕਦੇ ਹੋ।

SVG ਫੈਵੀਕਨ ਅਤੇ ਡਾਰਕ ਮੋਡ

SVG ਫੈਵੀਕਨ ਇੱਕ ਛੋਟੀ ਜਿਹੀ ਫਾਈਲ ਹੈ ਜੋ ਹਰ ਸਕ੍ਰੀਨ ਘਣਤਾ ਉੱਤੇ ਤਿੱਖੀ ਰਹਿੰਦੀ ਹੈ। Chromium-ਅਧਾਰਿਤ ਬ੍ਰਾਊਜ਼ਰ ਅਤੇ Firefox ਇਸਨੂੰ ਸਪੋਰਟ ਕਰਦੇ ਹਨ। Safari ਦਾ ਸਪੋਰਟ ਇਤਿਹਾਸਕ ਤੌਰ ਤੇ ਸੀਮਤ ਰਿਹਾ ਹੈ, ਇਸ ਲਈ ਕਦੇ ਵੀ ਸਿਰਫ਼ SVG ਉੱਤੇ ਨਿਰਭਰ ਨਾ ਕਰੋ: ICO ਅਤੇ PNG ਫਾਲਬੈਕ ਰੱਖੋ।

ਸਭ ਤੋਂ ਵੱਡਾ ਫਾਇਦਾ ਥੀਮਿੰਗ ਹੈ। ਕਿਉਂਕਿ SVG ਵਿੱਚ CSS ਹੋ ਸਕਦੀ ਹੈ, ਤੁਸੀਂ prefers-color-scheme ਨਾਲ ਆਈਕਨ ਨੂੰ ਵਰਤੋਂਕਾਰ ਦੀ ਰੰਗ ਯੋਜਨਾ ਅਨੁਸਾਰ ਢਾਲ ਸਕਦੇ ਹੋ:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #0f172a; }
    .fg { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #ffffff; }
      .fg { fill: #0f172a; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6"/>
  <circle class="fg" cx="16" cy="16" r="8"/>
</svg>

ਧਿਆਨ ਦਿਓ ਕਿ ਮੀਡੀਆ ਕੁਏਰੀ ਬ੍ਰਾਊਜ਼ਰ ਜਾਂ OS ਦੀ ਥੀਮ ਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ, ਜੋ ਟੈਬ ਬਾਰ ਵਰਤਦਾ ਹੈ। ਇਹ ਤੁਹਾਡੀ ਆਪਣੀ ਵੈੱਬਸਾਈਟ ਦੇ ਥੀਮ ਟੌਗਲ ਦੀ ਪਾਲਣਾ ਨਹੀਂ ਕਰਦੀ।

ਇੱਕ ਜਾਣੀ-ਪਛਾਣੀ ਅਜੀਬ ਗੱਲ: ਜਦੋਂ ICO ਅਤੇ SVG ਦੋਵੇਂ ਲਿਸਟ ਕੀਤੇ ਹੋਣ, ਤਾਂ Chrome ICO ਚੁਣ ਸਕਦਾ ਹੈ। ICO ਨੂੰ sizes="32x32" ਨਾਲ ਦਰਜ ਕਰਨ ਅਤੇ SVG ਨੂੰ ਉਸਤੋਂ ਬਾਅਦ ਲਿਖਣ ਨਾਲ Chrome SVG ਨੂੰ ਤਰਜੀਹ ਦਿੰਦਾ ਹੈ, ਜਿਵੇਂ ਹੇਠਾਂ ਕੋਡ ਵਿੱਚ ਦਿਖਾਇਆ ਗਿਆ ਹੈ।

Apple touch icon: 180x180 ਅਤੇ ਪੁਰਾਣੇ ਸਾਈਜ਼

ਜਦੋਂ ਕੋਈ ਵਰਤੋਂਕਾਰ ਤੁਹਾਡੀ ਸਾਈਟ ਨੂੰ iOS ਜਾਂ iPadOS ਦੀ ਹੋਮ ਸਕ੍ਰੀਨ ਉੱਤੇ ਜੋੜਦਾ ਹੈ, ਤਾਂ Safari apple-touch-icon ਵਰਤਦਾ ਹੈ। ਅੱਜ ਇੱਕ ਹੀ 180x180 px PNG ਕਾਫ਼ੀ ਹੈ: iOS ਇਸਨੂੰ ਪੁਰਾਣੇ ਡਿਵਾਈਸਾਂ ਅਤੇ iPad ਲਈ ਛੋਟਾ ਕਰ ਲੈਂਦਾ ਹੈ। ਇਸਦਾ ਨਾਂ apple-touch-icon.png ਰੱਖੋ ਅਤੇ ਰੂਟ ਵਿੱਚ ਪਾਓ; ਜੇ ਕੋਈ link ਟੈਗ ਨਾ ਹੋਵੇ ਤਾਂ ਵੀ iOS ਮੂਲ ਰੂਪ ਵਿੱਚ ਇਹੀ ਫਾਈਲ ਲੱਭਦਾ ਹੈ।

Apple ਆਈਕਨ ਦੇ ਨਿਯਮ:

• ਕੋਈ ਪਾਰਦਰਸ਼ਤਾ ਨਹੀਂ। iOS ਪਾਰਦਰਸ਼ੀ ਪਿਕਸਲਾਂ ਨੂੰ ਕਾਲੇ ਰੰਗ ਨਾਲ ਭਰ ਦਿੰਦਾ ਹੈ, ਇਸ ਲਈ ਪਾਰਦਰਸ਼ੀ ਲੋਗੋ ਅਕਸਰ ਕਾਲੇ ਧੱਬੇ ਵਿੱਚ ਬਦਲ ਜਾਂਦਾ ਹੈ। ਠੋਸ ਬੈਕਗ੍ਰਾਊਂਡ ਰੰਗ ਜੋੜੋ।
• ਗੋਲ ਕੋਨੇ ਨਹੀਂ। iOS ਆਪਣਾ ਗੋਲ ਮਾਸਕ ਆਪ ਲਗਾਉਂਦਾ ਹੈ। ਪੂਰਾ ਵਰਗ ਦਿਓ।
• ਮੁੱਖ ਸਮੱਗਰੀ ਨੂੰ ਬਿਲਕੁਲ ਕਿਨਾਰਿਆਂ ਤੋਂ ਦੂਰ ਰੱਖੋ, ਕਿਉਂਕਿ ਕੋਨੇ ਕੱਟੇ ਜਾਂਦੇ ਹਨ।

ਪੁਰਾਣੇ ਸਾਈਜ਼ (57, 72, 76, 114, 120, 144, 152, 167) ਦੀ ਲੋੜ ਕਦੋਂ ਹੁੰਦੀ ਹੈ? ਸਿਰਫ਼ ਉਦੋਂ ਜਦੋਂ ਤੁਸੀਂ iOS 6 ਜਾਂ ਉਸ ਤੋਂ ਪੁਰਾਣੇ ਨੂੰ ਸਪੋਰਟ ਕਰਦੇ ਹੋ, ਜਾਂ iPad Pro (167 px) ਅਤੇ iPad (152 px) ਲਈ ਹਰ ਡਿਵਾਈਸ ਦੇ ਹਿਸਾਬ ਨਾਲ ਸਹੀ ਪਿਕਸਲ ਕੰਟਰੋਲ ਚਾਹੁੰਦੇ ਹੋ। 2026 ਵਿੱਚ ਲਗਭਗ ਹਰ ਸਾਈਟ ਲਈ ਇਕੱਲੀ 180x180 ਫਾਈਲ ਠੀਕ ਹੈ। ਹੇਠਾਂ ਦਿੱਤੇ ਵੱਧ ਤੋਂ ਵੱਧ ਅਨੁਕੂਲਤਾ ਵਾਲੇ ਸੈੱਟਅੱਪ ਵਿੱਚ ਪੂਰਨਤਾ ਲਈ ਕੁਝ ਸ਼ਾਮਲ ਹਨ।

Android ਅਤੇ PWA ਆਈਕਨ: 192, 512 ਅਤੇ ਮਾਸਕੇਬਲ

Android ਉੱਤੇ Chrome ਅਤੇ PWA-ਸਮਰੱਥ ਹੋਰ ਬ੍ਰਾਊਜ਼ਰ ਆਈਕਨ <link rel="icon"> ਤੋਂ ਨਹੀਂ, ਸਗੋਂ ਵੈੱਬ ਐਪ ਮੈਨੀਫੈਸਟ ਤੋਂ ਪੜ੍ਹਦੇ ਹਨ। ਇੰਸਟਾਲ ਹੋਣ ਯੋਗ ਬਣਨ ਲਈ ਤੁਹਾਨੂੰ ਘੱਟੋ-ਘੱਟ ਇੱਕ 192x192 ਅਤੇ ਇੱਕ 512x512 PNG ਚਾਹੀਦੀ ਹੈ। 192 px ਦਾ ਆਈਕਨ ਹੋਮ ਸਕ੍ਰੀਨ ਅਤੇ ਐਪ ਲਾਂਚਰ ਉੱਤੇ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ; 512 px ਦਾ ਆਈਕਨ ਸਪਲੈਸ਼ ਸਕ੍ਰੀਨਾਂ ਅਤੇ ਇੰਸਟਾਲ ਡਾਇਲਾਗਾਂ ਵਿੱਚ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ।

ਮਾਸਕੇਬਲ ਆਈਕਨ ਅਤੇ ਸੇਫ਼ ਜ਼ੋਨ

Android ਅਡੈਪਟਿਵ ਆਈਕਨਾਂ ਨੂੰ ਡਿਵਾਈਸ ਦੇ ਅਨੁਸਾਰ ਗੋਲ, ਸਕੁਇਰਕਲ ਜਾਂ ਹੋਰ ਆਕਾਰ ਵਿੱਚ ਕੱਟਿਆ ਜਾ ਸਕਦਾ ਹੈ। ਮਾਸਕੇਬਲ ਆਈਕਨ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਡਿਜ਼ਾਈਨ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਕਿ ਉਹ ਸੁਰੱਖਿਅਤ ਢੰਗ ਨਾਲ ਕੱਟਿਆ ਜਾ ਸਕੇ: ਜ਼ਰੂਰੀ ਸਮੱਗਰੀ ਸੇਫ਼ ਜ਼ੋਨ, ਯਾਨੀ ਤਸਵੀਰ ਦੇ 80% ਵਿਆਸ ਵਾਲੇ ਕੇਂਦਰੀ ਚੱਕਰ ਦੇ ਅੰਦਰ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ (ਅਰਧ-ਵਿਆਸ ਭੁਜਾ ਦੇ 40% ਦੇ ਬਰਾਬਰ)। 512x512 ਫਾਈਲ ਲਈ ਇਸਦਾ ਮਤਲਬ ਹੈ ਆਪਣੇ ਲੋਗੋ ਨੂੰ ਲਗਭਗ 410 px ਵਿਆਸ ਦੇ ਚੱਕਰ ਵਿੱਚ ਰੱਖਣਾ, ਅਤੇ ਬੈਕਗ੍ਰਾਊਂਡ ਰੰਗ ਨੂੰ ਚਾਰੇ ਕਿਨਾਰਿਆਂ ਤੱਕ ਫੈਲਾਉਣਾ ਤਾਂ ਜੋ ਮਾਸਕ ਲੱਗਣ ਤੋਂ ਬਾਅਦ ਕੋਈ ਖਾਲੀ ਥਾਂ ਨਾ ਦਿਖੇ।

ਮਾਸਕੇਬਲ ਆਈਕਨ ਨੂੰ "purpose": "maskable" ਨਾਲ ਆਪਣੀ ਵੱਖਰੀ ਐਂਟਰੀ ਵਜੋਂ ਦਰਜ ਕਰੋ। ਇੱਕ ਫਾਈਲ ਉੱਤੇ "any maskable" ਤੋਂ ਬਚੋ: ਮਾਸਕਿੰਗ ਲਈ ਲੋੜੀਂਦੀ ਪੈਡਿੰਗ ਬਿਨਾਂ ਮਾਸਕ ਦੇ ਦਿਖਾਏ ਜਾਣ ਤੇ ਬਹੁਤ ਛੋਟੀ ਲੱਗਦੀ ਹੈ।

manifest.json ਦੀ ਉਦਾਹਰਣ

{
  "name": "Example App",
  "short_name": "Example",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

ਫਾਈਲ ਨੂੰ application/manifest+json (ਜਾਂ application/json) ਵਜੋਂ ਸਰਵ ਕਰੋ ਅਤੇ ਹਰ ਪੇਜ ਤੋਂ <link rel="manifest" href="/manifest.json"> ਨਾਲ ਲਿੰਕ ਕਰੋ। ਕੁਝ ਪ੍ਰੋਜੈਕਟ ਇਸਨੂੰ site.webmanifest ਨਾਂ ਦਿੰਦੇ ਹਨ; ਨਾਂ ਮਾਇਨੇ ਨਹੀਂ ਰੱਖਦਾ, ਲਿੰਕ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ।

Windows ਟਾਈਲਾਂ ਅਤੇ browserconfig.xml

Windows 8.1 ਅਤੇ 10 ਵਰਤੋਂਕਾਰਾਂ ਨੂੰ ਸਾਈਟ ਨੂੰ ਸਟਾਰਟ ਮੀਨੂ ਵਿੱਚ ਪਿੰਨ ਕਰਨ ਦਿੰਦੇ ਹਨ, ਅਤੇ IE11 ਤੇ ਪੁਰਾਣਾ Edge ਟਾਈਲ ਤਸਵੀਰਾਂ browserconfig.xml ਤੋਂ ਪੜ੍ਹਦੇ ਹਨ। ਆਮ ਸਾਈਜ਼ ਹਨ 70x70 (ਛੋਟਾ), 150x150 (ਦਰਮਿਆਨਾ), 310x150 (ਚੌੜਾ) ਅਤੇ 310x310 (ਵੱਡਾ)। Chromium-ਅਧਾਰਿਤ Edge ਇਸਦੀ ਬਜਾਏ ਮੈਨੀਫੈਸਟ ਅਤੇ ਆਮ ਫੈਵੀਕਨ ਵਰਤਦਾ ਹੈ, ਇਸ ਲਈ ਇਹ ਇੱਕ ਪੁਰਾਣੀ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ। ਇਸਨੂੰ ਸਿਰਫ਼ ਉਦੋਂ ਸ਼ਾਮਲ ਕਰੋ ਜਦੋਂ ਤੁਹਾਡੇ ਦਰਸ਼ਕਾਂ ਵਿੱਚ ਅਜੇ ਵੀ ਪੁਰਾਣੇ Windows ਸੈੱਟਅੱਪ ਸ਼ਾਮਲ ਹੋਣ, ਜਿਵੇਂ ਕਾਰਪੋਰੇਟ ਮਾਹੌਲ ਵਿੱਚ।

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <TileColor>#0f172a</TileColor>
    </tile>
  </msapplication>
</browserconfig>

theme-color: ਬ੍ਰਾਊਜ਼ਰ UI ਨੂੰ ਰੰਗ ਦੇਣਾ

theme-color ਮੈਟਾ ਟੈਗ ਮੋਬਾਈਲ ਬ੍ਰਾਊਜ਼ਰਾਂ (ਅਤੇ ਕੁਝ ਡੈਸਕਟਾਪ ਬ੍ਰਾਊਜ਼ਰਾਂ) ਨੂੰ ਦੱਸਦਾ ਹੈ ਕਿ ਐਡਰੈੱਸ ਬਾਰ ਜਾਂ ਟਾਈਟਲ ਬਾਰ ਲਈ ਕਿਹੜਾ ਰੰਗ ਵਰਤਣਾ ਹੈ। ਇਹ ਫੈਵੀਕਨ ਨਹੀਂ ਹੈ, ਪਰ ਇਹ ਉਸੇ ਬ੍ਰਾਂਡਿੰਗ ਸੈੱਟ ਦਾ ਹਿੱਸਾ ਹੈ। ਤੁਸੀਂ ਲਾਈਟ ਅਤੇ ਡਾਰਕ ਮੋਡ ਲਈ ਵੱਖਰੇ ਮੁੱਲ ਦੇ ਸਕਦੇ ਹੋ:

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

ਘੱਟੋ-ਘੱਟ ਆਧੁਨਿਕ ਸੈੱਟਅੱਪ ਬਨਾਮ ਵੱਧ ਤੋਂ ਵੱਧ ਅਨੁਕੂਲਤਾ

ਘੱਟੋ-ਘੱਟ ਆਧੁਨਿਕ ਸੈੱਟਅੱਪ (ਜ਼ਿਆਦਾਤਰ ਸਾਈਟਾਂ ਲਈ ਸਿਫ਼ਾਰਸ਼ੀ)

ਪੰਜ ਫਾਈਲਾਂ ਅਸਲ ਦੁਨੀਆ ਦੀ 99% ਤੋਂ ਵੱਧ ਵਰਤੋਂ ਨੂੰ ਕਵਰ ਕਰਦੀਆਂ ਹਨ: favicon.ico, favicon.svg, apple-touch-icon.png (180x180), ਅਤੇ ਦੋ ਮੈਨੀਫੈਸਟ ਆਈਕਨ (192 ਅਤੇ 512)। ਜੇ Google Search ਵਿੱਚ ਦਿੱਖ ਮਾਇਨੇ ਰੱਖਦੀ ਹੈ ਤਾਂ 96x96 PNG ਜੋੜੋ, ਅਤੇ ਜੇ ਤੁਸੀਂ PWA ਦਿੰਦੇ ਹੋ ਤਾਂ ਮਾਸਕੇਬਲ ਆਈਕਨ ਜੋੜੋ।

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">

ਵੱਧ ਤੋਂ ਵੱਧ ਅਨੁਕੂਲਤਾ ਵਾਲਾ ਸੈੱਟਅੱਪ

ਇਹ ਉਦੋਂ ਚੁਣੋ ਜਦੋਂ ਤੁਸੀਂ ਵਿਆਪਕ ਜਾਂ ਐਂਟਰਪ੍ਰਾਈਜ਼ ਦਰਸ਼ਕਾਂ ਨੂੰ ਸੇਵਾ ਦਿੰਦੇ ਹੋ, ਜਾਂ ਹਰ ਸੰਭਵ ਕਲਾਇੰਟ ਨੂੰ ਕਵਰ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ। ਇਹ ਸਪਸ਼ਟ PNG ਸਾਈਜ਼, ਪੁਰਾਣੇ Apple ਸਾਈਜ਼, Windows ਟਾਈਲਾਂ ਅਤੇ ਥੀਮ ਰੰਗ ਜੋੜਦਾ ਹੈ।

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Classic and modern browser icons -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <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="96x96" href="/favicon-96x96.png">

  <!-- Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

  <!-- Android / PWA -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

  <!-- Windows (legacy) -->
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta name="msapplication-TileColor" content="#0f172a">

  <title>Example</title>
</head>

ਧਿਆਨ ਦਿਓ ਕਿ ਰੂਟ-ਰਿਲੇਟਿਵ ਪਾਥ / ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹਨ। ਇਹ ਹਰ ਪੇਜ ਦੀ ਡੂੰਘਾਈ ਉੱਤੇ ਕੰਮ ਕਰਦੇ ਹਨ, ਜੋ ਸਾਨੂੰ ਸਭ ਤੋਂ ਆਮ ਗ਼ਲਤੀਆਂ ਵੱਲ ਲੈ ਜਾਂਦਾ ਹੈ।

ਆਮ ਫੈਵੀਕਨ ਗ਼ਲਤੀਆਂ ਅਤੇ ਉਨ੍ਹਾਂ ਦੇ ਹੱਲ

1. ਗ਼ਲਤ ਪਾਥ

href="favicon.ico" ਵਰਗਾ ਲਿੰਕ ਮੌਜੂਦਾ URL ਦੇ ਸਾਪੇਖ ਹੱਲ ਹੁੰਦਾ ਹੈ, ਇਸ ਲਈ ਇਹ / ਉੱਤੇ ਚੱਲਦਾ ਹੈ ਪਰ /blog/post/ ਉੱਤੇ ਟੁੱਟ ਜਾਂਦਾ ਹੈ। ਰੂਟ-ਰਿਲੇਟਿਵ (/favicon.ico) ਜਾਂ ਪੂਰੇ URL ਵਰਤੋ। ਇਹ ਵੀ ਜਾਂਚੋ ਕਿ ਫਾਈਲਾਂ ਸੱਚਮੁੱਚ ਮੌਜੂਦ ਹਨ: ਹਰ URL ਨੂੰ ਸਿੱਧਾ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਖੋਲ੍ਹੋ ਅਤੇ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਇਹ HTTP 200 ਦਿੰਦਾ ਹੈ, ਨਾ ਕਿ 404 ਪੇਜ ਜਾਂ ਲੌਗਇਨ ਦੀਵਾਰ ਵੱਲ ਰੀਡਾਇਰੈਕਟ।

2. sizes ਐਟਰੀਬਿਊਟ ਗਾਇਬ ਜਾਂ ਗ਼ਲਤ

sizes ਤੋਂ ਬਿਨਾਂ ਬ੍ਰਾਊਜ਼ਰਾਂ ਨੂੰ ਆਈਕਨ ਜਾਂਚਣ ਲਈ ਡਾਊਨਲੋਡ ਕਰਨੇ ਪੈਂਦੇ ਹਨ, ਅਤੇ ਉਹ ਗ਼ਲਤ ਆਈਕਨ ਚੁਣ ਸਕਦੇ ਹਨ। PNG ਲਿੰਕਾਂ ਉੱਤੇ ਹਮੇਸ਼ਾ sizes ਦਿਓ ਅਤੇ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਇਹ ਅਸਲ ਪਿਕਸਲ ਮਾਪ ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੈ। 32x32 ਲਿਖੀ ਫਾਈਲ ਜੋ ਅਸਲ ਵਿੱਚ 64x64 ਹੋਵੇ, ਅਸੰਗਤ ਨਤੀਜੇ ਦਿੰਦੀ ਹੈ।

3. ਹੱਦੋਂ ਵੱਧ ਕੈਸ਼ਿੰਗ

ਬ੍ਰਾਊਜ਼ਰ ਫੈਵੀਕਨ ਨੂੰ ਲੰਮੇ ਸਮੇਂ ਲਈ ਕੈਸ਼ ਕਰਦੇ ਹਨ, ਅਕਸਰ ਪੇਜ ਕੈਸ਼ ਤੋਂ ਸੁਤੰਤਰ ਤੌਰ ਤੇ। ਰੀਬ੍ਰਾਂਡ ਤੋਂ ਬਾਅਦ ਪੁਰਾਣਾ ਆਈਕਨ ਕਈ ਦਿਨ ਟਿਕਿਆ ਰਹਿ ਸਕਦਾ ਹੈ। ਫਾਈਲ ਦਾ ਨਾਂ ਬਦਲੋ ਜਾਂ ਵਰਜਨ ਕੁਏਰੀ ਸਟ੍ਰਿੰਗ (/favicon.ico?v=2) ਜੋੜੋ ਅਤੇ link ਟੈਗ ਅੱਪਡੇਟ ਕਰੋ। ਹਾਰਡ ਰੀਲੋਡ ਅਕਸਰ ਟੈਬ ਆਈਕਨ ਨੂੰ ਤਾਜ਼ਾ ਨਹੀਂ ਕਰਦੇ; ਆਈਕਨ ਦਾ URL ਸਿੱਧਾ ਖੋਲ੍ਹ ਕੇ ਰੀਲੋਡ ਕਰਨ ਨਾਲ ਆਮ ਤੌਰ ਤੇ ਕੰਮ ਬਣ ਜਾਂਦਾ ਹੈ।

4. ਗ਼ੈਰ-ਵਰਗਾਕਾਰ ਤਸਵੀਰਾਂ

ਫੈਵੀਕਨ ਵਰਗਾਕਾਰ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ। ਆਇਤਾਕਾਰ ਲੋਗੋ ਅਣਕਿਆਸੇ ਢੰਗ ਨਾਲ ਖਿੱਚਿਆ, ਕੱਟਿਆ ਜਾਂ ਲੈਟਰਬਾਕਸ ਹੋ ਜਾਂਦਾ ਹੈ। ਚੌੜੇ ਵਰਡਮਾਰਕ ਨੂੰ ਛੋਟਾ ਕਰਨ ਦੀ ਬਜਾਏ ਇੱਕ ਵੱਖਰਾ ਵਰਗਾਕਾਰ ਚਿੰਨ੍ਹ ਡਿਜ਼ਾਈਨ ਕਰੋ, ਜਿਵੇਂ ਕੋਈ ਸ਼ੁਰੂਆਤੀ ਅੱਖਰ ਜਾਂ ਪ੍ਰਤੀਕ।

5. ਪਾਰਦਰਸ਼ੀ Apple touch icon ਦਾ ਕਾਲਾ ਹੋ ਜਾਣਾ

iOS ਪਾਰਦਰਸ਼ਤਾ ਨੂੰ ਕਾਲੇ ਨਾਲ ਭਰ ਦਿੰਦਾ ਹੈ। 180x180 ਆਈਕਨ ਨੂੰ ਠੋਸ ਬੈਕਗ੍ਰਾਊਂਡ ਦਿਓ ਅਤੇ ਕੋਨਿਆਂ ਨੂੰ ਪਹਿਲਾਂ ਤੋਂ ਗੋਲ ਨਾ ਕਰੋ।

6. ਸੇਫ਼ ਜ਼ੋਨ ਤੋਂ ਬਿਨਾਂ ਮਾਸਕੇਬਲ ਆਈਕਨ

ਜੇ ਲੋਗੋ ਮਾਸਕੇਬਲ ਆਈਕਨ ਦੇ ਕਿਨਾਰਿਆਂ ਨੂੰ ਛੂਹਦਾ ਹੈ, ਤਾਂ Android ਇਸਨੂੰ ਕੱਟ ਦੇਵੇਗਾ। ਇਸਨੂੰ ਕੇਂਦਰੀ 80% ਚੱਕਰ ਦੇ ਅੰਦਰ ਰੱਖੋ ਅਤੇ ਪੂਰੇ ਕੈਨਵਸ ਨੂੰ ਬੈਕਗ੍ਰਾਊਂਡ ਰੰਗ ਨਾਲ ਭਰੋ।

7. ਕ੍ਰਾਲਰਾਂ ਤੋਂ ਆਈਕਨ ਨੂੰ ਬਲੌਕ ਕਰਨਾ

ਜੇ robots.txt ਤੁਹਾਡੇ ਫੈਵੀਕਨ ਪਾਥ ਨੂੰ ਮਨ੍ਹਾ ਕਰਦੀ ਹੈ, ਤਾਂ Google ਇਸਨੂੰ ਲੈ ਨਹੀਂ ਸਕਦਾ ਅਤੇ ਖੋਜ ਨਤੀਜਿਆਂ ਵਿੱਚ ਇੱਕ ਆਮ ਗਲੋਬ ਆਈਕਨ ਦਿਖਾਏਗਾ। ਇਹ ਵੀ ਯਾਦ ਰੱਖੋ ਕਿ Google ਨੂੰ ਫੈਵੀਕਨ ਪੇਜ ਵਾਲੇ ਹੀ ਹੋਸਟ ਉੱਤੇ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਉਹ ਇਸਨੂੰ ਕਦੇ-ਕਦਾਈਂ ਹੀ ਤਾਜ਼ਾ ਕਰਦਾ ਹੈ, ਇਸ ਲਈ ਤਬਦੀਲੀਆਂ ਦਿਖਣ ਵਿੱਚ ਦਿਨ ਜਾਂ ਹਫ਼ਤੇ ਲੱਗ ਸਕਦੇ ਹਨ।

8. ਮੈਨੀਫੈਸਟ ਲਿੰਕ ਜਾਂ purpose ਭੁੱਲ ਜਾਣਾ

ਜਿਹੜਾ ਮੈਨੀਫੈਸਟ ਲਿੰਕ ਨਾ ਕੀਤਾ ਹੋਵੇ, ਜਾਂ ਜਿਸ ਵਿੱਚ 192 ਅਤੇ 512 px ਆਈਕਨ ਨਾ ਹੋਣ, ਉਹ Chrome ਵਿੱਚ ਇੰਸਟਾਲ ਪ੍ਰੋਂਪਟ ਨੂੰ ਰੋਕ ਦਿੰਦਾ ਹੈ। ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਡਿਵੈਲਪਰ ਟੂਲਾਂ ਵਿੱਚ Application ਟੈਬ ਹੇਠ ਇਸਨੂੰ ਪ੍ਰਮਾਣਿਤ ਕਰੋ।

ਪੂਰਾ ਸੈੱਟ ਇੱਕ ਕਲਿੱਕ ਵਿੱਚ ਬਣਾਓ

ਇਮੇਜ ਐਡੀਟਰ ਵਿੱਚ ਹੱਥੀਂ ਦਰਜਨ ਭਰ ਫਾਈਲਾਂ ਬਣਾਉਣਾ, ਫਿਰ ICO ਵਿੱਚ ਬਦਲਣਾ ਅਤੇ ਮੈਨੀਫੈਸਟ ਲਿਖਣਾ ਥਕਾਊ ਹੈ ਅਤੇ ਇਸ ਵਿੱਚ ਗ਼ਲਤੀਆਂ ਦੀ ਸੰਭਾਵਨਾ ਰਹਿੰਦੀ ਹੈ। MakeFav ਇੱਕ ਹੀ ਤਸਵੀਰ, ਟੈਕਸਟ ਜਾਂ ਇਮੋਜੀ ਤੋਂ ਉੱਪਰ ਦੱਸੀਆਂ ਸਾਰੀਆਂ ਫਾਈਲਾਂ ਬਣਾ ਦਿੰਦਾ ਹੈ: ਬਹੁ-ਸਾਈਜ਼ favicon.ico, PNG, SVG, Apple touch icon, 192/512 PNG, ਇੱਕ ਮਾਸਕੇਬਲ ਆਈਕਨ, Windows ਟਾਈਲਾਂ, manifest.json ਅਤੇ browserconfig.xml, ਨਾਲ ਪੇਸਟ ਕਰਨ ਲਈ ਤਿਆਰ HTML ਸਨਿੱਪਟ, ਸਭ ਇੱਕ ZIP ਡਾਊਨਲੋਡ ਵਿੱਚ। ਤੁਸੀਂ ਐਡੀਟਰ ਵਿੱਚ ਬੈਕਗ੍ਰਾਊਂਡ, ਪੈਡਿੰਗ ਅਤੇ ਆਕਾਰ ਨੂੰ ਬਾਰੀਕੀ ਨਾਲ ਸੈੱਟ ਕਰ ਸਕਦੇ ਹੋ, ਫੈਵੀਕਨ ਚੈਕਰ ਨਾਲ ਕਿਸੇ ਮੌਜੂਦਾ ਸਾਈਟ ਦੀ ਜਾਂਚ ਕਰ ਸਕਦੇ ਹੋ, ਅਤੇ ਡਿਵੈਲਪਰ ਸਰੋਤਾਂ ਰਾਹੀਂ ਜਨਰੇਸ਼ਨ ਨੂੰ ਆਟੋਮੇਟ ਕਰ ਸਕਦੇ ਹੋ।

ਡਿਪਲਾਇਮੈਂਟ ਚੈੱਕਲਿਸਟ

1. ਸਾਰੀਆਂ ਫਾਈਲਾਂ ਆਪਣੀ ਸਾਈਟ ਦੇ ਰੂਟ ਵਿੱਚ ਅੱਪਲੋਡ ਕਰੋ।
2. HTML ਸਨਿੱਪਟ ਨੂੰ ਹਰ ਪੇਜ ਦੇ (ਜਾਂ ਤੁਹਾਡੇ ਸਾਂਝੇ ਲੇਆਉਟ ਦੇ) <head> ਵਿੱਚ ਪੇਸਟ ਕਰੋ।
3. ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਪਾਥ ਰੂਟ-ਰਿਲੇਟਿਵ ਹਨ ਅਤੇ HTTP 200 ਦਿੰਦੇ ਹਨ।
4. ਲਾਈਟ ਅਤੇ ਡਾਰਕ ਮੋਡ, iOS ਹੋਮ-ਸਕ੍ਰੀਨ ਇੰਸਟਾਲ ਅਤੇ Android ਇੰਸਟਾਲ ਦੀ ਜਾਂਚ ਕਰੋ।
5. ਗਾਇਬ ਜਾਂ ਬੇਮੇਲ ਸਾਈਜ਼ ਫੜਨ ਲਈ ਚੈਕਰ ਚਲਾਓ।
6. ਜੇ ਤੁਸੀਂ ਪੁਰਾਣਾ ਆਈਕਨ ਬਦਲਿਆ ਹੈ ਤਾਂ ਵਰਜਨ ਸਟ੍ਰਿੰਗ ਨਾਲ ਕੈਸ਼ ਤੋੜੋ।

ਅਕਸਰ ਪੁੱਛੇ ਜਾਂਦੇ ਸਵਾਲ

ਕੀ 2026 ਵਿੱਚ ਵੀ ਮੈਨੂੰ favicon.ico ਦੀ ਲੋੜ ਹੈ?

ਹਾਂ। ਭਾਵੇਂ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰ PNG ਅਤੇ SVG ਸਵੀਕਾਰ ਕਰਦੇ ਹਨ, ਕਈ ਕ੍ਰਾਲਰ, ਫੀਡ ਰੀਡਰ, ਈਮੇਲ ਕਲਾਇੰਟ ਅਤੇ ਪੁਰਾਣੇ ਬ੍ਰਾਊਜ਼ਰ ਅੱਜ ਵੀ ਸਿੱਧਾ /favicon.ico ਮੰਗਦੇ ਹਨ। 16, 32 ਅਤੇ 48 px ਤਸਵੀਰਾਂ ਵਾਲੀ ਬਹੁ-ਸਾਈਜ਼ ICO ਇੱਕ ਛੋਟੀ ਫਾਈਲ ਹੈ ਜੋ ਗਾਇਬ ਆਈਕਨਾਂ ਅਤੇ 404 ਗ਼ਲਤੀਆਂ ਤੋਂ ਬਚਾਉਂਦੀ ਹੈ।

Google Search ਲਈ ਫੈਵੀਕਨ ਦਾ ਸਾਈਜ਼ ਕਿੰਨਾ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ?

Google ਇੱਕ ਵਰਗਾਕਾਰ ਫੈਵੀਕਨ ਮੰਗਦਾ ਹੈ ਜਿਸਦਾ ਸਾਈਜ਼ 48 px ਦਾ ਗੁਣਜ ਹੋਵੇ, ਘੱਟੋ-ਘੱਟ 48x48। 96x96 PNG ਇੱਕ ਸੁਰੱਖਿਅਤ ਚੋਣ ਹੈ, ਅਤੇ SVG ਵੀ ਸਪੋਰਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। Google ਨੂੰ ਇਹ ਵੀ ਚਾਹੀਦਾ ਹੈ ਕਿ ਫਾਈਲ ਕ੍ਰਾਲ ਹੋ ਸਕੇ, ਇਸ ਲਈ ਇਸਨੂੰ robots.txt ਵਿੱਚ ਬਲੌਕ ਨਾ ਕਰੋ। ਅੱਪਡੇਟ ਦਿਖਣ ਵਿੱਚ ਦਿਨ ਜਾਂ ਹਫ਼ਤੇ ਲੱਗ ਸਕਦੇ ਹਨ।

ਕੀ Apple touch icon ਲਈ 180x180 ਕਾਫ਼ੀ ਹੈ?

ਲਗਭਗ ਸਾਰੀਆਂ ਸਾਈਟਾਂ ਲਈ, ਹਾਂ। iOS ਅਤੇ iPadOS ਹਰ ਮੌਜੂਦਾ ਡਿਵਾਈਸ ਲਈ 180x180 PNG ਨੂੰ ਛੋਟਾ ਕਰ ਲੈਂਦੇ ਹਨ। ਪੁਰਾਣੇ ਸਾਈਜ਼ (57 ਤੋਂ 152 px) ਸਿਰਫ਼ ਬਹੁਤ ਪੁਰਾਣੇ iOS ਸੰਸਕਰਣਾਂ ਲਈ ਮਾਇਨੇ ਰੱਖਦੇ ਹਨ। ਠੋਸ ਬੈਕਗ੍ਰਾਊਂਡ ਵਰਤਣਾ ਨਾ ਭੁੱਲੋ ਤਾਂ ਜੋ ਆਈਕਨ ਕਾਲਾ ਨਾ ਹੋ ਜਾਵੇ।

ਮਾਸਕੇਬਲ ਆਈਕਨ ਕੀ ਹੈ ਅਤੇ ਕੀ ਮੈਨੂੰ ਇਸਦੀ ਲੋੜ ਹੈ?

ਮਾਸਕੇਬਲ ਆਈਕਨ ਇੱਕ 512x512 PNG ਹੈ ਜੋ Android ਦੇ ਅਡੈਪਟਿਵ ਆਈਕਨ ਆਕਾਰਾਂ ਲਈ ਡਿਜ਼ਾਈਨ ਕੀਤਾ ਗਿਆ ਹੈ। ਇਸਦੀ ਜ਼ਰੂਰੀ ਸਮੱਗਰੀ ਕੇਂਦਰ ਵਿੱਚ 80% ਵਿਆਸ ਵਾਲੇ ਚੱਕਰ ਦੇ ਅੰਦਰ ਹੁੰਦੀ ਹੈ, ਅਤੇ ਬੈਕਗ੍ਰਾਊਂਡ ਪੂਰੇ ਵਰਗ ਨੂੰ ਭਰਦਾ ਹੈ। ਤੁਹਾਨੂੰ ਇਸਦੀ ਲੋੜ ਸਿਰਫ਼ ਤਾਂ ਹੈ ਜੇ ਤੁਸੀਂ ਇੰਸਟਾਲ ਹੋਣ ਯੋਗ PWA ਦਿੰਦੇ ਹੋ, ਪਰ ਇਹ ਆਈਕਨ ਨੂੰ ਚਿੱਟੇ ਚੱਕਰ ਵਿੱਚ ਬੈਠਣ ਦੀ ਬਜਾਏ ਮੂਲ (ਨੇਟਿਵ) ਵਰਗਾ ਬਣਾ ਦਿੰਦਾ ਹੈ।

ਆਈਕਨ ਬਦਲਣ ਤੋਂ ਬਾਅਦ ਵੀ ਮੇਰਾ ਪੁਰਾਣਾ ਫੈਵੀਕਨ ਕਿਉਂ ਦਿਖ ਰਿਹਾ ਹੈ?

ਬ੍ਰਾਊਜ਼ਰ ਫੈਵੀਕਨ ਨੂੰ ਵੱਖਰੇ ਤੌਰ ਤੇ ਅਤੇ ਲੰਮੇ ਸਮੇਂ ਲਈ ਕੈਸ਼ ਕਰਦੇ ਹਨ। ਫਾਈਲ ਦਾ ਨਾਂ ਬਦਲੋ ਜਾਂ ?v=2 ਵਰਗੀ ਵਰਜਨ ਕੁਏਰੀ ਸਟ੍ਰਿੰਗ ਜੋੜੋ, link ਟੈਗ ਅੱਪਡੇਟ ਕਰੋ, ਫਿਰ ਆਈਕਨ ਦਾ URL ਸਿੱਧਾ ਖੋਲ੍ਹ ਕੇ ਰੀਲੋਡ ਕਰੋ। ਸਰਚ ਇੰਜਣਾਂ ਨੂੰ ਆਪਣੀ ਕਾਪੀ ਤਾਜ਼ਾ ਕਰਨ ਵਿੱਚ ਵੱਧ ਸਮਾਂ ਲੱਗ ਸਕਦਾ ਹੈ।