favicon – ikonėlės puslapio viršuje, kaip ją susikurti? – Internetinių svetainių kūrimas

favicon – ikonėlės puslapio viršuje, kaip ją susikurti?

Electronic shopping development
Internetinių parduotuvių kūrimas
liepos 24, 2016
SEO
SEO kas tai ir kur ji naudojama?
liepos 24, 2016

favicon – ikonėlės puslapio viršuje, kaip ją susikurti?

favicon

Ar kada matėte paveikslėlį prie svetainės pavadinimo naršyklės lango viršuje. Jis yra šifruojamas kaip „favorite icon“, t.y. „mėgstamiausias paveikslėlis“. Paprastai tai yra mažytis, 16×16 arba 32×32 pikselių dydžio logotipas, atvaizduojamas adreso juostoje arba kortelėje, kurioje yra atidaryta svetainė, kaip pavyzdys :

favicon_4web

Ši ikonėlė yra visiškai nebūtina korektiškam svetainės veikimui, bet jis priduoda žavesio svetainės pavadinimui naršyklės skirtuke, be to pagerina lankytojo patirtį apsilankius svetainėje ir pakartotinai grįžtant į ją.

Kaip įkelti šį favicon paveikslėlį?

Daugelis naršyklių automatiškai patikrina, ar šakninėje svetainės direktorijoje (public_html) yra failas su galūne .ico, tad paprasčiausiu atveju jį galima tiesiog įkelti į serverio public_html direktoriją.

Kad korektiškai veiktų automatinis atvaizdavimas paveikslėlio pavadinimas turėtų būti favicon.ico.

Bet kitu atveju jis aprašomas <head></head> dalyje kaip <link> fragmentas:

<link rel="icon" type="image/x-icon" href="http://example.com/your_favicon.ico" />

Ši ikonėlė gali būti keliu tipų (.ico, .png, .gif):

<link rel="icon" type="image/x-icon" href="http://example.com/your_favicon.ico" />

<link rel="icon" type="image/png" href="http://example.com/your_favicon.png" />

<link rel="icon" type="image/gif" href="http://example.com/your_favicon.gif" />

Taip pat jį galite pritaikyti įvairiems naršyklių tipams:

<!-- Opera Speed Dial icon --> <link rel="icon" type="image/png" href="/speeddial-160px.png" />
<!-- Standard icon --> <link rel="icon" type="image/x-icon" href="/your_favicon.ico" />
<!-- For iPhone 4 Retina display: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png">
<!-- For iPad: --> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png">
<!-- For iPhone: --> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">

Kaip sukurti nuosavą favicon paveikslėlį?

Paveikslėlį galima susikurti naudojant bet kurią mėgstamą grafinę programą, nes tam nereikia jokių sudėtingų įrankių. Kitu atveju galima pasinaudoti specialių puslapių pagalba, pvz.:

http://www.favicon.cc arba http://favicon-generator.org.