Utilia
Kategorije ▾
Jezik: hr ▾

Generator favicona

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

Izvor

Prilagodba
site.webmanifest

Kako izraditi favicon

  1. Pod Izvor odaberi Slika ili Tekst ili emoji. - Slika: povuci PNG, JPG, WebP ili SVG. Najbolje radi kvadratni logotip od najmanje 512 × 512 px. Odaberi Cijela slika da stane unutar ikone ili Ispuni i izreži da prekrije kvadrat. - Tekst ili emoji: upiši slovo, inicijale ili emoji, zatim odaberi Font, Podebljano i Boja teksta.
  2. Postavi Boja pozadine ili označi Prozirna pozadina. Odaberi Oblik (Kvadrat, Zaobljeno ili Krug) i Razmak od ruba (%) za prostor oko sadržaja.
  3. Po želji otvori site.webmanifest i unesi Naziv aplikacije (web manifest), Kratki naziv, Boja teme i URL mape s ikonama (ostavi / ako datoteke idu u korijen tvoje stranice).
  4. Klikni Generiraj favicone. Ikone se pojavljuju u stvarnoj veličini, uz lažnu karticu preglednika. Nakon toga svaka promjena ih odmah osvježava.
  5. Klikni Preuzmi ZIP, postavi datoteke na svoju stranicu, zatim Kopiraj oznake i zalijepi ih unutar <head> svojih stranica.

Što je u ZIP-u

Datoteka Veličina Koristi
favicon.ico 16, 32 i 48 px Kartice preglednika, oznake, stariji preglednici, Windows
favicon-16x16.png 16 × 16 Kartice preglednika
favicon-32x32.png 32 × 32 Kartice na zaslonima visoke gustoće, prečaci na traci zadataka
apple-touch-icon.png 180 × 180 Početni zaslon iPhonea i iPada
android-chrome-192x192.png 192 × 192 Početni zaslon Androida (web manifest)
android-chrome-512x512.png 512 × 512 Početni zasloni pri instalaciji (web manifest)
site.webmanifest — Naziv, boje i ikone stranice koja se može instalirati
favicon-tags.html — HTML oznake, za referencu

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

HTML oznake

Generirane oznake izgledaju ovako (s URL-om tvoje mape):

<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 automatski traže i /favicon.ico u korijenu tvoje domene, pa ga je dobro ondje držati čak i za stranice bez oznaka.

Savjeti za dizajn

  • Neka bude jednostavno. Pri 16 × 16 px detalji nestaju. Jedno slovo, podebljan simbol ili najjednostavnija inačica tvog logotipa najbolje se čita.
  • Provjeri pregled u stvarnoj veličini. Ikona od 16 px u lažnoj kartici je ono što posjetitelji doista vide.
  • Pazi na tamni način rada. Tamni logotip na prozirnoj pozadini može nestati u tamnim temama preglednika; pomaže obojena pozadina ili mali razmak od ruba.
  • Emoji izgledaju drukčije na svakom sustavu, 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 izrađuje sve njih iz jednog izvora.

Mogu li koristiti SVG logotip?

Da. SVG datoteke crtaju se u visokoj razlučivosti prije izrade 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 generiraj. Rezultat su pravi PNG i ICO, pa radi u svakom pregledniku.

Zašto se moj novi favicon ne prikazuje?

Preglednici agresivno pohranjuju favicone u predmemoriju. Ponovno učitaj stranicu uz brisanje predmemorije, otvori stranicu u privatnom prozoru ili dodaj inačicu u URL, na primjer /favicon.ico?v=2.

Šalje li se moja slika na poslužitelj?

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

Slični alati