Besplatni pretvarač

Favicon Generator

Generirajte favicon datoteke u više veličina (16x16 do 512x512) iz bilo koje slike. Besplatno, trenutno i u potpunosti radi u vašem pregledniku.

Ovdje povucite i ispustite sliku

Podržava PNG, JPG, SVG, WebP. Maksimalno 10 MB.

Ili

O ovom alatu

Favicon je mala ikona koja se pojavljuje u karticama preglednika, oznakama i popisima povijesti. Izvorni favicon — 16×16 ICO datoteka na /favicon.ico — proširen je u složen skup ikona različitih veličina za različite platforme: 16×16 i 32×32 za kartice preglednika, 180×180 za početne zaslone iOS-a, 192×192 i 512×512 za Android i različite veličine za Windows pločice. Proizvodnja svega toga iz jedne izvorne slike ono je što radi moderni generator favicona.

Ovaj alat uzima jednu izvornu sliku visoke razlučivosti (obično kvadratni logotip) i generira cijeli skup sredstava favicon plus HTML oznake veza potrebne za referencu na njih. Izlaz uključuje ICO, više PNG-ova i manifest.json za progresivne metapodatke web-aplikacije. Ispustite rezultirajuće datoteke u korijen svoje stranice i referencirajte ih putem generiranog HTML-a.

Sva se obrada odvija u vašem pregledniku. Nema prijenosa, nema API poziva, nema ograničenja brzine. Izlaz radi na svakom modernom pregledniku i operativnom sustavu koji prikazuje favikone.

Zašto generirati Favicon

Stranice bez favikona izgledaju nedovršeno. Kartice preglednika prikazuju generičku ikonu; knjižne oznake nemaju vizualni identifikator; stranica se čini manje profesionalnom. Dodavanje odgovarajućeg skupa favicona korak je lakiranja s malim naporom i visokim učinkom koji ukazuje na pozornost posvećenu detaljima.

Moderni zahtjevi za favicon narasli su izvan /favicon.ico. Ikone početnog zaslona iOS-a, ikone Android Chromea, ikone Windows pločica i varijante tamnog načina rada koriste različite datoteke. Generiranje svih iz jednog izvora osigurava dosljedno brendiranje bez ručnog upravljanja svakom datotekom.

Kako koristiti

Prenesi izvornu sliku, dobij puni skup favicona.

  1. Prenesi izvornu sliku: Koristite kvadratnu sliku veličine najmanje 512×512 piksela. PNG je poželjan (podrška za transparentnost); SVG je također prihvaćen. Izvori veće razlučivosti proizvode oštrije manje ikone.
  2. Konfigurirajte opcije platforme: Po potrebi omogućite iOS, Android, Windows i PWA izlaze. Zadane postavke proizvode standardni skup koji je potreban većini web-mjesta.
  3. Prilagodite boje i temu: Odaberite boje tema za Windows pločice i PWA pozdravne zaslone. Uskladite svoj identitet robne marke.
  4. Preuzmite i implementirajte: Spremite generirani zip. Postavite datoteke u korijen svoje stranice i dodajte generirane HTML oznake veza u svoj <head>. HTML referencira svaku ikonu u odgovarajućoj veličini.

Uobičajeni slučajevi upotrebe

Tehnički detalji

Potpuni moderni skup favicona: favicon.ico (16+32+48 multi-rezolucija), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png, mstile-150x150.png. Plus site.webmanifest za PWA, browserconfig.xml za Windows.

Svaki PNG generira se smanjenjem uzorkovanja na temelju platna iz izvora. ICO je konstruiran u JavaScriptu kombiniranjem verzija 16/32/48 u ICO format s više razlučivosti korištenjem zapisa DataView.

HTML oznake veza referenciraju svaku datoteku s odgovarajućim atributima rel i sizes. Generator ih proizvodi kao isječak spreman za kopiranje i lijepljenje za <head> vašeg web-mjesta.

Najbolji primjeri iz prakse

Često postavljana pitanja

Koji format slike trebam učitati?
PNG s prozirnom pozadinom najbolje funkcionira. Koristite kvadratnu sliku od najmanje 512 x 512 piksela kako bi alat mogao smanjiti veličinu bez gubitka kvalitete. SVG također radi dobro jer se skalira na bilo koju veličinu.
Koje veličine ovo stvara?
16x16 (kartica preglednika), 32x32 (kartica preglednika @2x), 48x48 (Windows programska traka), 180x180 (ikona Apple Touch), 192x192 (Android početni zaslon), 512x512 (PWA početni zaslon). ICO datoteka sadrži veličine od 16, 32 i 48 piksela.
Gdje mogu staviti favicon datoteke?
Postavite favicon.ico u korijenski direktorij vaše web stranice. Ostale PNG veličine idu u vašu javnu mapu ili bilo koji drugi dostupni put. Dodajte HTML oznake veze u svoj <head> odjeljak koji pokazuje na svaku lokaciju datoteke.
Zašto se moj favicon ne ažurira u pregledniku?
Preglednici agresivno predmemoriraju favikone. Očistite predmemoriju preglednika, pokušajte otvoriti u anonimnom prozoru ili dodajte niz upita verzije (?v=2) URL-u ikone favorita da biste prisilno osvježili.
Zašto se moj favicon ne ažurira?
Preglednici agresivno predmemoriraju favikone, ponekad danima. Prisilno osvježite brisanjem predmemorije, izravnim otvaranjem URL-a ikone ili dodavanjem parametra upita verzije oznaci veze.
Je li moja slika postavljena na poslužitelj?
Ne. Generiranje se događa u vašem pregledniku.
Trebam li koristiti SVG ili PNG?
SVG za izvor (neovisno o rezoluciji). Generator daje PNG u određenim veličinama; moderni preglednici također podržavaju SVG favicons putem veze rel=icon type=image/svg+xml.
Što je site.webmanifest?
JSON manifest za napredne web-aplikacije koji opisuje ikone, boje i druge metapodatke. Potrebno za web aplikacije koje se mogu instalirati; bezopasan za uključivanje čak i na standardnim stranicama.