Utilia
Kategorijos ▾
Kalba: lt ▾

Favicon generatorius

Sukurk favicon.ico, PNG piktogramas, apple-touch-icon ir site.webmanifest iš vieno vaizdo ar jaustuko, su paruoštomis HTML žymomis. ZIP, be įkėlimo.

Šaltinis

Talpinimas
site.webmanifest

Kaip sukurti favicon

  1. Skiltyje Šaltinis pasirink Vaizdas arba Tekstas arba jaustukas. - Vaizdas: nutempk PNG, JPG, WebP ar SVG failą. Geriausiai tinka kvadratinis logotipas, bent 512 × 512 px. Pasirink Visas vaizdas, jei nori, kad jis tilptų piktogramoje, arba Užpildyti ir apkirpti, jei nori uždengti visą kvadratą. - Tekstas arba jaustukas: įrašyk raidę, inicialus ar jaustuką, tada pasirink Šriftas, Pusjuodis ir Teksto spalva.
  2. Nustatyk Fono spalva arba pažymėk Skaidrus fonas. Pasirink Forma (Kvadratas, Suapvalinta ar Apskritimas) ir Tarpas nuo krašto (%), kad aplink turinį liktų laisvos vietos.
  3. Jei nori, atverk site.webmanifest ir įvesk Programos pavadinimas (web manifest), Trumpas pavadinimas, Temos spalva ir Piktogramų aplanko URL (palik /, jei failai bus svetainės šakninėje direktorijoje).
  4. Spustelėk Generuoti favicon. Piktogramos pasirodo tikru dydžiu šalia imituoto naršyklės skirtuko. Po to kiekvienas pakeitimas atnaujina jas iš karto.
  5. Spustelėk Atsisiųsti ZIP, įkelk failus į savo svetainę, tada paspausk Kopijuoti žymas ir įklijuok jas į savo puslapių <head>.

Kas yra ZIP archyve

Failas Dydis Kur naudojamas
favicon.ico 16, 32 ir 48 px Naršyklių skirtukai, žymės, senos naršyklės, „Windows“
favicon-16x16.png 16 × 16 Naršyklių skirtukai
favicon-32x32.png 32 × 32 Skirtukai didelio tankio ekranuose, užduočių juostos nuorodos
apple-touch-icon.png 180 × 180 „iPhone“ ir „iPad“ pagrindinis ekranas
android-chrome-192x192.png 192 × 192 „Android“ pagrindinis ekranas (web manifest)
android-chrome-512x512.png 512 × 512 Diegimo pradžios ekranai (web manifest)
site.webmanifest — Įdiegiamos svetainės pavadinimas, spalvos ir piktogramos
favicon-tags.html — HTML žymos, skirtos peržiūrai

ICO faile yra trys PNG vaizdai – šį formatą skaito „Windows“ (nuo „Vista“) ir visos dabartinės naršyklės. Apple-touch-icon visada išsaugomas vientisame fone, nes „iOS“ skaidrius pikselius rodo juodus; kai fonas skaidrus, naudojama balta spalva.

HTML žymos

Sugeneruotos žymos atrodo taip (su tavo aplanko URL):

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

Naršyklės /favicon.ico taip pat automatiškai užklausia tavo domeno šaknyje, todėl laikyti jį ten naudinga net puslapiuose be žymų.

Dizaino patarimai

  • Padaryk paprastai. 16 × 16 px dydžio detalės dingsta. Geriausiai skaitoma viena raidė, ryškus simbolis ar supaprastinta logotipo versija.
  • Patikrink peržiūrą tikru dydžiu. 16 px piktograma imituotame skirtuke – tai, ką iš tikrųjų mato lankytojai.
  • Nepamiršk tamsiosios temos. Tamsus logotipas ant skaidraus fono tamsiose naršyklės temose gali išnykti; padeda spalvotas fonas arba nedidelis tarpas nuo krašto.
  • Jaustukai skirtingose sistemose atrodo skirtingai, nes kiekviena platforma juos piešia savo stiliumi. PNG failuose išlieka tavo įrenginio vaizdas.

Dažnai užduodami klausimai

Kokių dydžių reikia favicon?

Praktiškai: favicon.ico su 16, 32 ir 48 px, 180 px apple-touch-icon ir 192 bei 512 px PNG web manifest failui. Šis įrankis visus juos sukuria iš vieno šaltinio.

Ar galiu naudoti SVG logotipą?

Taip. SVG failai prieš kuriant piktogramas nupiešiami didele skyra. SVG rodomas kaip paprastas vaizdas, todėl jo skriptai niekada nepaleidžiami.

Kaip sukurti jaustuko favicon?

Pasirink Tekstas arba jaustukas, įrašyk ar įklijuok jaustuką, pasirink foną arba palik skaidrų ir spustelėk Generuoti favicon. Rezultatas – tikri PNG ir ICO failai, todėl jie veikia visose naršyklėse.

Kodėl nematyti mano naujo favicon?

Naršyklės favicon agresyviai talpina. Perkrauk puslapį išvalius talpyklą, atidaryk svetainę privačiame lange arba prie URL pridėk versiją, pavyzdžiui, /favicon.ico?v=2.

Ar mano vaizdas įkeliamas į serverį?

Ne. Piktogramos, ZIP archyvas ir manifestas kuriami tavo naršyklėje; niekas neišeina iš tavo įrenginio.

Susiję įrankiai