ستاسو د ویب پاڼې لپاره د فیویکون پلي کولو لپاره غوره تمرینونه

کله چې دوی په اصل کې معرفي شوي، د favicon یو انځور ډیزاین کړی چې ښکاره شي کله چې کاروونکو خوندي کړي URL د دوی په ډیسټاپ کې شارټ کټ. نن ورځ، ستاسو د ویب پاڼې فیویکون ممکن د براوزر ټبونو، بریښنالیک مراجعینو، د ټولنیزو رسنیو شریکولو، او د لټون پایلو کې ښکاره شي.

A favicon اوس د هرې ویب پاڼې د نښه کولو اړین عنصر دی مګر ډیری وختونه له پامه غورځول کیږي ... دوی باید نه وي. Favicons عموما په ویب براوزرونو کې په مختلفو ځایونو کې ښودل کیږي ترڅو کاروونکو سره مرسته وکړي چې ویب پاڼې وپیژني او په نښه کړي. دلته د favicons په اړه ځینې مهم ټکي دي:

• د براوزر ټبونه: کله چې کاروونکي په ویب براوزر کې ویب پاڼه پرانیزي، فیویکون د پاڼې سرلیک ته نږدې د براوزر په ټب کې ښکاره کیږي. دا د خلاص ټب لپاره یو بصری پیژندونکی چمتو کوي، د کاروونکو لپاره د څو ټبونو موندلو او بدلولو لپاره اسانه کوي.
• بک مارکونه او خوښې: کله چې کاروونکي یوه ویب پاڼه د خوښې په توګه بکمارک کوي یا خوندي کوي، فیویکون اکثرا د بک مارک یا د خوښې مینو کې د ویب پاڼې د نوم سره یوځای ښودل کیږي. دا کاروونکو سره مرسته کوي چې ژر تر ژره د دوی خوندي شوي ویب پاڼې وپیژني او لاسرسی ومومي.
• د لټونګر پته پټه: په ځینو براوزرونو کې، کله چې کاروونکي ویب پاڼې ته مراجعه کوي، فیویکون د براوزر په پته بار یا اومنی بکس کې ښودل کیږي. دا د ویب پاڼې URL ته یو بصری عنصر اضافه کوي.
• د لټون پايلې: د لټون ځینې انجنونه ممکن د لټون پایلو ته نږدې فیویکونز ښکاره کړي، د کاروونکو سره مرسته کوي په اسانۍ سره د لټون لیستونو کې ویب پاڼې وپیژني.

فیویکون د ویب پاڼې یو کوچنی، غوره نمایش دی چې د ویب براوزرونو کې د ویب پاڼې پیژندنې، بک مارک کولو، او د ټب مدیریت لپاره د بصري اشارو چمتو کولو سره د کاروونکي تجربه لوړوي. دا د ویب ډیزاین او نښه کولو مهم عنصر دی.

د آیکون فایل ډولونه

په اصل کې، دوی یو ته اړتیا درلوده ICO فایل، مګر د ډیری پلیټ فارمونو سره وده کړې چې د ښودلو وړ دي PNG او SVG فایلونه د ICO فایلونه په یوه فایل کې د ډیری آئیکون عکسونو تالیف ګڼل کیدی شي. کله چې تاسو د ICO فایل رامینځته کړئ ، تاسو د مختلف اندازې او رنګ ژورو مختلف آئیکون عکسونه د ځانګړي جوړښت سره یو واحد فایل کې تالیف کوئ. دلته د ICO فایل څنګه کار کوي:

1. ګڼ شمیر عکسونه: د ICO فایل معمولا د مختلف ابعادو او رنګ ژورو سره ډیری عکس عکسونه لري. دا عکسونه د ورته آئیکون استازیتوب کوي مګر د کیفیت له لاسه ورکولو پرته په مختلف اندازو کې ښودل شوي ډیزاین شوي.
2. د آیکون لارښود: د ICO فایل دننه، د آیکون لارښود شتون لري چې د هر عکس عکس ځانګړتیاوې مشخصوي، پشمول د هغې اندازه، د رنګ ژوروالی، او د فایل دننه موقعیت.
3. د سرلیک معلومات: د ICO فایل کې د سرلیک معلومات هم شامل دي چې د فایل په اړه اړین توضیحات وړاندې کوي، لکه په فایل کې د ذخیره شوي عکسونو شمیره.
4. د انځور ډاټا: د ICO فایل کې د هر عکس عکس د کمپریشن پرته د خام عکس ډیټا په توګه زیرمه کیږي. دا د انفرادي عکس عکسونو ته اجازه ورکوي چې ژر تر ژره لاسرسی ومومي او د سافټویر لخوا ښودل شي.
5. د عکس اخیستل: کله چې یو اپلیکیشن یا عملیاتي سیسټم د فایل، فولډر، شارټ کټ یا غوښتنلیک سره تړلی آئیکون ښکاره کولو ته اړتیا ولري، دا کولی شي د مطلوب اندازې او رنګ ژورتیا پراساس د ICO فایل څخه مناسب عکس عکس ترلاسه کړي.

