Generator favikona

Pretvorite jedan PNG, JPG ili SVG u favicon.ico i sve veličine ikona koje su potrebne vašem web-mjestu, zapakirane u ZIP.

Nekvadratna slika

Cijela slika ostaje vidljiva, centrirana s praznim prostorom oko nje.

Pozadina

Prozirna pozadina odgovara karticama preglednika; za ikone početnog zaslona iPhonea sigurnija je pozadina u boji.

Vaš paket ikona

Vaš favicon i paket ikona pojavit će se ovdje.

Spremno. Dodajte PNG, JPG ili SVG za početak.

Vaša se slika pretvara u ikone lokalno u vašem pregledniku. Ništa se ne prenosi na BroBroGo.

Česta pitanja

Koje se datoteke nalaze u paketu ikona?

favicon.ico s verzijama od 16, 32 i 48 piksela unutar datoteke, PNG ikone od 16, 32, 180, 192 i 512 piksela te site.webmanifest koji navodi velike ikone. Ako krenete od SVG-a, uključen je i sam vektorski format. Jedan ZIP sadrži sve.

Koje veličine treba biti moja izvorna slika?

SVG je idealan — svaka se ikona iscrtava iz vektora, pa čak i na 16 piksela ostaje oštra. Za PNG ili JPG krenite s najmanje 512 × 512; manje slike se povećavaju i mogu izgledati mutno.

Treba li pozadina biti prozirna ili u boji?

Ikone kartica izgledaju dobro kada su prozirne. Međutim, početni zasloni iPhonea i iPada prozirna područja prikazuju crnom bojom — ako postoji mogućnost da korisnici dodaju vaše web-mjesto na svoj početni zaslon, odaberite boju pozadine.

Što se događa sa slikom koja nije kvadratnog oblika?

Ikone su kvadratne, ali vaša slika nikada se ne rasteže. Prema zadanim postavkama centrirana je s praznim prostorom oko nje; prebacite na "Ispuni (obreži)" kako biste umjesto toga odrezali duže rubove.

Kamo idu datoteke na mojem web-mjestu?

Prenesite ih u korijensku mapu svog web-mjesta tako da favicon.ico bude dostupan na adresi /favicon.ico, a zatim kopirajte generirane retke u <head> svojih stranica. Preglednici sami odabiru pravu veličinu.

Napisao i pregledao urednički tim BroBroGo.Zadnje ažuriranje:

Kako radi Generator favikona

Alat Generator favikona omogućuje vam da jednu sliku koju priložite pretvorite u cijelu kolekciju ikona prilagođenih različitim potrebama vašeg web-mjesta. Ovaj proces obuhvaća izradu ikona za kartice preglednika, Apple touch ikona te ikona za progresivne web-aplikacije (PWA). Nakon što alat obradi vašu sliku, sve generirane ikone pakiraju se u jednu ZIP datoteku spremnu za preuzimanje, a sustav vam ujedno priprema i potreban HTML kod koji jednostavno kopirate i umetnete u zaglavlje svog web-mjesta.

Tijekom učitavanja slike, alat prikazuje njezinu širinu i visinu u formatu "{w} × {h} px". Za izradu ikona možete koristiti jednu sliku u formatu PNG, JPG ili SVG, s ograničenjem veličine datoteke do 50 MB.

Prilagodba nekvadratnih slika i pozadine

Sve ikone koje ovaj alat generira uvijek su kvadratnog oblika. Ako vaša izvorna slika nije kvadratna, alat nudi dvije opcije za prilagodbu oblika:

  • Prilagodi (s rubom): Cijela slika ostaje vidljiva i centrirana, dok se oko nje dodaje prazan prostor (odnosno rub) kako bi se dobio kvadrat. Ovo je ujedno i zadana postavka alata.
  • Ispuni (obreži): Slika u potpunosti ispunjava kvadratni oblik, a svi rubovi koji prelaze te granice automatski se obrezuju.

Osim prilagodbe oblika, možete definirati i pozadinu svojih ikona:

  • Prozirno: Ikone se generiraju bez pozadinske boje, što je ujedno i zadana postavka alata. Prozirna pozadina idealna je za klasične kartice preglednika.
  • Boja: Možete odabrati točno određenu boju pozadine. Korištenje pozadine u boji preporučuje se za ikone namijenjene početnom zaslonu iPhone uređaja, jer se prozirni dijelovi na tim uređajima automatski prikazuju crnom bojom.

Sadržaj generiranog paketa ikona

Kada pokrenete generiranje, vaš paket ikona u ZIP datoteci sadrži sljedeće elemente:

  • favicon.ico: Klasična ikona koja u jednoj datoteci sadrži verzije u veličinama od 16, 32 i 48 piksela.
  • PNG ikone: Ikone u točno definiranim veličinama od 16, 32, 180, 192 i 512 piksela.
  • site.webmanifest: Mala tekstualna datoteka koja sadrži popis velikih ikona i pomaže uređajima da ih lakše lociraju.
  • Vektorska datoteka: Ako je vaša početna slika bila u SVG formatu, sam vektor se također uključuje u paket, što jamči savršenu oštrinu ikone na bilo kojoj veličini.

Uz datoteke, alat generira i HTML kod koji je potrebno kopirati i zalijepiti unutar <head> oznake na vašim web-stranicama kako bi preglednici ispravno prepoznali i učitali ikone.

Pravila za odabir izvorne slike i rješavanje pogrešaka

