ਫੈਵੀਕੋਨ UX: ਇੱਕ ਵਧੀਆ ਫੈਵੀਕੋਨ ਕਿਸ ਚੀਜ਼ ਨਾਲ ਬਣਦਾ ਹੈ

ਇੱਕ ਵਧੀਆ ਫੈਵੀਕੌਨ ਇੱਕ ਸਧਾਰਨ, ਉੱਚ-ਕੰਟਰਾਸਟ ਵਾਲਾ ਨਿਸ਼ਾਨ ਹੁੰਦਾ ਹੈ, ਆਮ ਤੌਰ 'ਤੇ ਤੁਹਾਡਾ ਲੋਗੋਮਾਰਕ ਜਾਂ ਇੱਕ-ਦੋ ਅੱਖਰ, ਜੋ ਹਲਕੇ ਅਤੇ ਗੂੜ੍ਹੇ ਦੋਵਾਂ ਬ੍ਰਾਊਜ਼ਰ ਟੈਬਾਂ 'ਤੇ 16x16 ਪਿਕਸਲ ਦੇ ਆਕਾਰ ਵਿੱਚ ਵੀ ਪੜ੍ਹਨਯੋਗ ਰਹਿੰਦਾ ਹੈ, ਤੁਹਾਡੇ ਬ੍ਰਾਂਡ ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੈ ਅਤੇ ਬਹੁਤ ਘੱਟ ਬਦਲਦਾ ਹੈ। ਇਸ ਗਾਈਡ ਵਿਚਲੀ ਹਰ ਹੋਰ ਗੱਲ (ਪਿਕਸਲ ਅਲਾਈਨਮੈਂਟ, ਰੰਗ, ਪੈਡਿੰਗ, ਪਾਰਦਰਸ਼ਤਾ, ਫਾਈਲ ਦਾ ਆਕਾਰ) ਇਨ੍ਹਾਂ ਟੀਚਿਆਂ ਦੀ ਹੀ ਪੂਰਤੀ ਕਰਦੀ ਹੈ: ਦਰਜਨਾਂ ਖੁੱਲ੍ਹੀਆਂ ਟੈਬਾਂ ਵਿੱਚੋਂ ਤੁਹਾਡੀ ਸਾਈਟ ਨੂੰ ਤੁਰੰਤ ਲੱਭਣਯੋਗ ਬਣਾਉਣਾ।

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

1. 16x16 'ਤੇ ਪੜ੍ਹਨਯੋਗਤਾ

ਕਲਾਸਿਕ ਫੈਵੀਕਾਨ ਦਾ ਆਕਾਰ 16x16 CSS ਪਿਕਸਲ ਹੁੰਦਾ ਹੈ। ਆਮ ਡਿਸਪਲੇ 'ਤੇ ਇਹ ਸੱਚਮੁੱਚ 256 ਪਿਕਸਲ ਹੁੰਦੇ ਹਨ; 2x ਰੈਟੀਨਾ ਡਿਸਪਲੇ 'ਤੇ ਬ੍ਰਾਊਜ਼ਰ ਆਮ ਤੌਰ 'ਤੇ ਉਸੇ ਥਾਂ ਲਈ 32x32 ਦੀ ਤਸਵੀਰ ਚੁਣਦਾ ਹੈ। ਤੁਸੀਂ ਜੋ ਵੀ ਡਿਜ਼ਾਈਨ ਕਰੋ, ਉਸ ਨੂੰ ਇਸ ਛੋਟੇ ਆਕਾਰ ਵਿੱਚ ਵੀ ਸਾਫ਼ ਦਿਖਣਾ ਚਾਹੀਦਾ ਹੈ।

ਇਸ ਨੂੰ ਸਰਲ ਰੱਖੋ

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

ਪਿਕਸਲ ਗਰਿੱਡ ਨਾਲ ਮੇਲ ਖਵਾਓ

16x16 'ਤੇ, ਜੇ ਕੋਈ ਲਕੀਰ ਗਰਿੱਡ ਤੋਂ ਅੱਧਾ ਪਿਕਸਲ ਹਟ ਕੇ ਹੋਵੇ, ਤਾਂ ਉਹ ਪਿਕਸਲਾਂ ਦੀਆਂ ਦੋ ਕਤਾਰਾਂ ਵਿੱਚ ਐਂਟੀ-ਅਲਾਈਜ਼ ਹੋ ਜਾਂਦੀ ਹੈ ਅਤੇ ਸਲੇਟੀ ਤੇ ਧੁੰਦਲੀ ਲੱਗਦੀ ਹੈ। ਕਿਨਾਰਿਆਂ ਨੂੰ ਪੂਰੇ ਪਿਕਸਲ ਦੀਆਂ ਹੱਦਾਂ 'ਤੇ ਰੱਖੋ ਅਤੇ ਜਿੱਥੇ ਆਕਾਰ ਸਮਮਿਤੀ ਹੋਵੇ ਉੱਥੇ ਸਮ ਚੌੜਾਈ ਵਰਤੋ। ਜੇ ਤੁਸੀਂ ਵੈਕਟਰ ਟੂਲ ਤੋਂ ਐਕਸਪੋਰਟ ਕਰਦੇ ਹੋ, ਤਾਂ ਪਿਕਸਲ ਸਨੈਪਿੰਗ ਚਾਲੂ ਕਰੋ, ਜਾਂ ਛੋਟੇ ਕੀਤੇ ਨਤੀਜੇ ਨੂੰ ਜਾਂਚ ਕੇ ਹੱਥੀਂ ਠੀਕ ਕਰੋ।

ਪਤਲੀਆਂ ਲਕੀਰਾਂ ਤੋਂ ਬਚੋ

16x16 'ਤੇ 2 ਪਿਕਸਲ ਤੋਂ ਪਤਲੀਆਂ ਲਕੀਰਾਂ (ਆਈਕਾਨ ਦੀ ਚੌੜਾਈ ਦਾ ਲਗਭਗ 12 ਪ੍ਰਤੀਸ਼ਤ) ਗਾਇਬ ਹੋ ਜਾਂਦੀਆਂ ਹਨ ਜਾਂ ਆਕਾਰਾਂ ਵਿਚਕਾਰ ਝਿਲਮਿਲਾਉਂਦੀਆਂ ਹਨ। ਲਕੀਰਾਂ ਨੂੰ ਮੋਟਾ ਕਰੋ, ਅੰਦਰੂਨੀ ਵੇਰਵੇ ਹਟਾਓ ਅਤੇ ਛੋਟੇ ਖਾਲੀ ਥਾਵਾਂ ਨੂੰ ਮਿਲਾ ਦਿਓ। ਇੱਕ ਮੋਟਾ, ਥੋੜ੍ਹਾ ਭਾਰੀ ਅੱਖਰ-ਰੂਪ ਆਮ ਤੌਰ 'ਤੇ ਕਿਸੇ ਵਿਸਤ੍ਰਿਤ ਲੋਗੋ ਦੀ ਹੂ-ਬ-ਹੂ ਛੋਟੀ ਨਕਲ ਨਾਲੋਂ ਵਧੀਆ ਪੜ੍ਹਿਆ ਜਾਂਦਾ ਹੈ।

