Turinio Rinkodara

Geriausia „favicon“ diegimo svetainėje praktika

Kai jie iš pradžių buvo pristatyti, favicon paskyrė vaizdą, kuris bus rodomas, kai vartotojai išsaugo a URL adresas spartųjį klavišą savo darbalaukyje. Šiandien jūsų svetainės mėgstamiausia piktograma gali būti rodoma naršyklės skirtukuose, el. pašto programose, bendrinamuose socialiniuose tinkluose ir paieškos rezultatuose.

Favicon dabar yra būtinas prekės ženklo elementas kiekvienoje svetainėje, bet dažnai nepastebimas... jų neturėtų būti. Favicons paprastai rodomos įvairiose žiniatinklio naršyklių vietose, kad būtų lengviau atpažinti ir pažymėti svetaines. Štai keletas pagrindinių dalykų apie favicons:

  • Naršyklės skirtukai: kai naudotojai atidaro svetainę žiniatinklio naršyklėje, naršyklės skirtuke šalia puslapio pavadinimo rodoma favicon. Tai suteikia vaizdinį atidaryto skirtuko identifikatorių, todėl vartotojams lengviau rasti ir perjungti kelis skirtukus.
  • Žymės ir parankiniai: kai naudotojai pažymi arba išsaugo svetainę kaip mėgstamiausią, žymų arba parankinių meniu dažnai rodomas šalia svetainės pavadinimo. Tai padeda vartotojams greitai atpažinti ir pasiekti išsaugotas svetaines.
  • Naršyklės adreso juosta: kai kuriose naršyklėse naudotojams apsilankius svetainėje, piktograma rodoma naršyklės adreso juostoje arba „omnibox“. Taip prie svetainės URL pridedamas vaizdinis elementas.
  • Paieškos rezultatai: kai kurie paieškos varikliai gali rodyti adresynus šalia paieškos rezultatų, padedančius naudotojams lengvai identifikuoti svetaines paieškos sąrašuose.

Favicon yra mažas, ikoniškas svetainės vaizdas, kuris pagerina vartotojo patirtį suteikdamas vaizdinius svetainės identifikavimo, žymėjimo ir skirtukų valdymo žiniatinklio naršyklėse nurodymus. Tai svarbus interneto dizaino ir prekės ženklo kūrimo elementas.

Piktogramų failų tipai

Iš pradžių jiems reikėjo an ICO failą, bet jie išsivystė su daugybe platformų, galinčių rodyti PNG ir SVG failus. ICO failus galima laikyti kelių piktogramų vaizdų rinkiniu į vieną failą. Kurdami ICO failą, sukomponuojate skirtingus įvairių dydžių ir spalvų gylio piktogramų vaizdus į vieną konkrečios struktūros failą. Štai kaip veikia ICO failas:

  1. Keli piktogramų vaizdai: ICO faile paprastai yra keli skirtingų matmenų ir spalvų gylio piktogramų vaizdai. Šie vaizdai vaizduoja tą pačią piktogramą, bet yra sukurti taip, kad būtų rodomi skirtingais dydžiais neprarandant kokybės.
  2. Piktogramų katalogas: ICO faile yra piktogramų katalogas, kuriame nurodomi kiekvieno piktogramos vaizdo atributai, įskaitant jo dydį, spalvų gylį ir vietą faile.
  3. Antraštės informacija: ICO faile taip pat yra antraštės informacija, kurioje pateikiama esminė informacija apie failą, pvz., faile saugomų piktogramų vaizdų skaičius.
  4. Vaizdo duomenys: kiekvienas piktogramos vaizdas ICO faile yra saugomas kaip neapdoroti vaizdo duomenys be suspaudimo. Tai leidžia greitai pasiekti atskirus piktogramų vaizdus ir juos rodyti programine įranga.
  5. Piktogramų gavimas: Kai programai arba operacinei sistemai reikia rodyti piktogramą, susietą su failu, aplanku, nuoroda arba programa, ji gali gauti atitinkamą piktogramos vaizdą iš ICO failo pagal norimą dydį ir spalvų gylį.

ICO

Privalumai:

  • Plačiai paplitęs palaikymas: ICO yra tradicinis favicon formatas, kurį plačiai palaiko įvairios interneto naršyklės, įskaitant senesnes versijas. Tai saugus pasirinkimas norint užtikrinti suderinamumą.
  • Keli dydžiai ir spalvų gyliai: ICO failuose gali būti keli skirtingų dydžių ir spalvų gylio piktogramų vaizdai, todėl favicon bus gerai rodomas įvairiuose kontekstuose.