Kako biste osigurali maksimalnu kvalitetu svojih ikona, važno je pridržavati se preporuka za izvorne datoteke:

  • Ako koristite PNG ili JPG formate, preporučuje se da slika ima rezoluciju od najmanje 512 × 512 piksela. Korištenje manjih slika uzrokovat će njihovo povećavanje (upscaling), zbog čega velike generirane ikone mogu izgledati mutno.
  • Korištenje SVG formata osigurava da će sve ikone biti iscrtane iz vektora i ostati potpuno oštre, čak i na najmanjim veličinama poput 16 piksela.

Tijekom rada s alatom možete naići na sljedeće poruke o pogreškama i upozorenja:

  • "Ovu datoteku nije moguće otvoriti kao sliku. Možda je oštećena, prazna ili uopće nije slika." – Pojavljuje se ako datoteka ima neispravan format ili je oštećena.
  • "Ovaj SVG nije moguće pročitati. Provjerite je li datoteka valjan SVG dokument." – Javlja se ako učitani SVG sadrži greške u strukturi.
  • "Podržane su samo PNG, JPG i SVG slike." – Prikazuje se ako pokušate učitati format koji alat ne podržava.
  • "Ova datoteka je veća od 50 MB. Koristite manju izvornu sliku." – Upozorenje o prekoračenju maksimalne dopuštene veličine datoteke.
  • "Najprije odaberite PNG, JPG ili SVG sliku." – Pojavljuje se ako pokušate pokrenuti generiranje bez prethodno odabrane datoteke.
  • "Mali izvor ({w} × {h} px): velike ikone mogu izgledati mutno. Za najbolje rezultate koristite 512 × 512 ili više — ili SVG." – Upozorenje koje vas obavještava da je učitana slika premale rezolucije.
  • "Generiranje nije uspjelo. Pokušajte s drugom slikom." – Opća pogreška ako sustav ne uspije dovršiti proces pretvorbe.

Privatnost i lokalna obrada podataka

Korištenje ovog alata u potpunosti je sigurno s aspekta zaštite privatnosti. Vaša se slika pretvara u ikone lokalno, izravno u vašem web-pregledniku. Tijekom tog procesa ništa se ne prenosi na poslužitelje BroBroGo.

Često postavljana pitanja (FAQ)

Koje se datoteke nalaze u paketu ikona?

U ZIP paketu dobit ćete datoteku favicon.ico (s verzijama od 16, 32 i 48 piksela), PNG ikone u veličinama od 16, 32, 180, 192 i 512 piksela te datoteku site.webmanifest koja popisuje velike ikone. Ako ste kao izvor koristili SVG, u paketu će se nalaziti i sam vektorski format.

Koje veličine treba biti moja izvorna slika?

Najbolji izbor je SVG jer se svaka ikona iscrtava iz vektora i ostaje oštra na svim veličinama. Ako koristite PNG ili JPG, preporučuje se krenuti s rezolucijom od najmanje 512 × 512 piksela; manje slike morat će se povećati, zbog čega mogu izgledati mutno.

Treba li pozadina biti prozirna ili u boji?

Prozirna pozadina odlično funkcionira za kartice preglednika. Međutim, ako postoji mogućnost da korisnici dodaju vaše web-mjesto na početni zaslon iPhonea ili iPada, preporučuje se odabrati boju pozadine jer ti uređaji prozirne dijelove prikazuju crnom bojom.

Što se događa sa slikom koja nije kvadratnog oblika?

Ikone su uvijek kvadratne, ali vaša se slika neće rastegnuti. Prema zadanim postavkama slika se centrira uz dodavanje praznog prostora oko nje. Ako želite ukloniti rubove i ispuniti kvadrat, možete odabrati opciju "Ispuni (obreži)" koja će odrezati dijelove slike koji prelaze granice kvadrata.

Kamo idu datoteke na mojem web-mjestu?

Sve generirane datoteke iz ZIP paketa trebate prenijeti u korijensku mapu svog web-mjesta tako da datoteka favicon.ico bude dostupna izravno na adresi /favicon.ico. Nakon toga, kopirajte generirane HTML retke koda unutar <head> oznake na svakoj stranici vašeg web-mjesta. Preglednici će sami prepoznati i odabrati odgovarajuću veličinu ikone.

Promjena veličine slikaPromijenite veličinu slika prema pikselima, postotku ili gotovim predlošcima — pojedinačno ili skupno.Obrezivanje slikaObrežite, rotirajte i preokrenite sliku u bilo koji oblik — slobodni pravokutnik, zaključani omjer ili čisti krug.Kompresor slikaSmanjite JPEG, PNG i WebP datoteke u svom pregledniku, uz istu veličinu u pikselima.Vodeni žig na slikamaPostavite tekstualni ili slikovni vodeni žig na jednu fotografiju ili cijelu seriju odjednom.Pretvarač formata slikaPretvorite JPG, PNG, WebP, HEIC i AVIF slike lokalno u svom pregledniku.Pretvarač slika u Base64Povucite sliku kako biste dobili njezin Base64 data URI ili zalijepite Base64 za pregled i preuzimanje slike.AI generator alt tekstaPretvorite bilo koju sliku u jasan, SEO prilagođen alt tekst — uredite formulaciju, a zatim je kopirajte.Pretvarač bojaPretvorite boje između formata HEX, RGB, HSL, HSV, CMYK i LAB — uredite bilo koje polje i ostala se ažuriraju u hodu.