Favicon generator
Favicon generator za izradu favicona iz vašeg loga: dodajte logo i dobijte cijeli set datoteka, od ikone kartice od 16 piksela do ikone aplikacije od 512, uz HTML za lijepljenje. Sve se događa u vašem pregledniku, pa se slika nikada ne učitava.
Qwyzzle
Summit Roasters
Fox EsportsIspustite logo ovdje
PNG, JPG, WebP ili SVG. Najbolje kvadratna slika, od 512 px.
Izrađuje se u vašem pregledniku. Slika se nikada ne učitava.
Što je favicon i gdje se pojavljuje
Favicon je mala kvadratna ikona koja predstavlja vašu web stranicu. Naziv je kratica od engleskog „favorite icon”: prvi preglednik koji ga je prikazivao stavljao ga je uz oznake, koje je zvao Favoriti.
Vidite ga na karticama preglednika, uz naslov stranice, širokog 16 piksela ili 32 na oštrijem zaslonu. Označava vašu stranicu i u oznakama i povijesti pregledavanja. Kada netko spremi stranicu na početni zaslon telefona, postaje ikona aplikacije. A Google ga prikazuje uz naziv vaše stranice u rezultatima pretraživanja.
Posvuda ima isti zadatak: da ga se prepozna na prvi pogled među drugim ikonama.
Zašto jedan favicon postaje set datoteka
Svako od tih mjesta pojavilo se u drugo vrijeme i traži vlastitu datoteku. Favicon generator iznad izrađuje ih sve iz jedne slike.
Kartice preglednika, oznake i povijest koriste favicon.ico, jednu datoteku s verzijama od 16, 32 i 48 piksela unutra. To je najstariji format: kada stranica ne navodi ikonu, preglednici i dalje traže favicon.ico u korijenskoj mapi stranice.
Ako krenete od SVG-a, dobit ćete i favicon.svg, koji umjesto toga koriste preglednici što znaju crtati SVG ikone. Sastoji se od oblika, a ne piksela, pa ostaje oštar na svakom zaslonu.
iPhone i iPad koriste apple-touch-icon.png, kvadrat od 180 piksela, kada netko doda vašu stranicu na početni zaslon. iPhone prozirna područja ispunjava crnom, pa ova ikona uvijek dobiva punu pozadinu: vašu boju ili bijelu ako ste odabrali prozirnu.
Android telefoni i stranice instalirane iz preglednika kao aplikacije koriste icon-192.png i icon-512.png. Pronalaze ih preko site.webmanifest, male tekstualne datoteke koja preglednicima govori naziv vaše stranice, ako ste ga upisali u alat, i gdje su veće ikone.
Zasebne PNG datoteke od 16 do 48 piksela rezerva su za servise koji traže PNG. Za rezultate pretraživanja Google čita poveznice na ikone u HTML-u vaše početne stranice.
Kako dodati favicon datoteke na stranicu
Ako vi ili vaš programer uređujete datoteke stranice, trebaju dva koraka.
Prvo raspakirajte preuzimanje i stavite datoteke u korijensku mapu stranice, gornju mapu u kojoj je početna stranica. Za provjeru dodajte /favicon.ico na adresu stranice: ikona bi se trebala otvoriti.
Zatim zalijepite HTML retke iz README datoteke (alat ih također prikazuje) u head svojih stranica: dio na vrhu HTML-a u kojem je naslov stranice. Tu je po redak za ICO datoteku, Apple touch ikonu i manifest, te za SVG ako ga imate.
Obično sve stranice dijele jedan predložak, pa ih lijepite samo jednom. Prvo izbrišite starije retke s ikonama, inače preglednici mogu i dalje birati staru ikonu.
Na alatu za izradu web stranica oba koraka možete preskočiti: učitajte icon-512.png u postavku ikone stranice, a alat sam dodaje HTML.
Kako logo učiniti čitljivim na 16 piksela
Na 16 puta 16 cijela vaša ikona ima 256 sićušnih kvadratića boje. Većina logotipa nije nacrtana za to.
Krenite od simbola, a ne od naziva: stisnite naziv od osam slova u 16 piksela i svako slovo dobije dva piksela širine. Nemate simbol? Uzmite prvo slovo, veliko i debelo. Debela slova podnose smanjivanje mnogo dulje od tankih.
Zatim uklonite detalje. Vrlo tanke linije i mali razmaci stapaju se s okolinom, a slogan postaje mrlja.
Važno je svijetlo naspram tamnog, a ne same boje. Kartice su svijetle ili tamne ovisno o temi, a tamnoplava ikona nestaje na tamnoj traci kartica. Ako je vaš znak taman, dajte mu svijetlu pozadinu u alatu, ili obrnuto.
Razmak, prostor između loga i ruba kvadrata, kompromis je. Previše, i logo se smanji na kartici. Premalo, i iPhone, koji zaobljuje ikone na početnom zaslonu, odreže kutove loga.
Na kraju pogledajte preglede svijetle i tamne kartice iznad u stvarnoj veličini, bez povećavanja. Naša besplatna provjera kvalitete loga ide dalje: smanjuje logo na 32 piksela i mjeri koliko je detalja preživjelo.
Kada znak treba ponovno nacrtati umjesto smanjiti
Ponekad ništa ne pomaže. U detaljnoj ilustraciji ili 3D izgledu građenom na sjenčanju detalji su sam dizajn, a na 16 piksela nestanu. Ovaj alat može promijeniti veličinu loga, ali ga ne može ponovno nacrtati.
To ne znači da je logo loš, samo da je napravljen za veća mjesta. Namjerno nacrtajte malu verziju: pojednostavljeni simbol ili inicijal u fontu brenda. Zadržite boje i nešto od oblika, i ljudi će povezati jedno s drugim. Mi bismo svaki put odabrali jasan inicijal umjesto mutne minijature.
Trebate novi znak? Naš AI generator loga dizajnira ga iz naziva brenda, uz kratak opis ako želite. Logotipi iz naših predložaka za logo imaju simbol kao zasebnu datoteku kada ga imaju, a svaki logo koji kupite kod nas sadrži svoje favicon datoteke.
Pitanja o favicon ikonama
Besplatan je, bez registracije i bez vodenog žiga. I slika ostaje kod vas. Alat radi potpuno u vašem pregledniku: sve veličine i zip datoteka nastaju na vašem uređaju, a slika se nikada ne šalje na naše poslužitelje. Zato ga možete koristiti i za logo koji još nikome niste pokazali.
Kvadratna i barem 512 piksela sa svake strane. Najveća ikona u setu ima 512 piksela, pa se manji PNG, JPG ili WebP mora razvući, a velike ikone ispadnu mekane. Alat vam kaže kada se to dogodi. SVG nema to ograničenje: sastoji se od oblika, a ne piksela, pa ostaje oštar u svakoj veličini. Širok logo ispunjava samo tanku traku kvadrata, pa krenite od simbola ili inicijala.
Trebaju vam svi, jer različiti preglednici i telefoni traže različite datoteke, a HTML iz alata svakome kaže koju datoteku koristiti. ICO datoteku razumije svaki preglednik. PNG datoteke su za telefone i instalirane aplikacije, s rezervama u malim veličinama. SVG, koji dobivate kada krenete od SVG-a, ostaje oštar na svakom zaslonu u preglednicima koji ga podržavaju.
Najvjerojatnije preglednik prikazuje spremljenu kopiju. Preglednici čuvaju favicon ikone mnogo dulje od ostatka stranice, pa stara ikona može ostati i nakon što su nove datoteke objavljene. Pokušajte s tvrdim osvježavanjem, koje ponovno učitava stranicu bez spremljenih datoteka: Ctrl+Shift+R u Windowsima, Cmd+Shift+R na Macu (Option+Cmd+R u Safariju). Ako to ne pomogne, otvorite adresu stranice s /favicon.ico na kraju i osvježite je ili pogledajte u privatnom prozoru. Preglednici drugih ljudi s vremenom će sustići.
U postavke alata, a ne u mapu. Većina alata za izradu stranica i platformi za internetske trgovine ima postavku ikone stranice ili favicona, u koju učitate jedan kvadratni PNG. Odaberite icon-512.png, najveću datoteku u zip arhivi, da alat ima dovoljno za izradu manjih veličina. Ako postavka traži određenu veličinu, uzmite odgovarajuću datoteku. Alati sami dodaju HTML, pa README možete preskočiti.
Google uoči novi favicon kada njegov indeksni robot, program koji za Google čita web stranice, sljedeći put posjeti vašu početnu stranicu. Za to nema stalnog rasporeda. Google traži kvadratnu sliku i poveznicu na ikonu u HTML-u početne stranice, pa provjerite jesu li oboje na mjestu. Nakon toga, što će i kada prikazati odlučuje Google, pa mu dajte vremena.
Još nemate logo? Krenite od njega.
Dizajnirajte ga našim AI generatorom loga ili iz predloška u besplatnoj izradi loga. Svaki logo koji preuzmete s DepthLogo već dolazi sa svojim favicon ikonama.