Trūkumai:

  • Ribotas mastelio keitimas: ICO piktogramų mastelis nėra toks geras, kaip vektoriniai formatai, tokie kaip SVG. Kai rodomi nestandartiniai dydžiai, ICO piktogramos gali pasirodyti pikseliais.

PNG

Privalumai:

  • Kompresija be nuostolių: PNG favicons siūlo glaudinimą be nuostolių ir užtikrina aukštą vaizdo kokybę naudojant mažus failų dydžius. Tai ypač naudinga ryškioms ir detalioms piktogramoms.
  • Skaidrumas: PNG palaiko alfa skaidrumą, todėl galima sukurti sudėtingus ir pusiau permatomus dizainus, kurie sklandžiai susilieja su fonu.
  • Palaikymas šiuolaikinėse naršyklėse: PNG puikiai palaiko šiuolaikinės žiniatinklio naršyklės ir siūlo gerą suderinamumą.

Trūkumai:

  • Keli failai: norint aprėpti įvairius dydžius ir skiriamąją gebą, gali tekti pateikti kelis skirtingų matmenų PNG failus, todėl gali padidėti HTTP užklausų skaičius.
  • Vektoriaus palaikymo trūkumas: PNG yra rastrinis formatas, todėl jo mastelis nėra toks grakštus, kaip vektoriniai formatai, tokie kaip SVG.

SVG

Privalumai:

  • Pagrįsta vektoriais: SVG yra vektorinis formatas, tai reiškia, kad jis gali keistis neprarandant kokybės. Tai idealiai tinka kuriant ryškias, aukštos kokybės bet kokio dydžio piktogramas.
  • Mažas failo dydis: SVG failai dažnai yra mažesni, palyginti su jų rastriniais atitikmenimis, todėl juos galima efektyviai naudoti žiniatinklyje.
  • Universalumas: SVG leidžia kurti sudėtingus ir meniškus dizainus, įskaitant kelių spalvų piktogramas, gradientus ir sudėtingas formas.
  • CSS stilius: SVG favicons gali būti lengvai formuojami naudojant CSS, todėl dizainas yra lankstesnis.

Trūkumai:

  • Naršyklių suderinamumas: Nors šiuolaikinės naršyklės palaiko SVG piktogramas, senesnėse naršyklėse palaikymas gali būti ribotas arba visai ne. Norint užtikrinti didesnį suderinamumą, būtina pateikti atsarginius formatus, pvz., ICO arba PNG.
  • sudėtingumas: SVG piktogramų kūrimas gali būti sudėtingesnis, ypač tiems, kurie nėra susipažinę su vektorinės grafikos programine įranga.

Favicon formato pasirinkimas priklauso nuo jūsų dizaino reikalavimų ir suderinamumo lygio, kurį norite pasiekti. ICO yra saugus pasirinkimas siekiant platesnio suderinamumo, PNG siūlo neprarasti kokybę ir skaidrumą, o SVG idealiai tinka mastelio keitimui ir sudėtingam dizainui, tačiau reikia atidžiai apsvarstyti naršyklės palaikymą ir atsargines galimybes. Naudodami formatų derinį, kaip parodyta toliau pateiktuose pavyzdžiuose, galite užtikrinti maksimalų svetainės mėgstamos piktogramos suderinamumą ir kokybę.

Kaip sukurti ICO failą

Mano nuomone, gana keista, kad „Adobe Illustrator“ ir „Photoshop“ pagal numatytuosius nustatymus nekuria .ICO failų (galimi papildiniai). Naudodami juos galite išvesti kiekvieną iš skirtingų vaizdo dydžių... ir sukurti juos naudodami bet kurį iš šių metodų:

  • GIMP iš esmės palaiko ICO failus. Tai nemokama atvirojo kodo platforma, prieinama visoms operacinėms sistemoms.
  • ImageMagick yra nemokama atvirojo kodo paslauga, kurią galite įkelti į savo asmeninį kompiuterį arba „Mac“, leidžiančią sujungti kelis failus į ICO failą. Komandos pavyzdys:
convert image1.png image2.png image3.png favicon.ico
  • Taip pat yra internetinių įrankių, kurie gali padėti sukurti .ICO failą, tačiau turėtumėte atidžiai pasirinkti. Daugelis keičia vieno įkelto vaizdo failo dydį ir kiekvieną blogai suspaudžia. Favicon.io yra nemokama internetinė svetainė, leidžianti įkelti ir sukurti ICO failą. Naudodami platformą visada naudokite didžiausią failo dydį ir skiriamąją gebą, nes ji automatiškai sukurs mažesnius vaizdo dydžius.

Norėsite eksperimentuoti su savo ICO failu. Paprasčiausiai sumažinus logotipo dydį iki 16 pikselių kvadrato piktogramos, jis gali tapti neatskiriamas. Netgi pamatysite, kad mūsų logotipas nėra visas, o tik M iš mūsų logotipo.

