Utilia
Kategorije ▾
Jezik: sr ▾

Generator favicon ikonica

Napravi favicon.ico, PNG ikonice, apple-touch-icon i site.webmanifest od jedne slike ili emodžija, sa HTML oznakama za lepljenje. ZIP, bez otpremanja.

Izvor

Uklapanje
site.webmanifest

Kako da napraviš favicon

  1. U polju Izvor izaberi Slika ili Tekst ili emoji. - Slika: prevuci PNG, JPG, WebP ili SVG. Najbolje radi kvadratni logotip od najmanje 512 × 512 px. Izaberi Cela slika da je uklopiš u ikonicu ili Popuni i iseci da prekrije kvadrat. - Tekst ili emoji: upiši slovo, inicijale ili emoji, pa izaberi Font, Podebljano i Boja teksta.
  2. Postavi Boja pozadine ili označi Providna pozadina. Izaberi Oblik (Kvadrat, Zaobljeno ili Krug) i Margina (%) da ostaviš prostor oko sadržaja.
  3. Po želji otvori site.webmanifest da uneseš Naziv aplikacije (veb manifest), Kratak naziv, Boja teme i URL fascikle sa ikonicama (ostavi / ako fajlovi idu u koren tvog sajta).
  4. Klikni Generiši favicon ikonice. Ikonice se pojavljuju u stvarnoj veličini, pored lažne kartice pregledača. Posle toga svaka promena ih odmah ažurira.
  5. Klikni Preuzmi ZIP, otpremi fajlove na svoj sajt, pa Kopiraj oznake i nalepi ih unutar <head> svojih stranica.

Šta je u ZIP-u

Fajl Veličina Koristi
favicon.ico 16, 32 i 48 px Kartice pregledača, obeleživači, stari pregledači, Windows
favicon-16x16.png 16 × 16 Kartice pregledača
favicon-32x32.png 32 × 32 Kartice na ekranima velike gustine, prečice na traci zadataka
apple-touch-icon.png 180 × 180 Početni ekran iPhone-a i iPad-a
android-chrome-192x192.png 192 × 192 Početni ekran Android-a (veb manifest)
android-chrome-512x512.png 512 × 512 Ekrani dobrodošlice pri instalaciji (veb manifest)
site.webmanifest — Naziv, boje i ikonice sajta koji može da se instalira
favicon-tags.html — HTML oznake, radi pregleda

ICO fajl sadrži tri PNG slike, format koji čitaju Windows (od Viste) i svaki aktuelni pregledač. Apple-touch-icon se uvek čuva na punoj pozadini, jer iOS providne piksele prikazuje kao crne; kod providne pozadine koristi se bela.

HTML oznake

Generisane oznake izgledaju ovako (sa URL-om tvoje fascikle):

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

Pregledači takođe automatski traže /favicon.ico u korenu tvog domena, pa ga je korisno držati tamo čak i na stranicama bez oznaka.

Saveti za dizajn

  • Neka bude jednostavno. Na 16 × 16 px detalji nestaju. Jedno slovo, podebljan simbol ili najjednostavnija verzija logotipa najbolje se čita.
  • Proveri pregled u stvarnoj veličini. Ikonica od 16 px na lažnoj kartici je ono što posetioci zaista vide.
  • Misli na tamni režim. Taman logotip na providnoj pozadini može da nestane u tamnim temama pregledača; pomažu obojena pozadina ili mala margina.
  • Emoji izgledaju različito na svakom sistemu, jer svaka platforma crta emodžije u svom stilu. PNG fajlovi zadržavaju izgled tvog uređaja.

Česta pitanja

Koje veličine favicon treba da ima?

U praksi: favicon.ico sa 16, 32 i 48 px, apple-touch-icon od 180 px i PNG-ovi od 192 i 512 px za veb manifest. Ovaj alat pravi sve njih iz jednog izvora.

Mogu li da koristim SVG logotip?

Da. SVG fajlovi se crtaju u visokoj rezoluciji pre pravljenja ikonica. SVG se prikazuje kao obična slika, pa se njegove skripte nikada ne izvršavaju.

Kako da napravim emoji favicon?

Izaberi Tekst ili emoji, upiši ili nalepi emoji, izaberi pozadinu ili je ostavi providnom i generiši. Rezultat je pravi PNG i ICO, pa radi u svakom pregledaču.

Zašto se moj novi favicon ne pojavljuje?

Pregledači agresivno čuvaju favicon ikonice u kešu. Osveži stranicu uz brisanje keša, otvori sajt u privatnom prozoru ili dodaj verziju u URL, na primer /favicon.ico?v=2.

Da li se moja slika otprema?

Ne. Ikonice, ZIP i manifest prave se u tvom pregledaču; ništa ne napušta tvoj uređaj.

Srodni alati