ਹੱਥੀਂ ਹਿੰਟਿੰਗ ਕਰੋ

ICO ਅਤੇ PNG ਫਾਈਲਾਂ ਵਿੱਚ ਫੌਂਟ-ਸਟਾਈਲ ਹਿੰਟਿੰਗ ਨਹੀਂ ਹੁੰਦੀ, ਇਸ ਲਈ ਇਸ ਦਾ ਬਦਲ ਹੱਥੀਂ ਪਿਕਸਲ ਸੰਪਾਦਨ ਹੈ: ਤੁਸੀਂ ਇੱਕ-ਇੱਕ ਪਿਕਸਲ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਠੀਕ ਕਰਦੇ ਹੋ ਕਿ ਵਕਰਾਂ, ਤਿਰਛੀਆਂ ਲਕੀਰਾਂ ਅਤੇ ਕਾਊਂਟਰ ("a" ਜਾਂ "e" ਵਰਗੇ ਅੱਖਰਾਂ ਦੇ ਛੇਕ) ਤਿੱਖੇ ਰਹਿਣ। ਆਪਣੇ-ਆਪ ਛੋਟਾ ਕਰਨਾ ਇੱਕ ਚੰਗਾ ਪਹਿਲਾ ਖਰੜਾ ਹੈ, ਪਰ ਹੱਥ ਨਾਲ ਰੱਖੇ ਕੁਝ ਪਿਕਸਲ ਅਕਸਰ ਇੱਕ ਧੱਬੇ ਅਤੇ ਪਛਾਣੇ ਜਾਣ ਵਾਲੇ ਅੱਖਰ ਵਿੱਚ ਫ਼ਰਕ ਪਾ ਦਿੰਦੇ ਹਨ। MakeFav ਪਿਕਸਲ ਐਡੀਟਰ ਇਸੇ ਲਈ ਬਣਾਇਆ ਗਿਆ ਹੈ: 16x16 ਕੈਨਵਸ ਖੋਲ੍ਹੋ, ਸਮੱਸਿਆ ਵਾਲੇ ਪਿਕਸਲ ਠੀਕ ਕਰੋ ਅਤੇ ਐਕਸਪੋਰਟ ਕਰੋ।

2. ਹਲਕੇ ਅਤੇ ਗੂੜ੍ਹੇ ਟੈਬਾਂ 'ਤੇ ਕੰਟ੍ਰਾਸਟ

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

ਵਿਹਾਰਕ ਹੱਲ

• ਬੈਕਗ੍ਰਾਊਂਡ ਆਕਾਰ ਜੋੜੋ। ਬ੍ਰਾਂਡ ਰੰਗ ਵਿੱਚ ਇੱਕ ਠੋਸ ਗੋਲ ਕੋਨਿਆਂ ਵਾਲਾ ਵਰਗ ਜਾਂ ਚੱਕਰ ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਨਿਸ਼ਾਨ ਦਾ ਆਪਣਾ ਕੰਟ੍ਰਾਸਟ ਰਹੇ, ਚਾਹੇ ਟੈਬ ਕੋਈ ਵੀ ਹੋਵੇ।
• ਪਤਲੀ ਆਊਟਲਾਈਨ ਜਾਂ ਹੇਲੋ ਵਰਤੋ। ਗੂੜ੍ਹੇ ਗਲਿਫ਼ ਦੇ ਦੁਆਲੇ 1px ਦਾ ਹਲਕਾ ਕਿਨਾਰਾ (ਜਾਂ ਇਸ ਦੇ ਉਲਟ) ਦੋਵਾਂ ਥੀਮਾਂ 'ਤੇ ਰੂਪ-ਰੇਖਾ ਨੂੰ ਦਿਖਾਈ ਦਿੰਦੀ ਰੱਖਦਾ ਹੈ, ਪਰ 16x16 'ਤੇ ਇਸ ਦਾ ਸਾਫ਼ ਰਹਿਣਾ ਜ਼ਰੂਰੀ ਹੈ, ਇਸ ਲਈ ਇਸ ਦੀ ਜਾਂਚ ਕਰੋ।
• ਮੱਧਮ ਟੋਨ ਵਾਲੇ ਬ੍ਰਾਂਡ ਰੰਗ ਚੁਣੋ। ਗੂੜ੍ਹਾ ਨੀਲਾ, ਸੰਤਰੀ, ਹਰਾ ਜਾਂ ਮੈਜੈਂਟਾ ਵਰਗੇ ਰੰਗ ਆਮ ਤੌਰ 'ਤੇ ਚਿੱਟੀਆਂ ਅਤੇ ਲਗਭਗ ਕਾਲੀਆਂ ਦੋਵੇਂ ਸਤਹਾਂ 'ਤੇ ਕੰਮ ਕਰਦੇ ਹਨ। ਬਹੁਤ ਹਲਕਾ ਪੀਲਾ ਜਾਂ ਬਹੁਤ ਗੂੜ੍ਹਾ ਨੇਵੀ ਜੋਖਮ ਭਰੇ ਹੁੰਦੇ ਹਨ।
• ਅਡੈਪਟਿਵ SVG ਫ਼ੇਵੀਕੋਨ ਵਰਤੋ। SVG ਵਿੱਚ prefers-color-scheme ਮੀਡੀਆ ਕੁਏਰੀ ਸ਼ਾਮਲ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ, ਤਾਂ ਜੋ ਆਈਕਨ ਸਿਸਟਮ ਥੀਮ ਦੇ ਨਾਲ ਬਦਲ ਜਾਵੇ।

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'>
  <style>
    .mark { fill: #1b2a49; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f5f7fa; }
    }
  </style>
  <path class='mark' d='M6 26V6h6l4 10 4-10h6v20h-4V13l-4 10h-4l-4-10v13z'/>
</svg>