د فیویکون فارمیټ انتخاب ستاسو د ډیزاین اړتیاو او د مطابقت کچې پورې اړه لري چې تاسو یې ترلاسه کول غواړئ. ICO د پراخ مطابقت لپاره یو خوندي انتخاب دی، PNG بې ګټې کیفیت او روڼتیا وړاندې کوي، او SVG د توزیع کولو او پیچلي ډیزاینونو لپاره مثالی دی مګر د براوزر مالتړ او فال بیک ته احتیاط ته اړتیا لري. د فارمیټونو د ترکیب کارول، لکه څنګه چې په لاندې مثالونو کې ښودل شوي، کولی شي ستاسو د ویب پاڼې د فیویکون لپاره اعظمي مطابقت او کیفیت ډاډمن کړي.

د ICO فایل جوړولو څرنګوالی

دا خورا عجیب دی، زما په نظر، چې Adobe Illustrator او Photoshop د ډیفالټ په واسطه د ICO فایلونه نه جوړوي (پلگ ان شتون لري). تاسو کولی شئ د دوی په کارولو سره هر یو مختلف عکس اندازې تولید کړئ ، که څه هم… او بیا یې د لاندې میتودونو څخه یوه په کارولو سره جوړ کړئ:

• GIMP په اصلي توګه د ICO فایلونو ملاتړ کوي. دا یو وړیا، د خلاصې سرچینې پلیټ فارم دی چې د ټولو عملیاتي سیسټمونو لپاره شتون لري.
• ImageMagick یو وړیا، د خلاصې سرچینې خدمت دی چې تاسو کولی شئ په خپل کمپیوټر یا ماک کې بار کړئ، تاسو ته اجازه درکوي خپل ډیری فایلونه په ICO فایل کې یوځای کړئ. بېلګه کمانډ:

convert image1.png image2.png image3.png favicon.ico

• دلته آنلاین وسیلې هم شتون لري چې کولی شي تاسو سره د .ICO فایل رامینځته کولو کې مرسته وکړي ، مګر تاسو غواړئ په احتیاط سره غوره کړئ. ډیری د یو واحد اپلوډ شوي عکس فایل اندازه کوي او هر یو په خراب ډول فشاروي. Favicon.io یو وړیا آنلاین سایټ دی چې تاسو ته اجازه درکوي خپل ICO فایل اپلوډ او جوړ کړئ. د پلیټ فارم کارولو په وخت کې تل د لوی فایل اندازه او ریزولوشن وکاروئ ، ځکه چې دا به په اوتومات ډول د کوچني عکس اندازې رامینځته کړي.

تاسو غواړئ د خپل ICO فایل سره تجربه وکړئ. په ساده ډول د خپل لوګو اندازه په یوه آیکون کې کمول چې 16px مربع وي کولی شي دا د توپیر وړ کړي. تاسو به حتی وګورئ چې زموږ ټول لوګو نه دی، یوازې M زموږ د لوګو څخه.

د خپل ویب پاڼې فیویکون وګورئ

Favicon HTML غوره کړنې

براوزر د ډیری فکتورونو پراساس د فیویکونز انتخاب ته لومړیتوب ورکوي ، پشمول د شکل ، اندازې ، او د ځانګړو اعلامیو شتون. دلته دا دي چې څنګه براوزرونه عموما لومړیتوب ورکوي او فیویکونز غوره کوي:

