Utilia
Kategooriad ▾
Keel: et ▾

Favicon-generaator

Loo ühest pildist või emojist favicon.ico, PNG-ikoonid, apple-touch-icon ja site.webmanifest koos valmis HTML-siltidega. ZIP-allalaadimine, üleslaadimist pole.

Allikas

Sobitus
site.webmanifest

Kuidas favicon luua

  1. Vali jaotises Allikas Pilt või Tekst või emoji. - Pilt: lohista sisse PNG, JPG, WebP või SVG. Parim on ruudukujuline logo vähemalt 512 × 512 px. Vali Terve pilt, et see ikooni sisse mahutada, või Täida ja lõika, et ruut täielikult katta. - Tekst või emoji: sisesta täht, initsiaalid või emoji, seejärel vali Font, Paks ja Teksti värv.
  2. Määra Taustavärv või märgi Läbipaistev taust. Vali Kuju (Ruut, Ümardatud või Ring) ja Ääris (%), et sisu ümber ruumi jätta.
  3. Soovi korral ava site.webmanifest, et sisestada Rakenduse nimi (veebimanifest), Lühinimi, Teemavärv ja Ikoonide kausta URL (jäta /, kui failid lähevad sinu saidi juurkausta).
  4. Klõpsa Loo faviconid. Ikoonid ilmuvad päris suuruses, brauseri näidisvahekaardi kõrvale. Pärast seda uuendab iga muudatus neid kohe.
  5. Klõpsa Laadi ZIP alla, lae failid oma saidile, seejärel Kopeeri sildid ja kleebi need oma lehtede elementi <head>.

Mis on ZIP-is

Fail Suurus Kasutaja
favicon.ico 16, 32 ja 48 px Brauseri vahekaardid, järjehoidjad, vanad brauserid, Windows
favicon-16x16.png 16 × 16 Brauseri vahekaardid
favicon-32x32.png 32 × 32 Vahekaardid suure tihedusega ekraanidel, tegumiriba otseteed
apple-touch-icon.png 180 × 180 iPhone’i ja iPadi avaekraan
android-chrome-192x192.png 192 × 192 Androidi avaekraan (veebimanifest)
android-chrome-512x512.png 512 × 512 Paigalduse käivituskuvad (veebimanifest)
site.webmanifest — Installitava saidi nimi, värvid ja ikoonid
favicon-tags.html — HTML-sildid, teadmiseks

ICO-fail sisaldab kolme PNG-pilti, mis on vorming, mida loevad Windows (alates Vistast) ja kõik praegused brauserid. Apple-touch-icon salvestatakse alati ühtlasel taustal, sest iOS näitab läbipaistvaid piksleid mustana; läbipaistva tausta korral kasutatakse valget.

HTML-sildid

Loodud sildid näevad välja nii (sinu kausta URL-iga):

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

Brauserid küsivad /favicon.ico automaatselt ka sinu domeeni juurest, seega aitab selle sinna jätmine isegi lehtedel, kus silte pole.

Kujundusnäpunäiteid

  • Hoia lihtne. 16 × 16 px suuruses kaovad detailid. Parim on üks täht, julge sümbol või logo kõige lihtsam versioon.
  • Kontrolli eelvaadet päris suuruses. Näidisvahekaardil olev 16 px ikoon on see, mida külastajad tegelikult näevad.
  • Mõtle tumedale režiimile. Tume logo läbipaistval taustal võib tumedas brauseriteemas kaduda; abiks on värviline taust või väike ääris.
  • Emoji näevad igas süsteemis erinevad välja, sest iga platvorm joonistab emoji oma stiilis. PNG-failid säilitavad sinu seadme välimuse.

Korduma kippuvad küsimused

Milliseid suurusi favicon vajab?

Praktikas: favicon.ico suurustega 16, 32 ja 48 px, 180 px apple-touch-icon ning 192 ja 512 px PNG-d veebimanifesti jaoks. See tööriist loob kõik need ühest allikast.

Kas võin kasutada SVG-logo?

Jah. SVG-faile joonistatakse enne ikoonide loomist kõrge eraldusvõimega. SVG kuvatakse tavalise pildina, seega selle skripte ei käivitata kunagi.

Kuidas teha emoji favicon?

Vali Tekst või emoji, sisesta või kleebi emoji, vali taust või jäta see läbipaistvaks ja loo. Tulemus on päris PNG ja ICO, mis töötab igas brauseris.

Miks mu uus favicon ei ilmu?

Brauserid salvestavad faviconeid agressiivselt vahemällu. Lae leht uuesti vahemälu tühjendades, ava sait privaatses aknas või lisa URL-ile versioon, näiteks /favicon.ico?v=2.

Kas minu pilt laaditakse üles?

Ei. Ikoonid, ZIP ja manifest luuakse sinu brauseris; midagi ei lahku sinu seadmest.

Seotud tööriistad