ਧਿਆਨ ਦਿਓ ਕਿ ਮੀਡੀਆ ਕੁਏਰੀ ਓਪਰੇਟਿੰਗ ਸਿਸਟਮ ਜਾਂ ਬ੍ਰਾਊਜ਼ਰ ਦੀ ਥੀਮ ਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ, ਜਿਸ ਦੀ ਟੈਬ ਸਟ੍ਰਿਪ ਆਮ ਤੌਰ 'ਤੇ ਪਾਲਣਾ ਕਰਦੀ ਹੈ, ਪਰ ਹਮੇਸ਼ਾ ਨਹੀਂ। SVG ਫ਼ੇਵੀਕੋਨਾਂ ਲਈ ਸਮਰਥਨ ਵੀ ਵੱਖ-ਵੱਖ ਹੈ: Chrome ਅਤੇ Firefox ਇਨ੍ਹਾਂ ਨੂੰ ਸੰਭਾਲਦੇ ਹਨ, ਜਦਕਿ Safari ਇਤਿਹਾਸਕ ਤੌਰ 'ਤੇ ਪਿੱਛੇ ਰਿਹਾ ਹੈ, ਇਸ ਲਈ ਹਮੇਸ਼ਾ PNG ਜਾਂ ICO ਫਾਲਬੈਕ ਰੱਖੋ। ਠੋਸ ਬੈਕਗ੍ਰਾਊਂਡ ਵਾਲਾ ਡਿਜ਼ਾਈਨ ਸਭ ਤੋਂ ਮਜ਼ਬੂਤ ਵਿਕਲਪ ਹੈ ਕਿਉਂਕਿ ਇਸ ਨੂੰ ਕਿਸੇ ਥੀਮ ਲਾਜਿਕ ਦੀ ਲੋੜ ਹੀ ਨਹੀਂ ਹੁੰਦੀ।

3. ਪਛਾਣਯੋਗਤਾ ਅਤੇ ਬ੍ਰਾਂਡ ਦੀ ਇਕਸਾਰਤਾ

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

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

ਵਿਲੱਖਣਤਾ ਓਨੀ ਹੀ ਮਹੱਤਵਪੂਰਨ ਹੈ ਜਿੰਨੀ ਅਸਲ ਲੋਗੋ ਨਾਲ ਹੂਬਹੂ ਮੇਲ। ਟੈਬਾਂ ਦੀ ਕਤਾਰ ਵੱਲ ਦੇਖੋ: ਜੇ ਤਿੰਨ ਹੋਰ ਸਾਈਟਾਂ ਵੀ ਨੀਲਾ ਗੋਲਾ ਵਰਤਦੀਆਂ ਹਨ, ਤਾਂ ਤੁਹਾਡੀ ਵੱਖਰੀ ਨਹੀਂ ਦਿਸੇਗੀ। ਵੱਖਰਾ ਆਕਾਰ ਜਾਂ ਰੰਗ ਪੂਰੀ ਤਰ੍ਹਾਂ ਹੂਬਹੂ ਛੋਟੇ ਕੀਤੇ ਰੂਪ ਨਾਲੋਂ ਵੱਧ ਲਾਭਦਾਇਕ ਹੈ।

4. ਰੰਗ: ਸੀਮਤ, ਗੂੜ੍ਹਾ ਪੈਲੇਟ

ਇੰਨੇ ਘੱਟ ਪਿਕਸਲਾਂ ਨਾਲ, ਹਰ ਵਾਧੂ ਰੰਗ ਭੀੜ-ਭੜੱਕਾ ਵਧਾਉਂਦਾ ਹੈ। ਇੱਕ ਜਾਂ ਦੋ ਰੰਗ, ਅਤੇ ਵੱਧ ਤੋਂ ਵੱਧ ਚਿੱਟਾ ਜਾਂ ਕਾਲਾ ਵਰਤਣ ਦਾ ਟੀਚਾ ਰੱਖੋ। ਗੂੜ੍ਹੇ (ਸੈਚੂਰੇਟਡ) ਰੰਗ ਛੋਟੇ ਆਕਾਰਾਂ 'ਤੇ ਪੇਸਟਲ ਰੰਗਾਂ ਨਾਲੋਂ ਬਿਹਤਰ ਦਿਸਦੇ ਹਨ, ਕਿਉਂਕਿ ਪੇਸਟਲ ਰੰਗ ਟੈਬ ਦੇ ਬੈਕਗ੍ਰਾਊਂਡ ਵਿੱਚ ਰਲ ਜਾਂਦੇ ਹਨ।

ਪਹੁੰਚਯੋਗਤਾ (accessibility) ਦੀ ਸੋਚ ਤੋਂ ਥੋੜ੍ਹਾ ਸਿੱਖਿਆ ਜਾ ਸਕਦਾ ਹੈ। WCAG ਅਰਥਪੂਰਨ ਗ੍ਰਾਫ਼ਿਕਲ ਵਸਤੂਆਂ ਲਈ ਘੱਟੋ-ਘੱਟ 3:1 ਕੰਟ੍ਰਾਸਟ ਦੀ ਮੰਗ ਕਰਦਾ ਹੈ (ਸਫਲਤਾ ਮਾਪਦੰਡ 1.4.11, Non-text Contrast)। ਫੈਵੀਕੋਨ ਰਸਮੀ ਤੌਰ 'ਤੇ ਇਸ ਦੇ ਦਾਇਰੇ ਵਿੱਚ ਨਹੀਂ ਆਉਂਦਾ, ਕਿਉਂਕਿ ਇਹ ਪੰਨੇ ਦੀ ਸਮੱਗਰੀ ਨਹੀਂ ਸਗੋਂ ਬ੍ਰਾਊਜ਼ਰ ਕ੍ਰੋਮ ਦਾ ਹਿੱਸਾ ਹੈ, ਪਰ ਚਿੰਨ੍ਹ ਅਤੇ ਉਸ ਦੇ ਬੈਕਗ੍ਰਾਊਂਡ ਵਿਚਕਾਰ, ਅਤੇ ਆਈਕਨ ਅਤੇ ਟੈਬ ਵਿਚਕਾਰ 3:1 ਕੰਟ੍ਰਾਸਟ ਇੱਕ ਠੋਸ ਟੀਚਾ ਹੈ। ਨਾਲ ਹੀ, ਕੁਝ ਵੀ ਸਿਰਫ਼ ਰੰਗਤ ਰਾਹੀਂ ਦੱਸਣ ਤੋਂ ਬਚੋ: ਇੱਕੋ ਆਈਕਨ ਦੇ ਲਾਲ ਅਤੇ ਹਰੇ ਰੂਪ ਬਹੁਤ ਸਾਰੇ ਰੰਗ-ਅੰਨ੍ਹੇ ਵਰਤੋਂਕਾਰਾਂ ਲਈ ਇੱਕੋ ਜਿਹੇ ਲੱਗਦੇ ਹਨ, ਇਸ ਲਈ ਆਕਾਰ ਬਦਲੋ ਜਾਂ ਕੋਈ ਚਿੰਨ੍ਹ ਜੋੜੋ।

5. ਆਕਾਰ, ਪੈਡਿੰਗ ਅਤੇ ਸੁਰੱਖਿਅਤ ਖੇਤਰ

ਵਰਗ ਨੂੰ ਭਰੋ