1. د فایل فارمیټ لومړیتوب: براوزر معمولا د .ico فایلونو ته لومړیتوب ورکوي کله چې شتون ولري، ځکه چې دا دودیز فیویکون بڼه ده. که تاسو د .ico favicon په کارولو سره چمتو کړئ <link rel="icon" type="image/x-icon" href="favicon.ico">، دا به اکثرا د نورو شکلونو په پرتله لومړیتوب ولري.
2. د اندازې لومړیتوب: براوزر د اندازې ځانګړتیا هم په پام کې نیسي ترڅو د شرایطو لپاره خورا مناسب فیویکون غوره کړي. که تاسو د .png یا .svg favicons لپاره مختلف اندازې مشخص کړئ، براوزر به هغه یو غوره کړي چې د وسیلې د ښودلو اړتیاو سره غوره سمون ولري.
3. SVG "هرډول" اندازه: کله چې تاسو د "کوم" ارزښت کاروئ sizes د SVG favicon اعالمیه کې خاصیت (sizes="any")، دا په ګوته کوي چې SVG کولی شي د هرې اندازې سره سمون ولري. براوزر ممکن د "هرډول" اندازې سره SVG ته لومړیتوب ورکړي ترڅو ډاډ ترلاسه کړي چې دا د مختلف سکرین ریزولوشنونو سره د فټ کولو لپاره ښه اندازه کوي.
4. وروستۍ اعالمیه لومړیتوب لري: که تاسو د ورته شکل او اندازې سره ډیری فیویکون اعلانونه چمتو کړئ، براوزر عموما هغه وروستۍ اعلامیه غوره کوي چې په HTML کې ورسره مخ کیږي. له همدې امله، ستاسو د امر <link> عناصر مهم دي. وروستی موندل به لومړیتوب ورکړل شي.
5. ډیفالټ آیکون ته بیرته راستون شو: که چیرې کوم مشخص شوي فیویکون د براوزر له معیارونو سره سمون ونلري یا د فیویکون اعلانات شتون ونلري، براوزر ممکن یو ډیفالټ آئیکون وکاروي (د مثال په توګه د براوزر آئیکون) یا هیڅ عکس نه.
6. د کارن غوره توبونه: ځینې براوزرونه کاروونکو ته اجازه ورکوي چې خپل غوره توبونه د favicons لپاره تنظیم کړي. د کارونکي انتخاب ممکن په داسې حاالتو کې د ویب پاڼې ټاکل شوي فیویکون له پامه غورځوي.

که تاسو لومړی د ICO favicon اعالمیه لیست کړئ مګر غواړئ چې SVG د غوره شوي فیویکون په توګه وکارول شي ، دا ممکن تل د هدف په توګه کار ونکړي ځکه چې ځینې براوزرونه د لومړي باوري فاویکون اعالمیې ته لومړیتوب ورکوي چې دوی ورسره مخ کیږي. په هرصورت، تاسو لاهم کولی شئ ډاډ ترلاسه کړئ چې SVG غوره شوی فیویکون دی د وروستي مشخص کولو او په کارولو سره کوم اندازه خاصیت.

دلته دا څنګه کولای شي:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Website Title</title>

    <!-- Favicon Declarations -->

    <!-- .ico Format (for maximum compatibility) -->
    <link rel="icon" type="image/x-icon" href="favicon.ico">

    <!-- .png Format (for modern browsers) -->
    <link rel="icon" type="image/png" href="favicon.png" sizes="32x32">

    <!-- .svg Format (preferred) -->
    <link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any">

    <!-- Alternative Text for Accessibility -->
    <link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any" alt="Your Website Favicon">

    <!-- Additional Sizes (optional) -->
    <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
    <link rel="icon" type="image/png" href="favicon-48x48.png" sizes="48x48">

    <!-- End of Favicon Declarations -->

    <!-- Your other meta tags, styles, and scripts go here -->

</head>
<body>
    <!-- Your website content goes here -->
</body>
</html>

په دې مثال کې، د .ico بڼه لاهم د اعظمي مطابقت لپاره شامله ده، مګر د SVG بڼه د وروستي سره مشخص شوې. کوم اندازه خاصیت. دا ترتیب د SVG فارمیټ ته لوړ لومړیتوب ورکوي پداسې حال کې چې لاهم د .ico بڼه د براوزرونو لپاره د فال بیک په توګه چمتو کوي چې ورته لومړیتوب ورکوي. د وروستي سره د SVG مشخص کولو سره کوم د اندازې ځانګړتیا، تاسو احتمال زیاتوي چې عصري براوزر به SVG د غوره فیویکون بڼه په توګه غوره کړي، ځکه چې دا د مختلفو اندازو سره سمون کولی شي.