Programim dhe zhvillim, javascript, python, php, html

Cila mënyrë është më e mirë për të shtuar ikonën e faqes në internet në shfletues?

Vërej se ka shumë mënyra për të shtuar ikonat e faqes në internet. Për shkak të shumëllojshmërisë së pajisjeve dhe sistemeve, ka edhe formate shumë të ndryshme për të shtuar ikonën. Pra, si mund t'i plotësoj të gjitha kërkesat e tyre? Cila është zgjidhja më e sigurt?

Për shembull:

Metoda e parë:

<link rel="shortcut icon" href="img/favicon.ico">

Metoda e dytë:

<link rel="icon" type="image/vnd.microsoft.icon" href="img/favicon.ico" />

Metoda e tretë:

  <link rel="apple-touch-icon" href="img/touch-icon-iphone.png">
  <link rel="apple-touch-icon" sizes="76x76" href="img/touch-icon-ipad.png">
  <link rel="apple-touch-icon" sizes="120x120" href="img/touch-icon-iphone-retina.png">
  <link rel="apple-touch-icon" sizes="152x152" href="img/touch-icon-ipad-retina.png">

Kuptova që metoda e tretë është shtimi i ikonës në ekranin fillestar të pajisjeve Apple. Dhe skedari ico është një format skedari që ruan madhësi të ndryshme ikonash.

Pra, nëse përdor metodën tre (mënyra e Apple), a merr të njëjtin efekt si dy të tjerat? Cilat janë marrëdhëniet midis këtyre tre metodave? Nëse i bashkonim, çfarë do të ndodhte? Si ndikojnë njëri-tjetrin?

ios icons favicon
21.03.2015

Përgjigjet:


1

Këto nuk janë marrëdhënie një-për-një midis shfletuesve dhe ikonave. Sidoqoftë, lista e mëposhtme jep një pasqyrë të mirë të temës:

  • Shfletuesit e vjetër të desktopit (p.sh. versionet e vjetra të IE): favicon.ico, deklaruar me <link rel="shortcut icon" href="/favicon.ico">
  • Shfletuesit modernë të desktopit (p.sh. Chrome i fundit): Ikona PNG 16x16, e deklaruar me <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">. Megjithatë, shfletuesit modernë mund të merren me trashëgiminë favicon.ico, kështu që kjo nuk është një kërkesë strikte.
  • Safari me Mac OS Yosemite: Ikona e Apple Touch, e deklaruar me <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
  • iPhone dhe iPad: disa ikona Apple Touch, nga 57x57 (gjeneratat e para të iPhone) deri në 180x180 (iOS 8, d.m.th. iPhone 6 dhe iPad i fundit), të deklaruara me <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
  • Android Chrome, para M39 / Android 5 / Lollipop: Ikona PNG 192x192, e deklaruar me <link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">. Ai përdor gjithashtu ikonën Apple Touch si ikonën e faqeshënuesit.
  • Android Chrome M39+ / Android 5 / Lollipop: deri në 6 ikona të deklaruara në një manifest, të deklaruara me <link rel="manifest" href="/manifest.json">. Ai përdor gjithashtu ikonën Apple Touch si ikonën e faqeshënuesit.
  • IE 10 / Windows 8: një ikonë 144x144, e deklaruar me <meta name="msapplication-TileImage" content="/mstile-144x144.png">
  • IE 11 / Windows 8.1: deri në 4 ikona deklaruar në një manifest, deklaruar me <meta name="msapplication-config" content="/browserconfig.xml">
  • Bregu nga Opera: një ikonë PNG 228x228, e deklaruar me <link rel="icon" type="image/png" href="/favicon-228x228.png" sizes="228x228">
  • Google TV: një ikonë PNG 96x96, e deklaruar me <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
  • ... Shfletuesi Yandex, etj.