ਬ੍ਰਾਊਜ਼ਰ ਟੈਬਾਂ ਫੈਵੀਕੌਨ ਨੂੰ ਇੱਕ ਨਿਸ਼ਚਿਤ ਛੋਟੇ ਆਕਾਰ ਵਿੱਚ ਦਿਖਾਉਂਦੀਆਂ ਹਨ, ਇਸ ਲਈ ਵਾਧੂ ਹਾਸ਼ੀਆ ਤੁਹਾਡੇ ਚਿੰਨ੍ਹ ਨੂੰ ਸਿਰਫ਼ ਹੋਰ ਛੋਟਾ ਕਰ ਦਿੰਦਾ ਹੈ। ਆਮ ਟੈਬ ਆਈਕਨਾਂ ਲਈ ਕੈਨਵਸ ਦਾ ਵੱਧ ਤੋਂ ਵੱਧ ਹਿੱਸਾ ਵਰਤੋ, ਸਿਰਫ਼ ਇੱਕ-ਦੋ ਪਿਕਸਲ ਦੀ ਖੁੱਲ੍ਹੀ ਥਾਂ ਛੱਡੋ, ਤਾਂ ਜੋ ਚਿੰਨ੍ਹ ਜਿੰਨਾ ਹੋ ਸਕੇ ਵੱਡਾ ਦਿਖਾਈ ਦੇਵੇ।

ਗੋਲ ਕੋਨੇ ਜਾਂ ਵਰਗਾਕਾਰ?

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

Apple touch ਆਈਕਨ

iOS apple-touch-icon (ਆਮ ਆਕਾਰ 180x180) ਵਿੱਚ ਆਪਣੇ ਗੋਲ ਕੋਨੇ ਆਪ ਜੋੜਦਾ ਹੈ। ਬਿਨਾਂ ਪਹਿਲਾਂ ਤੋਂ ਗੋਲ ਕੀਤੇ ਕੋਨਿਆਂ ਵਾਲਾ ਪੂਰਾ ਫੈਲਿਆ ਹੋਇਆ ਵਰਗ ਦਿਓ, ਨਹੀਂ ਤਾਂ ਕੋਨਿਆਂ ਵਿੱਚ ਗੂੜ੍ਹੀਆਂ ਜਾਂ ਚਿੱਟੀਆਂ ਪੱਟੀਆਂ ਦਿਖਾਈ ਦੇ ਸਕਦੀਆਂ ਹਨ।

Android ਅਤੇ PWA ਲਈ ਮਾਸਕੇਬਲ ਆਈਕਨ

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

6. ਪਾਰਦਰਸ਼ਤਾ

ਟੈਬ ਫੇਵੀਕਾਨਾਂ ਲਈ ਪਾਰਦਰਸ਼ਤਾ ਠੀਕ ਹੈ, ਅਤੇ ਇਸੇ ਕਰਕੇ ਸਿਰਫ਼ ਗਲਿਫ਼ ਵਾਲਾ ਆਈਕਨ ਕਿਸੇ ਵੀ ਟੈਬ ਦੇ ਰੰਗ 'ਤੇ ਸਾਫ਼-ਸੁਥਰਾ ਬੈਠ ਜਾਂਦਾ ਹੈ। ਪਰ Apple touch icons ਲਈ ਇਹ ਸਮੱਸਿਆ ਹੈ: iOS ਪਾਰਦਰਸ਼ੀ ਖੇਤਰਾਂ ਨੂੰ ਇੱਕ ਠੋਸ ਰੰਗ (ਆਮ ਤੌਰ 'ਤੇ ਕਾਲਾ) ਨਾਲ ਭਰ ਦਿੰਦਾ ਹੈ, ਜੋ ਡਿਜ਼ਾਈਨ ਨੂੰ ਵਿਗਾੜ ਸਕਦਾ ਹੈ। apple-touch-icon ਨੂੰ ਹਮੇਸ਼ਾ ਆਪਣੇ ਬ੍ਰਾਂਡ ਦੇ ਰੰਗ ਵਿੱਚ ਇੱਕ ਅਪਾਰਦਰਸ਼ੀ ਬੈਕਗ੍ਰਾਊਂਡ ਦਿਓ। ਮਾਸਕੇਬਲ ਆਈਕਨਾਂ ਅਤੇ ਐਂਡਰਾਇਡ ਹੋਮ-ਸਕ੍ਰੀਨ ਦੇ ਜ਼ਿਆਦਾਤਰ ਮਾਮਲਿਆਂ ਲਈ ਵੀ ਇਹੀ ਗੱਲ ਲਾਗੂ ਹੁੰਦੀ ਹੈ, ਜਿੱਥੇ ਅਪਾਰਦਰਸ਼ੀ ਬੈਕਗ੍ਰਾਊਂਡ ਅਨੁਮਾਨਯੋਗ ਨਤੀਜੇ ਦਿੰਦਾ ਹੈ।

7. ਸਥਿਰਤਾ: ਇਸਨੂੰ ਬਹੁਤ ਵਾਰ ਨਾ ਬਦਲੋ

ਇੱਕ ਫੈਵੀਕਨ ਦੁਹਰਾਓ ਰਾਹੀਂ ਪਛਾਣ ਬਣਾਉਂਦਾ ਹੈ। ਇਸਨੂੰ ਵਾਰ-ਵਾਰ ਬਦਲਣ ਨਾਲ ਵਰਤੋਂਕਾਰਾਂ ਨੂੰ ਦੁਬਾਰਾ ਸਿੱਖਣਾ ਪੈਂਦਾ ਹੈ ਕਿ ਕਿਹੜਾ ਟੈਬ ਤੁਹਾਡਾ ਹੈ, ਅਤੇ ਇਸ ਨਾਲ ਤਕਨੀਕੀ ਮੁਸ਼ਕਲਾਂ ਵੀ ਪੈਦਾ ਹੁੰਦੀਆਂ ਹਨ। ਬ੍ਰਾਊਜ਼ਰ ਫੈਵੀਕਨਾਂ ਨੂੰ ਬਹੁਤ ਜ਼ਿਆਦਾ ਕੈਸ਼ ਕਰਦੇ ਹਨ, ਅਤੇ Google ਉਨ੍ਹਾਂ ਨੂੰ ਤੁਹਾਡੇ ਪੰਨਿਆਂ ਤੋਂ ਵੱਖਰਾ ਫੈਚ ਕਰਕੇ ਸਟੋਰ ਕਰਦਾ ਹੈ, ਇਸ ਲਈ ਨਵੇਂ ਆਈਕਨ ਨੂੰ ਖੋਜ ਨਤੀਜਿਆਂ ਵਿੱਚ ਦਿਖਾਈ ਦੇਣ ਵਿੱਚ ਦਿਨ ਜਾਂ ਹਫ਼ਤੇ ਲੱਗ ਸਕਦੇ ਹਨ। Google ਇਹ ਵੀ ਮੰਗ ਕਰਦਾ ਹੈ ਕਿ ਫੈਵੀਕਨ ਦਾ URL ਸਥਿਰ ਹੋਵੇ, ਆਈਕਨ ਦਾ ਆਕਾਰ 48 ਪਿਕਸਲ ਦਾ ਗੁਣਜ ਹੋਵੇ (48x48, 96x96, ਆਦਿ), ਅਤੇ ਫਾਈਲ ਅਜਿਹੀ ਹੋਵੇ ਜਿਸਨੂੰ ਉਹ ਕ੍ਰੌਲ ਕਰ ਸਕੇ (robots.txt ਦੁਆਰਾ ਬਲਾਕ ਨਾ ਕੀਤੀ ਗਈ ਹੋਵੇ)। ਫੈਵੀਕਨ ਦੀ ਤਬਦੀਲੀ ਨੂੰ ਰੀਬ੍ਰਾਂਡ ਪੱਧਰ ਦਾ ਫ਼ੈਸਲਾ ਸਮਝੋ, ਨਾ ਕਿ ਮੌਸਮੀ ਸਜਾਵਟ।

