HTML ਵਿੱਚ ਵੈੱਬ ਸਾਈਟ ਆਇਕਾਨ ਜੋੜਨਾ ਕਿਵੇਂ?

HTML ਵਿੱਚ ਵੈੱਬ ਸਾਈਟ ਆਇਕਾਨ (Favicon) ਜੋੜਨਾ ਸਿੱਖੋ

HTML ਵਿੱਚ ਵੈੱਬ ਸਾਈਟ ਆਇਕਾਨ ਜੋੜਨਾ ਕਿਵੇਂ?

ਵੈੱਬ ਸਾਈਟ (favicon) ਇੱਕ ਛੋਟਾ ਚਿੱਤਰ ਹੈ ਜੋ ਬਰਾਉਜ਼ਰ ਟੈਬ ਵਿੱਚ ਪੰਨੇ ਦੇ ਸਿਰਲੇਖ ਦੇ ਪਾਸੇ ਦਿਖਾਈ ਦੇਣਾ ਹੈ。

ਤੁਸੀਂ ਕੋਈ ਵੀ ਪਸੰਦ ਕੀਤਾ ਹੋਇਆ ਚਿੱਤਰ ਵੈੱਬ ਸਾਈਟ ਆਇਕਾਨ ਵਜੋਂ ਵਰਤ ਸਕਦੇ ਹੋ। ਤੁਸੀਂ ਵੀ https://favicon.cc ਜਿਹੇ ਸਾਈਟਾਂ 'ਤੇ ਆਪਣੇ ਵੈੱਬ ਸਾਈਟ ਆਇਕਾਨ ਬਣਾ ਸਕਦੇ ਹੋ。

ਸੁਝਾਅ:ਵੈੱਬ ਸਾਈਟ ਆਇਕਾਨ ਇੱਕ ਛੋਟਾ ਚਿੱਤਰ ਹੈ, ਇਸ ਲਈ ਇਹ ਉੱਚ ਕੰਟਰਾਸਟ ਵਾਲਾ ਸਰਲ ਚਿੱਤਰ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ。

ਵੈੱਬ ਸਾਈਟ ਆਇਕਾਨ ਚਿੱਤਰ ਬਰਾਉਜ਼ਰ ਟੈਬ ਦੇ ਸਿਰਲੇਖ ਦੇ ਸਾਹਮਣੇ ਦਿਖਾਈ ਦੇਣਾ ਹੈ, ਜਿਵੇਂ ਹੇਠ ਵਿੱਚ ਦਿਖਾਇਆ ਗਿਆ ਹੈ:

ਵੈੱਬਸਾਈਟ ਮਾਈਕਨ ਦਾ ਉਦਾਹਰਣ

ਤੁਹਾਡੇ ਵੈੱਬ ਸਾਈਟ ਵਿੱਚ ਵੈੱਬ ਸਾਈਟ ਆਇਕਾਨ ਜੋੜਨ ਲਈ, ਤੁਹਾਡੇ ਵੈੱਬ ਸਰਵਰ ਦੇ ਮੂਲ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਆਪਣੇ ਵੈੱਬ ਸਾਈਟ ਆਇਕਾਨ ਚਿੱਤਰ ਬਚਾਓ ਜਾਂ ਮੂਲ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ images ਨਾਮ ਦਾ ਫੋਲਡਰ ਬਣਾਓ ਅਤੇ ਆਪਣੇ ਵੈੱਬ ਸਾਈਟ ਆਇਕਾਨ ਚਿੱਤਰ ਇਸ ਫੋਲਡਰ ਵਿੱਚ ਬਚਾਓ। ਵੈੱਬ ਸਾਈਟ ਆਇਕਾਨ ਚਿੱਤਰ ਦਾ ਸਭ ਤੋਂ ਆਮ ਨਾਮ "favicon.ico"。

ਅਗਲੇ, "index.html" ਫਾਈਲ ਵਿੱਚ <title> ਇਲੈਕਟ੍ਰੌਨਿਕ ਤੱਤ ਦੇ ਬਾਅਦ ਇੱਕ <link> ਇਲੈਕਟ੍ਰੌਨਿਕ ਤੱਤ, ਜਿਵੇਂ ਕਿ ਹੇਠ ਵਿੱਚ ਦਿਖਾਇਆ ਗਿਆ ਹੈ:

<!DOCTYPE html>
<html>
<head>
  <title>My Page Title</title>
  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਹੁਣ, "index.html" ਫਾਈਲ ਬਚਾਓ ਅਤੇ ਬਰਾਉਜ਼ਰ ਵਿੱਚ ਮੁੜ ਲੋਡ ਕਰੋ। ਤੁਹਾਡਾ ਬਰਾਉਜ਼ਰ ਟੈਬ ਹੁਣ ਪੰਨੇ ਦੇ ਸਿਰਲੇਖ ਦੇ ਸਾਹਮਣੇ ਤੁਹਾਡੇ ਵੈੱਬ ਸਾਈਟ ਦਾ ਆਇਕਾਨ ਦਿਖਾਈ ਦੇਣਾ ਹੈ。