Përveç sasisë së madhe të ikonave, ekziston edhe një problem dizajni. Gracka më e zakonshme është transparenca. Faviconët janë shpesh transparentë, gjë që është në rregull. Megjithatë, iOS e ndalon atë dhe i mbush rajonet transparente me të zezë. Për një shembull të kësaj, krahasoni ikonën e prekjes SO dhe çfarë në fakt e merrni kur shtoni SO në ekranin bazë të iPhone/iPad-it tuaj. Pra, është e rëndësishme të mbani në mend dizajnin, jo thjesht të ndryshoni madhësinë e figurës suaj kryesore verbërisht.

Për këto arsye, ju këshilloj të përdorni këtë gjenerues favicon. Ai gjeneron të gjitha ikonat e kërkuara që ju nevojiten për të mbështetur të gjitha platformat kryesore dhe gjithashtu ju lejon të dizajnoni platformë ikona-për-platformë. Zbulimi i plotë: Unë jam autori i këtij shërbimi.

22.03.2015
  • Wow, ky është një shërbim i mrekullueshëm dhe shumë më i mirë se rezultati i kërkimit në Google në faqen e parë! E vleresoj me te vertete! Unë mendoj se çdo web designer duhet të dijë për këtë faqe! 22.03.2015

    • 2

    Metoda 1 është më e thjeshta, metoda 2 është për versionet më të vjetra të Internet Explorer dhe, siç thoni ju, Metoda 3 është për pajisjet Apple.

    Ju duhet të jeni në gjendje të përdorni të tre për mbështetje maksimale. Ata do të plotësojnë njëri-tjetrin, me pajisje secila duke përdorur atë përkatëse dhe duke injoruar të tjerët.

    Shikoni Favicon në Wikipedia për më shumë informacion.

    21.03.2015
    Materiale të reja
    Masterclass Coroutines: Kapitulli-3: Anulimi i korutinave dhe trajtimi i përjashtimeve.
    Mirë se vini në udhëzuesin gjithëpërfshirës mbi Kotlin Coroutines! Në këtë seri artikujsh, unë do t'ju çoj në një udhëtim magjepsës, duke filluar nga bazat dhe gradualisht duke u thelluar në..
    Faketojeni derisa ta arrini me të dhënat false
    A e gjeni ndonjëherë veten duke ndërtuar një aplikacion të ri dhe keni nevojë për të dhëna testimi që duken dhe duken më realiste ose një grup i madh të dhënash për performancën e ngarkesës...
    Si të përdorni kërkesën API në Python
    Kërkesë API në GitHub për të marrë depot e përdoruesve duke përdorur Python. Në këtë artikull, unë shpjegoj procesin hap pas hapi për të trajtuar një kërkesë API për të marrë të dhëna nga..
    Një udhëzues hap pas hapi për të zotëruar React
    Në këtë artikull, do të mësoni se si të krijoni aplikacionin React, do të mësoni se si funksionon React dhe konceptet thelbësore që duhet të dini për të ndërtuar aplikacione React. Learning..
    AI dhe Psikologjia — Pjesa 2
    Në pjesën 2 të serisë sonë të AI dhe Psikologji ne diskutojmë se si makineritë mbledhin dhe përpunojnë të dhëna për të mësuar emocione dhe ndjenja të ndryshme në mendjen e njeriut, duke ndihmuar..
    Esencialet e punës ditore të kodit tim VS
    Shtesat e mia të preferuara - Git Graph 💹 Kjo shtesë është vërtet e mahnitshme, e përdor përpara se të filloj të punoj për të kontrolluar dy herë ndryshimet dhe degët më të fundit, mund të..
    Pse Python? Zbulimi i fuqisë së gjithanshme të një gjiganti programues
    Në peizazhin gjithnjë në zhvillim të gjuhëve të programimit, Python është shfaqur si një forcë dominuese. Rritja e tij meteorike nuk është rastësi. Joshja e Python qëndron në thjeshtësinë,..