8. ਨੋਟੀਫਿਕੇਸ਼ਨ ਸਥਿਤੀਆਂ ਅਤੇ ਡਾਇਨਾਮਿਕ ਫੈਵੀਕਾਨ

ਕੁਝ ਵੈੱਬ ਐਪਾਂ ਨਾ-ਪੜ੍ਹੇ ਸੁਨੇਹਿਆਂ, ਰਿਕਾਰਡਿੰਗ ਦੀ ਸਥਿਤੀ ਜਾਂ ਕਿਸੇ ਗਲਤੀ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਫੈਵੀਕਾਨ ਬਦਲ ਦਿੰਦੀਆਂ ਹਨ। ਜੇ ਇਹ ਚੰਗੀ ਤਰ੍ਹਾਂ ਕੀਤਾ ਜਾਵੇ ਤਾਂ ਮਦਦਗਾਰ ਹੁੰਦਾ ਹੈ; ਪਰ ਹੱਦ ਤੋਂ ਵੱਧ ਕੀਤਾ ਜਾਵੇ ਤਾਂ ਖਿਝ ਪੈਦਾ ਕਰਦਾ ਹੈ।

• ਛੋਟਾ ਬੈਜ ਵਰਤੋ (ਇੱਕ ਬਿੰਦੀ ਜਾਂ ਛੋਟੀ ਗਿਣਤੀ) ਜੋ ਕਿਸੇ ਕੋਨੇ ਵਿੱਚ ਹੋਵੇ, ਪੂਰੀ ਡਿਜ਼ਾਈਨ ਬਦਲਣ ਦੀ ਬਜਾਏ। ਮੂਲ ਆਈਕਨ ਪਛਾਣਨਯੋਗ ਰਹਿਣਾ ਚਾਹੀਦਾ ਹੈ।
• ਇਸਨੂੰ ਘੱਟ ਵਰਤੋ। ਬੈਜ ਸਿਰਫ਼ ਉਨ੍ਹਾਂ ਘਟਨਾਵਾਂ ਲਈ ਰੱਖੋ ਜਿਨ੍ਹਾਂ ਲਈ ਵਰਤੋਂਕਾਰ ਦੀ ਕਾਰਵਾਈ ਲੋੜੀਂਦੀ ਹੈ। ਆਈਕਨ ਨੂੰ ਲਗਾਤਾਰ ਐਨੀਮੇਟ ਨਾ ਕਰੋ।
• ਅੰਕਾਂ ਦੀ ਸੀਮਾ ਰੱਖੋ। 16x16 ਆਕਾਰ ਵਿੱਚ ਸਿਰਫ਼ ਇੱਕ ਜਾਂ ਦੋ ਅੰਕ ਹੀ ਪੜ੍ਹੇ ਜਾ ਸਕਦੇ ਹਨ; "137" ਦੀ ਥਾਂ "9+" ਜਾਂ ਸਾਦੀ ਬਿੰਦੀ ਦਿਖਾਓ।
• ਤੁਰੰਤ ਰੀਸੈੱਟ ਕਰੋ ਜਦੋਂ ਵਰਤੋਂਕਾਰ ਉਸ ਚੀਜ਼ ਨੂੰ ਸੰਭਾਲ ਲਵੇ, ਅਤੇ ਡਿਫੌਲਟ ਆਈਕਨ ਮੁੜ ਬਹਾਲ ਕਰੋ।
• ਸਿਰਫ਼ ਰੰਗ 'ਤੇ ਨਿਰਭਰ ਨਾ ਕਰੋ। ਲਾਲ ਬਿੰਦੀ ਦੇ ਨਾਲ ਪੰਨੇ ਦਾ ਸਿਰਲੇਖ ਵੀ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ, ਜਿਵੇਂ "(3) Inbox", ਤਾਂ ਜੋ ਜਾਣਕਾਰੀ ਹਰ ਕਿਸੇ ਲਈ ਉਪਲਬਧ ਹੋਵੇ।

ਡਾਇਨਾਮਿਕ ਫੈਵੀਕਾਨ ਆਮ ਤੌਰ 'ਤੇ ਕੈਨਵਸ 'ਤੇ ਬਣਾਏ ਜਾਂਦੇ ਹਨ ਅਤੇ ਆਈਕਨ ਲਿੰਕ ਐਲੀਮੈਂਟ ਦੇ href ਨੂੰ ਅੱਪਡੇਟ ਕਰਕੇ ਬਦਲੇ ਜਾਂਦੇ ਹਨ। ਅੱਪਡੇਟਾਂ ਨੂੰ ਥਰੌਟਲ ਕਰੋ, ਕਿਉਂਕਿ ਫੈਵੀਕਾਨ ਨੂੰ ਲਗਾਤਾਰ ਬਦਲਣ ਨਾਲ CPU ਦੀ ਵਰਤੋਂ ਵਧ ਸਕਦੀ ਹੈ ਅਤੇ ਵਰਤੋਂਕਾਰਾਂ ਦਾ ਧਿਆਨ ਭਟਕ ਸਕਦਾ ਹੈ।

9. ਪਰਫਾਰਮੈਂਸ

ਫੈਵਿਕਨ ਛੋਟੇ ਹੁੰਦੇ ਹਨ, ਪਰ ਫਿਰ ਵੀ ਇਹ ਅਜਿਹੀਆਂ ਰਿਕੁਐਸਟਾਂ ਹਨ ਜੋ ਮਾੜੇ ਢੰਗ ਨਾਲ ਕੀਤੀਆਂ ਜਾ ਸਕਦੀਆਂ ਹਨ।