Patikrinkite savo svetainės Favicon

„Favicon“ HTML geriausia praktika

Naršyklės teikia pirmenybę adresynų pasirinkimui pagal kelis veiksnius, įskaitant formatą, dydį ir konkrečių deklaracijų buvimą. Štai kaip naršyklės paprastai nustato pirmenybę ir pasirenka mėgstamas piktogramas:

  1. Failo formato prioritetas: Naršyklės paprastai teikia pirmenybę .ico failams, kai yra, nes tai yra tradicinis favicon formatas. Jei pateikiate .ico favicon naudodami <link rel="icon" type="image/x-icon" href="favicon.ico">, jis dažnai bus viršesnis už kitus formatus.
  2. Dydžio prioritetas: naršyklės taip pat atsižvelgia į dydžio atributą, kad pasirinktų kontekstui tinkamiausią piktogramą. Jei nurodysite skirtingus .png arba .svg adresynų dydžius, naršyklė pasirinks tą, kuris geriausiai atitinka įrenginio rodymo reikalavimus.
  3. SVG „bet koks“ dydis: kai naudojate „bet kurią“ reikšmę sizes atributas SVG favicon deklaracijoje (sizes="any"), tai rodo, kad SVG gali prisitaikyti prie bet kokio dydžio. Naršyklės gali teikti pirmenybę „bet kokio“ dydžio SVG, kad užtikrintų, jog jis tinkamai pritaikytas įvairioms ekrano skyroms.
  4. Pirmenybė teikiama paskutinei deklaracijai: jei pateikiate kelias to paties formato ir dydžio favicon deklaracijas, naršyklė paprastai pasirenka paskutinę deklaraciją, kurią ji aptinka HTML. Todėl jūsų užsakymas <link> elementai svarbūs. Pirmenybė bus teikiama paskutiniam rastam.
  5. Grįžti į numatytąją piktogramą: Jei nė viena iš nurodytų mėgstamiausių piktogramų neatitinka naršyklės kriterijų arba nėra favicon deklaracijų, naršyklė gali naudoti numatytąją piktogramą (pvz., naršyklės piktogramą) arba jokios piktogramos.
  6. Vartotojo nuostatos: kai kurios naršyklės leidžia vartotojams nustatyti mėgstamiausių piktogramų nuostatas. Tokiais atvejais naudotojo pasirinkimas gali nepaisyti svetainės nurodytos mėgstamiausios piktogramos.

Jei pirmiausia pateikiate ICO favicon deklaraciją, bet norite, kad SVG būtų naudojama kaip pageidaujama favicon, ji gali ne visada veikti taip, kaip numatyta, nes kai kurios naršyklės teikia pirmenybę pirmai galiojančiai favicon deklaracijai, su kuria susiduria. Tačiau vis tiek galite užtikrinti, kad SVG būtų pageidaujama piktograma, nurodydami ją paskutinėje vietoje ir naudodami Bet koks dydžio atributas.

Štai kaip galite tai padaryti:

<!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>

Šiame pavyzdyje .ico formatas vis dar įtrauktas siekiant maksimalaus suderinamumo, tačiau SVG formatas nurodomas paskutinis su Bet koks dydžio atributas. Ši sąranka teikia didesnę pirmenybę SVG formatui, tačiau vis tiek suteikia .ico formatą kaip atsarginį variantą naršyklėms, teikiančioms jam pirmenybę. Nurodydami SVG paskutinį su Bet koks dydžio atributą, padidinate tikimybę, kad šiuolaikinės naršyklės pasirinks SVG kaip pageidaujamą favicon formatą, nes jis gali prisitaikyti prie įvairių dydžių.

Douglas Karr

Douglas Karr yra BRO OpenINSIGHTS ir įkūrėjas Martech Zone. Douglas padėjo daugybei sėkmingų MarTech pradedančiųjų įmonių, padėjo atlikti daugiau nei 5 mlrd. Douglas yra tarptautiniu mastu pripažintas skaitmeninės transformacijos ir MarTech ekspertas bei pranešėjas. Douglasas taip pat yra paskelbtas Dummie vadovo ir verslo lyderystės knygos autorius.

Susiję straipsniai

Atgal į viršų mygtukas
arti

Aptiktas skelbimų blokas

Martech Zone gali pateikti jums šį turinį nemokamai, nes gauname pajamų iš savo svetainės per pajamas iš skelbimų, filialų nuorodas ir rėmimą. Būtume dėkingi, jei peržiūrėdami mūsų svetainę pašalintumėte skelbimų blokavimo priemonę.