Kas yra favicon? Pilnas naudojimo gidas

Favicon’as yra nedidelis vaizdas ar simbolis, kuris atsiranda naršyklės skirtukų juostoje prieš svetainės pavadinimą arba URL adresą. Tai yra svarbus dizaino elementas, kuris padeda suteikti unikalų ir profesionalų įspūdį svetainei ar programėlei.
Kuriant favicon, svarbu atsižvelgti į įvairius dydžius ir formatus, kad jis tinkamai būtų pritaikytas skirtingiems įrenginiams ir naršyklėms, nes kiekviena jų gali reikalauti skirtingo dydžio paveikslėlio.

Kaip pridėti favicon HTML?

Norėdami jį įdiegti, front-end kūrėjai turi įkelti „favicon.ico“ failą į interneto serverio pagrindinį katalogą arba į sukurtą katalogą vaizdams. Tada savo „index.html“ faile reikia pridėti <link> elementą su atributais įdėtus tarp <head> žymės.

<link rel="icon" type="image/x-icon" href="/images/favicon.ico">

Pateikiamas pilnas pavyzdinis kodas, kaip pridėti favicon į HTML. Įterpkite nuorodas į favicon failus tarp savo HTML puslapio <head> žymos, naudodami <link> elementus. Pavyzdyje <link> elementas pridedamas tiesiai po <title></title>.


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

Kur galima rasti favicon?

Norint geriau suprasti favicon panaudojimą, čia yra keletas vietų, kuriose dažnai galima pamatyti ICO paveikslėlius ir kitus favicon formatus savo naršyklėje ar išmaniuosiuose įrenginiuose:

Naršyklės skirtuko kairėje;
Naršyklės istorijoje;
Paieškos juostos;
Programų juostos;
Naršyklės istorijos meniu;
Žymių meniu;
Užduočių juostos sutrumpinimų piktogramos.

Kokio dydžio turėtų būti favicon’as?

Dizaineriams pasirinkti tinkamą ICO dydį gali būti sudėtinga, nes variantų yra daug. Lentelėje matysite visus favicon dydžius ir paaiškinimus, kokiems tikslams jie tinkami. Geriausias favikonas turėtų būti aiškus ir paprastas, kad jį būtų lengva atpažinti.

Favicon dydis (pikseliais)	Naudojimas
16×16	Įvairioms naršyklėms
32×32	Užduočių juostos piktogramoms
48×48	„Chrome“ naršyklei
76×76	„iPad“ namų ekrano favikono dydis
96×96	Darbalaukio sutrumpinimų piktogramoms; gali būti naudojamas „Chrome“
120×120	Tipinis „ICO“ dydis „iPhone“
128×128	„Chrome“ interneto parduotuvėje
144×144	„Chrome“ naršyklei
152×152	„iPad“
167×167	„iPad“ su „Retina“ ekranu
180×180	,,Apple“ lietimo piktogramoms ir „iPhone“ „Retina“
192×192	Rekomenduojamas internetinės programėlės aprašo žymėjimui pagal „Google“ kūrėjus
196×196	„Chrome“ namų ekrano piktograma „Android“ įrenginiuose
228×228	„Opera Coast“ naršyklei
256×256	„Chrome“ naršyklei
300×300	,,Squarespace“
384×384	„Chrome“ naršyklei
512×512	„WordPress“

Chrome naršyklės favicon dydžiai

Į Chrome naršyklę rekomenduojamas favicon dydis yra 192×192 pikseliai. Populiariausi favicon dydžiai Chrome naršyklei:

48×48
96×96
144×144
192×192
256×256
384×384
512×512

Safari naršyklės favicon dydžiai

Plačiai naudojama naršyklė „Safari“ nurodo favicon dydžius, kad jie būtų rodomi skirtinguose įrenginiuose. Rekomenduojami favicon dydžiai „Apple“ įrenginiams:

macOS – 32×32;
iPhone favikono dydis – 120×120;
iPad favikono matmenys – 152×152;
iPad Retina favikono dydis – 167×167;
iPhone Retina favikono dydis – 180×180;

Favicon formatas

Dauguma modernių naršyklių palaiko visus favicon failų tipus. Pagrindiniai favicon formatai:

Naršyklė	ICO	PNG	GIF	JPEG	SVG
Chrome	+	+	+	+	+
Safari	+	+	+	+	+
Opera	+	+	+	+	+
Edge	+	+	+	+	+
Firefox	+	+	+	+	+

Kodėl favicon.ico yra geriausias?

Dizaineriai ir programuotojai gali naudoti įvairius favicon formatus ir failų tipus, tačiau vis tiek privalo sukurti .ico failą. Tai yra dėl to, kad daugelio naršyklių numatytasis paveikslėlio tipas vis dar yra .ico. Tai reiškia, kad kai įkeliate favicon, naršyklė pirmiausiai automatiškai ištrauks .ico formatą iš pagrindinio katalogo. Tik tada, kai rankiniu būdu bus nurodyti kiti failų tipai, jie bus įkelti. Favicon.ico formato paveikslėliai taip pat suteikia tam tikrų privalumų įkrovimo greičio atžvilgiu. Tai reiškia, kad naudojant .ico formatą, favicon’as gali būti greičiau įkeltas ir rodomas vartotojams.

Failų rinkinys, skirtas favicon’ui

Jums reikia turėti iš viso 5 piktogramas ir JSON failą (manifest.webmanifest).
Naršyklės naudojimui HTML:


<link rel="icon" href="/favicon.ico" sizes="any"><!-- 32×32 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">
Ir jūsų svetainės programos (web app) manifeste:
// manifest.webmanifest
{
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}

Trumpa Favicon.ico istorija

Favicon.ico pradėtas naudoti 1999 m. kovo mėn. kartu su „Internet Explorer 5“ naršykle. Tai buvo pirmoji piktograma, rodoma šalia URL adresų naršyklėse. Su laiku naršyklės pradėjo palaikyti ir kitus piktogramų formatus, tokius kaip PNG, o „Apple“ pristatė aukštesnės raiškos favicon palaikymą po „iPhone“ pristatymo 2008 metais, kurio formatas buvo pritaikytas mobiliesiems įrenginiams. HTML5 pradėjo daugybinių favicon dydžių standartą, atitinkantį didelės raiškos ekranus ir įvairias platformas. Šiandien favicon’as yra neatsiejama interneto svetainių ir programų dalis.