• ਫਾਈਲਾਂ ਨੂੰ ਛੋਟਾ ਰੱਖੋ। ਇੱਕ PNG ਫੈਵਿਕਨ ਆਮ ਤੌਰ 'ਤੇ ਕੁਝ ਸੌ ਬਾਈਟਾਂ ਤੋਂ ਲੈ ਕੇ ਕੁਝ ਕਿਲੋਬਾਈਟਾਂ ਤੱਕ ਹੁੰਦਾ ਹੈ। ਇੱਕ ਸਾਦਾ SVG 1 KB ਤੋਂ ਵੀ ਘੱਟ ਹੋ ਸਕਦਾ ਹੈ।
• ਭਾਰੀ ICO ਫਾਈਲਾਂ ਤੋਂ ਬਚੋ। 16, 32 ਅਤੇ 48 ਪਿਕਸਲ ਦੀਆਂ ਤਸਵੀਰਾਂ ਵਾਲੀ ਮਲਟੀ-ਸਾਈਜ਼ ICO ਕਾਫ਼ੀ ਹੈ। 256x256 ਦੀ ਤਸਵੀਰ ਸ਼ਾਮਲ ਕਰਨ ਨਾਲ ਫਾਈਲ ਦਾ ਆਕਾਰ ਕਈ ਗੁਣਾ ਵਧ ਜਾਂਦਾ ਹੈ, ਜਦਕਿ ਬ੍ਰਾਊਜ਼ਰ ਟੈਬਾਂ ਵਿੱਚ ਇਸਦਾ ਕੋਈ ਦਿਸਣਯੋਗ ਫ਼ਾਇਦਾ ਨਹੀਂ ਹੁੰਦਾ।
• ਕੈਸ਼ਿੰਗ ਹੈਡਰ ਸੈੱਟ ਕਰੋ। ਆਈਕਨਾਂ ਨੂੰ ਲੰਮੀ Cache-Control ਮਿਆਦ ਨਾਲ ਭੇਜੋ, ਜਿਵੇਂ ਕਿ public, max-age=31536000, immutable, ਅਤੇ ਜਦੋਂ ਤੁਸੀਂ ਇਨ੍ਹਾਂ ਨੂੰ ਬਦਲੋ ਤਾਂ ਵਰਜ਼ਨ ਵਾਲਾ ਜਾਂ ਹੈਸ਼ ਵਾਲਾ ਫਾਈਲ ਨਾਮ ਵਰਤੋ।
• ਆਈਕਨਾਂ ਨੂੰ ਸਪੱਸ਼ਟ ਤੌਰ 'ਤੇ ਘੋਸ਼ਿਤ ਕਰੋ। ਬ੍ਰਾਊਜ਼ਰ ਮੂਲ ਰੂਪ ਵਿੱਚ /favicon.ico ਦੀ ਮੰਗ ਕਰਦੇ ਹਨ, ਇਸ ਲਈ ਭਾਵੇਂ ਤੁਸੀਂ ਹੋਰ ਆਈਕਨ ਘੋਸ਼ਿਤ ਕਰਦੇ ਹੋ, ਫਿਰ ਵੀ ਇੱਕ ਮੁਹੱਈਆ ਕਰੋ, ਤਾਂ ਜੋ ਤੁਹਾਡੇ ਲੌਗਾਂ ਵਿੱਚ 404 ਦਾ ਸ਼ੋਰ ਨਾ ਪਵੇ।
• ਕੰਪ੍ਰੈੱਸ ਕਰੋ। PNG ਫਾਈਲਾਂ ਨੂੰ ਲੌਸਲੈੱਸ ਆਪਟੀਮਾਈਜ਼ਰ ਵਿੱਚੋਂ ਲੰਘਾਓ, ਅਤੇ SVG ਫਾਈਲਾਂ ਨੂੰ ਮਿਨੀਫਾਈ ਕਰੋ।

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

ਜੇ ਤੁਸੀਂ ਇਹ ਸਾਰੀਆਂ ਫਾਈਲਾਂ ਇੱਕ ਸਰੋਤ ਤਸਵੀਰ ਤੋਂ ਤਿਆਰ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ MakeFav ਫੈਵਿਕਨ ਜਨਰੇਟਰ ਸਟੈਂਡਰਡ ਸੈੱਟ ਤਿਆਰ ਕਰਦਾ ਹੈ, ਅਤੇ ਡਿਵੈਲਪਰ ਪੰਨਾ ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਦੇ ਵਿਕਲਪਾਂ ਬਾਰੇ ਦੱਸਦਾ ਹੈ।

10. ਪਹੁੰਚਯੋਗਤਾ

ਫੈਵੀਕਾਨ ਦਾ ਕੋਈ alt ਟੈਕਸਟ ਨਹੀਂ ਹੁੰਦਾ ਅਤੇ ਸਕ੍ਰੀਨ ਰੀਡਰ ਇਸਨੂੰ ਬੋਲ ਕੇ ਨਹੀਂ ਦੱਸਦੇ, ਇਸ ਲਈ alt ਐਟਰੀਬਿਊਟ ਵਰਗੇ ਰਵਾਇਤੀ ਪਹੁੰਚਯੋਗਤਾ ਸਾਧਨ ਇੱਥੇ ਲਾਗੂ ਨਹੀਂ ਹੁੰਦੇ। ਜੋ ਗੱਲਾਂ ਅਸਲ ਵਿੱਚ ਮਾਇਨੇ ਰੱਖਦੀਆਂ ਹਨ:

• ਪੰਨੇ ਦਾ ਸਿਰਲੇਖ ਅਰਥ ਦੱਸਦਾ ਹੈ। ਵਿਲੱਖਣ ਅਤੇ ਵਰਣਨਾਤਮਕ <title> ਐਲੀਮੈਂਟ ਲਿਖੋ। ਸਥਿਤੀ ਦੱਸਣ ਲਈ ਕਦੇ ਵੀ ਸਿਰਫ਼ ਆਈਕਨ ਉੱਤੇ ਨਿਰਭਰ ਨਾ ਕਰੋ; ਕਿਸੇ ਵੀ ਬੈਜ ਨੂੰ ਸਿਰਲੇਖ ਵਿੱਚ ਵੀ ਦਰਸਾਓ।
• ਘੱਟ ਨਜ਼ਰ ਵਾਲੇ ਵਰਤੋਂਕਾਰਾਂ ਲਈ ਦਿੱਖ। ਉੱਚ ਕੰਟ੍ਰਾਸਟ, ਗਾੜ੍ਹਾ ਆਕਾਰ ਅਤੇ ਵੱਡਾ ਚਿੰਨ੍ਹ ਉਹਨਾਂ ਵਰਤੋਂਕਾਰਾਂ ਦੀ ਮਦਦ ਕਰਦੇ ਹਨ ਜੋ ਟੈਬਾਂ ਨੂੰ ਨਜ਼ਰ ਨਾਲ ਦੇਖਦੇ ਹਨ।
• ਰੰਗ ਤੋਂ ਸੁਤੰਤਰਤਾ। ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਸਥਿਤੀਆਂ ਵਿੱਚ ਫ਼ਰਕ ਸਿਰਫ਼ ਰੰਗਤ ਨਾਲ ਨਹੀਂ, ਸਗੋਂ ਆਕਾਰਾਂ ਜਾਂ ਅੱਖਰਾਂ ਨਾਲ ਵੀ ਦਿਖਾਈ ਦੇਵੇ।
• ਧਿਆਨ ਭਟਕਣਾ ਘੱਟ ਕਰੋ। ਝਪਕਦੇ ਜਾਂ ਐਨੀਮੇਟਡ ਫੈਵੀਕਾਨ ਤੋਂ ਬਚੋ, ਕਿਉਂਕਿ ਇਹ ਗਤੀ ਪ੍ਰਤੀ ਸੰਵੇਦਨਸ਼ੀਲ ਵਰਤੋਂਕਾਰਾਂ ਲਈ ਸਮੱਸਿਆ ਬਣ ਸਕਦੇ ਹਨ।

