Utilia
Kategorije ▾
Jezik: bs ▾

Generator favicona

Napravi favicon.ico, PNG ikone, apple-touch-icon i site.webmanifest iz jedne slike ili emojija, sa HTML oznakama spremnim za lijepljenje. ZIP, bez slanja.

Izvor

Uklapanje
site.webmanifest

Kako napraviti favicon

  1. U dijelu Izvor odaberi Slika ili Tekst ili emoji. - Slika: ispusti PNG, JPG, WebP ili SVG. Najbolje radi kvadratni logotip od najmanje 512 × 512 px. Odaberi Cijela slika da je smjestiš unutar ikone ili Popuni i odreži da pokrije kvadrat. - Tekst ili emoji: upiši slovo, inicijale ili emoji, pa odaberi Font, Podebljano i Boja teksta.
  2. Postavi Boja pozadine ili označi Prozirna pozadina. Odaberi Oblik (Kvadrat, Zaobljeni ili Krug) i Margina (%) da ostaviš prostora oko sadržaja.
  3. Po želji otvori site.webmanifest da upišeš Naziv aplikacije (web manifest), Kratki naziv, Boja teme i URL foldera sa ikonama (ostavi / ako datoteke idu u korijen sajta).
  4. Klikni Generiši favicone. Ikone se pojavljuju u stvarnoj veličini, pored lažne kartice preglednika. Poslije toga svaka izmjena ih odmah ažurira.
  5. Klikni Preuzmi ZIP, postavi datoteke na svoj sajt, pa Kopiraj oznake i zalijepi ih unutar <head> svojih stranica.

Šta je u ZIP-u

Datoteka Veličina Koristi
favicon.ico 16, 32 i 48 px Kartice preglednika, oznake, stari preglednici, Windows
favicon-16x16.png 16 × 16 Kartice preglednika
favicon-32x32.png 32 × 32 Kartice na ekranima velike gustine, prečice na traci zadataka
apple-touch-icon.png 180 × 180 Početni ekran iPhonea i iPada
android-chrome-192x192.png 192 × 192 Početni ekran Androida (web manifest)
android-chrome-512x512.png 512 × 512 Početni ekrani pri instalaciji (web manifest)
site.webmanifest — Naziv, boje i ikone sajta koji se može instalirati
favicon-tags.html — HTML oznake, radi podsjetnika

ICO datoteka sadrži tri PNG slike, format koji čitaju Windows (od Viste) i svi aktuelni preglednici. Apple-touch-icon se uvijek sprema na punoj pozadini, jer iOS prozirne piksele prikazuje crno; uz prozirnu pozadinu koristi se bijela.

HTML oznake

Generisane oznake izgledaju ovako (sa URL-om tvog foldera):

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

Preglednici također sami traže /favicon.ico u korijenu tvoje domene, pa ga je korisno držati tamo čak i na stranicama bez ovih oznaka.

Savjeti za dizajn

  • Neka bude jednostavno. Na 16 × 16 px detalji nestaju. Jedno slovo, podebljan simbol ili najjednostavnija verzija tvog logotipa čita se najbolje.
  • Provjeri pregled u stvarnoj veličini. Ikona od 16 px u lažnoj kartici je ono što posjetioci zaista vide.
  • Misli na tamni način rada. Tamni logotip na prozirnoj pozadini može nestati u tamnim temama preglednika; pomaže obojena pozadina ili mala margina.
  • Emoji izgledaju različito na svakom sistemu, jer svaka platforma crta emojije u vlastitom stilu. PNG datoteke zadržavaju izgled tvog uređaja.

Česta pitanja

Koje veličine treba favicon?

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

Mogu li koristiti SVG logotip?

Možeš. SVG datoteke se crtaju u visokoj rezoluciji prije pravljenja ikona. SVG se prikazuje kao obična slika, pa se njegove skripte nikada ne izvršavaju.

Kako napraviti emoji favicon?

Odaberi Tekst ili emoji, upiši ili zalijepi emoji, odaberi pozadinu ili je ostavi prozirnom i generiši. Rezultat su pravi PNG i ICO, pa radi u svakom pregledniku.

Zašto se moj novi favicon ne prikazuje?

Preglednici agresivno keširaju favicone. Ponovo učitaj stranicu uz brisanje keša, otvori sajt u privatnom prozoru ili dodaj verziju u URL, na primjer /favicon.ico?v=2.

Šalje li se moja slika na server?

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

Srodni alati