Utilia
Kategorijas ▾
Valoda: lv ▾

Favicon ģenerators

Izveidojiet favicon.ico, PNG ikonas, apple-touch-icon un site.webmanifest no viena attēla vai emocijzīmes ar gataviem HTML tagiem. ZIP, bez augšupielādes.

Avots

Ietilpināšana
site.webmanifest

Kā izveidot favicon

  1. Sadaļā Avots izvēlieties Attēls vai Teksts vai emocijzīme. - Attēls: nometiet PNG, JPG, WebP vai SVG. Vislabāk der kvadrātveida logotips vismaz 512 × 512 px izmērā. Izvēlieties Viss attēls, lai to ietilpinātu ikonā, vai Aizpildīt un apgriezt, lai aizpildītu visu kvadrātu. - Teksts vai emocijzīme: ierakstiet burtu, iniciāļus vai emocijzīmi, pēc tam izvēlieties Fonts, Treknraksts un Teksta krāsa.
  2. Iestatiet Fona krāsa vai atzīmējiet Caurspīdīgs fons. Izvēlieties Forma (Kvadrāts, Noapaļots vai Aplis) un Atkāpe (%), lai ap saturu atstātu vietu.
  3. Pēc izvēles atveriet site.webmanifest, lai ievadītu Lietotnes nosaukums (web manifest), Īsais nosaukums, Motīva krāsa un Ikonu mapes URL (atstājiet /, ja faili atrodas jūsu vietnes saknē).
  4. Noklikšķiniet uz Ģenerēt favicon. Ikonas parādās īstajā izmērā blakus imitētai pārlūkprogrammas cilnei. Pēc tam katra izmaiņa tās atjaunina uzreiz.
  5. Noklikšķiniet uz Lejupielādēt ZIP, augšupielādējiet failus savā vietnē, pēc tam Kopēt tagus un ielīmējiet tos savu lapu <head>.

Kas ir ZIP arhīvā

Fails Izmērs Kam izmanto
favicon.ico 16, 32 un 48 px Pārlūkprogrammas cilnes, grāmatzīmes, vecas pārlūkprogrammas, Windows
favicon-16x16.png 16 × 16 Pārlūkprogrammas cilnes
favicon-32x32.png 32 × 32 Cilnes ekrānos ar augstu blīvumu, uzdevumjoslas saīsnes
apple-touch-icon.png 180 × 180 iPhone un iPad sākuma ekrāns
android-chrome-192x192.png 192 × 192 Android sākuma ekrāns (web manifest)
android-chrome-512x512.png 512 × 512 Instalēšanas sākuma ekrāni (web manifest)
site.webmanifest — Instalējamas vietnes nosaukums, krāsas un ikonas
favicon-tags.html — HTML tagi informācijai

ICO failā ir trīs PNG attēli – formāts, ko lasa Windows (kopš Vista) un katra mūsdienu pārlūkprogramma. Apple-touch-icon vienmēr tiek saglabāta uz vienkrāsaina fona, jo iOS caurspīdīgos pikseļus rāda melnus; ja fons ir caurspīdīgs, tiek izmantota balta krāsa.

HTML tagi

Ģenerētie tagi izskatās šādi (ar jūsu mapes 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">

Pārlūkprogrammas automātiski pieprasa arī /favicon.ico jūsu domēna saknē, tāpēc tā glabāšana tur palīdz pat lapās bez šiem tagiem.

Dizaina padomi

  • Turiet vienkārši. Pie 16 × 16 px detaļas izzūd. Vislabāk lasās viens burts, drosmīgs simbols vai vienkāršākā jūsu logotipa versija.
  • Pārbaudiet priekšskatījumu īstajā izmērā. 16 px ikona imitētajā cilnē ir tas, ko apmeklētāji patiešām redz.
  • Padomājiet par tumšo režīmu. Tumšs logotips uz caurspīdīga fona tumšajos pārlūkprogrammas motīvos var pazust; palīdz krāsains fons vai neliela atkāpe.
  • Emocijzīmes katrā sistēmā izskatās citādi, jo katra platforma tās zīmē savā stilā. PNG faili saglabā jūsu ierīces izskatu.

Biežāk uzdotie jautājumi

Kādi izmēri vajadzīgi favicon?

Praksē: favicon.ico ar 16, 32 un 48 px, 180 px apple-touch-icon un 192 un 512 px PNG web manifestam. Šis rīks izveido visus no viena avota.

Vai var izmantot SVG logotipu?

Jā. SVG faili tiek zīmēti augstā izšķirtspējā, pirms tiek izveidotas ikonas. SVG tiek attēlots kā parasts attēls, tāpēc tā skripti nekad netiek izpildīti.

Kā izveidot emocijzīmes favicon?

Izvēlieties Teksts vai emocijzīme, ierakstiet vai ielīmējiet emocijzīmi, izvēlieties fonu vai atstājiet to caurspīdīgu un ģenerējiet. Rezultāts ir īsts PNG un ICO, tāpēc tas darbojas katrā pārlūkprogrammā.

Kāpēc mans jaunais favicon neparādās?

Pārlūkprogrammas favicon kešatmiņā glabā ļoti agresīvi. Pārlādējiet lapu ar iztīrītu kešatmiņu, atveriet vietni privātajā logā vai pievienojiet URL versiju, piemēram, /favicon.ico?v=2.

Vai mans attēls tiek augšupielādēts?

Nē. Ikonas, ZIP un manifests tiek izveidoti jūsu pārlūkprogrammā; nekas nepamet jūsu ierīci.

Saistītie rīki