ਫੇਵੀਕੌਨ UX ਚੈੱਕਲਿਸਟ

ਟੈਸਟਿੰਗ ਚੈੱਕਲਿਸਟ

ਆਪਣੇ ਡਿਜ਼ਾਈਨ ਟੂਲ ਵਿੱਚ ਦਿਸਣ ਵਾਲੀ ਵੱਡੀ ਪ੍ਰੀਵਿਊ 'ਤੇ ਭਰੋਸਾ ਨਾ ਕਰੋ। ਅਸਲ ਆਈਕਨ ਨੂੰ ਅਸਲ ਹਾਲਾਤ ਵਿੱਚ ਟੈਸਟ ਕਰੋ:

1. ਕਈ ਬ੍ਰਾਊਜ਼ਰ। Chrome, Firefox, Safari ਅਤੇ Edge ਵਿੱਚ ਜਾਂਚ ਕਰੋ, ਕਿਉਂਕਿ ਹਰ ਇੱਕ ਆਈਕਨ ਅਤੇ ਆਕਾਰ ਥੋੜ੍ਹੇ ਵੱਖਰੇ ਢੰਗ ਨਾਲ ਚੁਣਦਾ ਹੈ।
2. ਲਾਈਟ ਅਤੇ ਡਾਰਕ ਮੋਡ। OS ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਦੀ ਥੀਮ ਬਦਲੋ ਅਤੇ ਹਰ ਵਾਰ ਟੈਬ ਪੱਟੀ ਨੂੰ ਧਿਆਨ ਨਾਲ ਦੇਖੋ।
3. ਰੈਟੀਨਾ ਅਤੇ ਆਮ ਡਿਸਪਲੇ। 1x ਮਾਨੀਟਰ ਅਤੇ 2x ਜਾਂ 3x ਸਕ੍ਰੀਨ 'ਤੇ ਜਾਂਚ ਕਰੋ, ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਜ਼ੂਮ ਇਨ ਕਰੋ।
4. ਬੁੱਕਮਾਰਕ ਬਾਰ। ਪੰਨੇ ਨੂੰ ਬੁੱਕਮਾਰਕ ਕਰੋ ਅਤੇ ਦੇਖੋ ਕਿ ਹੋਰ ਸਾਈਟਾਂ ਦੇ ਨਾਲ ਆਈਕਨ ਹਾਲੇ ਵੀ ਸਾਫ਼ ਪੜ੍ਹਨਯੋਗ ਹੈ ਜਾਂ ਨਹੀਂ।
5. ਬਹੁਤ ਸਾਰੀਆਂ ਟੈਬਾਂ। 20 ਟੈਬਾਂ ਖੋਲ੍ਹੋ ਅਤੇ ਦੇਖੋ ਕਿ ਕੀ ਤੁਸੀਂ ਇੱਕ ਨਜ਼ਰ ਵਿੱਚ ਆਪਣੀ ਟੈਬ ਲੱਭ ਸਕਦੇ ਹੋ।
6. Google SERP ਪ੍ਰੀਵਿਊ। ਆਈਕਨ ਦੇ ਦੁਬਾਰਾ ਕ੍ਰੌਲ ਹੋਣ ਤੋਂ ਬਾਅਦ ਇੱਕ ਮੋਬਾਈਲ ਸਰਚ ਨਤੀਜੇ ਦੀ ਜਾਂਚ ਕਰੋ। ਯਾਦ ਰੱਖੋ ਕਿ ਅੱਪਡੇਟ ਹੋਣ ਵਿੱਚ ਸਮਾਂ ਲੱਗ ਸਕਦਾ ਹੈ।
7. ਹੋਮ ਸਕ੍ਰੀਨ। ਸਾਈਟ ਨੂੰ iOS ਅਤੇ Android ਦੀਆਂ ਹੋਮ ਸਕ੍ਰੀਨਾਂ 'ਤੇ ਸ਼ਾਮਲ ਕਰੋ ਅਤੇ ਪੱਕਾ ਕਰੋ ਕਿ ਆਈਕਨ ਕੱਟਿਆ ਨਹੀਂ ਗਿਆ, ਇਸ ਦੇ ਕੋਨੇ ਕਾਲੇ ਨਹੀਂ ਹਨ ਅਤੇ ਇਹ ਆਪਣੇ ਮਾਸਕ ਦੇ ਅੰਦਰ ਬਹੁਤ ਛੋਟਾ ਨਹੀਂ ਹੈ।
8. ਤਕਨੀਕੀ ਜਾਂਚ। ਆਪਣੇ ਡੋਮੇਨ ਨੂੰ MakeFav ਫੈਵੀਕਨ ਚੈਕਰ ਵਿੱਚੋਂ ਚਲਾਓ ਤਾਂ ਜੋ ਪੁਸ਼ਟੀ ਹੋ ਸਕੇ ਕਿ ਫਾਈਲਾਂ ਮੌਜੂਦ ਹਨ, 200 ਸਟੇਟਸ ਦਿੰਦੀਆਂ ਹਨ, ਉਨ੍ਹਾਂ ਦੇ ਆਕਾਰ ਸਹੀ ਹਨ ਅਤੇ ਤੁਹਾਡੇ HTML ਵਿੱਚ ਸਹੀ ਢੰਗ ਨਾਲ ਘੋਸ਼ਿਤ ਕੀਤੀਆਂ ਗਈਆਂ ਹਨ।

ਇੱਕ ਵਿਹਾਰਕ ਵਰਕਫਲੋ

1. ਆਪਣੇ ਲੋਗੋਮਾਰਕ ਤੋਂ ਸ਼ੁਰੂ ਕਰੋ ਅਤੇ ਇਸਨੂੰ ਇੱਕ ਆਕਾਰ ਜਾਂ ਅੱਖਰ ਤੱਕ ਸਰਲ ਬਣਾਓ।
2. ਇੱਕ ਵਰਗਾਕਾਰ ਕੈਨਵਸ ਬਣਾਓ, ਜਿਸਦਾ ਬੈਕਗ੍ਰਾਊਂਡ ਠੋਸ ਰੰਗ ਦਾ ਜਾਂ ਕਿਸੇ ਆਕਾਰ ਵਾਲਾ ਹੋਵੇ ਅਤੇ ਦੋਵਾਂ ਥੀਮਾਂ ਵਿੱਚ ਠੀਕ ਦਿਸੇ।
3. 32x32 ਅਤੇ 16x16 ਆਕਾਰ ਐਕਸਪੋਰਟ ਕਰੋ ਅਤੇ ਪਿਕਸਲ ਐਡੀਟਰ ਵਿੱਚ ਛੋਟੇ ਸੰਸਕਰਣ ਨੂੰ ਹੱਥੀਂ ਸੁਧਾਰੋ।
4. ਜਨਰੇਟਰ ਨਾਲ ਪੂਰਾ ਸੈੱਟ (ICO, PNG, apple-touch-icon, ਮੈਨੀਫੈਸਟ ਆਈਕਨ) ਤਿਆਰ ਕਰੋ।
5. ਲਿੰਕ ਟੈਗ ਸ਼ਾਮਲ ਕਰੋ, ਕੈਸ਼ ਹੈਡਰ ਸੈੱਟ ਕਰੋ, ਡਿਪਲੌਏ ਕਰੋ ਅਤੇ ਚੈਕਰ ਨਾਲ ਜਾਂਚ ਕਰੋ।

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

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

ਫੈਵੀਕੋਨ ਦਾ ਆਕਾਰ ਕਿੰਨਾ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ?

ਬ੍ਰਾਊਜ਼ਰ ਟੈਬਾਂ ਲਈ 16x16 ਅਤੇ 32x32 ਆਕਾਰ ਵਿੱਚ ਡਿਜ਼ਾਈਨ ਕਰੋ (ਹਾਈ-ਡੈਨਸਿਟੀ ਡਿਸਪਲੇਅ 'ਤੇ ਬ੍ਰਾਊਜ਼ਰ 32x32 ਵਰਤਦਾ ਹੈ), iOS ਲਈ 180x180 ਦਾ apple-touch-icon ਦਿਓ, ਅਤੇ Android ਤੇ PWA ਲਈ 192x192 ਅਤੇ 512x512 ਦੀਆਂ PNG ਫਾਈਲਾਂ ਦਿਓ। Google ਖੋਜ ਨਤੀਜਿਆਂ ਲਈ ਅਜਿਹਾ ਵਰਗਾਕਾਰ ਆਈਕਨ ਵਰਤੋ ਜਿਸਦਾ ਆਕਾਰ 48 ਪਿਕਸਲ ਦਾ ਗੁਣਜ ਹੋਵੇ, ਜਿਵੇਂ 48x48 ਜਾਂ 96x96। SVG ਸਰੋਤ ਇਨ੍ਹਾਂ ਸਾਰੇ ਆਕਾਰਾਂ ਵਿੱਚ ਸਕੇਲ ਹੋ ਜਾਂਦਾ ਹੈ।

ਕੀ ਮੈਨੂੰ ਆਪਣਾ ਪੂਰਾ ਲੋਗੋ ਫੈਵੀਕੋਨ ਵਜੋਂ ਵਰਤਣਾ ਚਾਹੀਦਾ ਹੈ?

ਆਮ ਤੌਰ 'ਤੇ ਨਹੀਂ। ਵਰਡਮਾਰਕ ਵਾਲੇ ਪੂਰੇ ਲੋਗੋ ਵਰਗਾਕਾਰ 16x16 ਆਈਕਨ ਲਈ ਬਹੁਤ ਵੇਰਵੇ ਵਾਲੇ ਅਤੇ ਬਹੁਤ ਚੌੜੇ ਹੁੰਦੇ ਹਨ। ਲੋਗੋਮਾਰਕ ਜਾਂ ਇੱਕ-ਦੋ ਅੱਖਰਾਂ ਦਾ ਮੋਨੋਗ੍ਰਾਮ ਵਰਤੋ, ਅਤੇ ਇਸਨੂੰ ਸਰਲ ਬਣਾਓ ਤਾਂ ਜੋ ਬਹੁਤ ਛੋਟਾ ਹੋਣ 'ਤੇ ਵੀ ਪਛਾਣਿਆ ਜਾ ਸਕੇ।

ਮੈਂ ਫੈਵੀਕੋਨ ਨੂੰ ਡਾਰਕ ਮੋਡ ਵਿੱਚ ਕਿਵੇਂ ਕੰਮ ਕਰਵਾਵਾਂ?

ਸਭ ਤੋਂ ਸੁਰੱਖਿਅਤ ਤਰੀਕਾ ਇਹ ਹੈ ਕਿ ਆਈਕਨ ਨੂੰ ਉਸਦੀ ਆਪਣੀ ਠੋਸ ਬੈਕਗ੍ਰਾਊਂਡ ਸ਼ਕਲ ਜਾਂ ਵਿਪਰੀਤ ਰੰਗ ਦੀ ਆਊਟਲਾਈਨ ਦਿਓ, ਤਾਂ ਜੋ ਇਹ ਟੈਬ ਦੇ ਰੰਗ 'ਤੇ ਨਿਰਭਰ ਨਾ ਕਰੇ। ਬਦਲ ਵਜੋਂ, ਰੰਗ ਬਦਲਣ ਲਈ prefers-color-scheme ਮੀਡੀਆ ਕੁਇਰੀ ਵਾਲਾ SVG ਫੈਵੀਕੋਨ ਵਰਤੋ, ਅਤੇ ਜਿਹੜੇ ਬ੍ਰਾਊਜ਼ਰ SVG ਆਈਕਨਾਂ ਨੂੰ ਸਪੋਰਟ ਨਹੀਂ ਕਰਦੇ ਉਨ੍ਹਾਂ ਲਈ PNG ਜਾਂ ICO ਫਾਲਬੈਕ ਰੱਖੋ। ਹਮੇਸ਼ਾ ਲਾਈਟ ਅਤੇ ਡਾਰਕ ਦੋਵੇਂ ਥੀਮਾਂ ਵਿੱਚ ਜਾਂਚ ਕਰੋ।

ਮੇਰਾ ਨਵਾਂ ਫੈਵੀਕੋਨ ਕਿਉਂ ਨਹੀਂ ਦਿਖ ਰਿਹਾ?

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

ਕੀ ਫੈਵੀਕੋਨ 'ਤੇ ਨੋਟੀਫਿਕੇਸ਼ਨ ਬੈਜ ਦਿਖਾਉਣਾ ਚੰਗਾ ਵਿਚਾਰ ਹੈ?

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