Kako napraviti favicon u svim veličinama iz jedne slike? (besplatno, bez uploada)

Imaš logo, a tvojoj web stranici treba favicon: ona sitna slika u kartici preglednika. Lako, dok ne saznaš da preglednici, iPhone, Android i Windows svi žele svoju veličinu i svoju datoteku. GetPlugzz Generator Favicona sve to napravi iz jedne slike. Ubaciš logo, pritisneš jedan gumb i dobiješ favicon.ico, Apple touch icon, Android ikone, Windows tile, manifest datoteku i kod koji zalijepiš u svoju stranicu. Radi u tvom pregledniku, pa nema računa ni vodenog žiga i ništa se ne uploada.

Kako napraviti favicon u svim veličinama iz jedne slike?

Otvori Generator Favicona i napravi ovo:

1. Dodaj sliku. Ubaci logo u okvir ili klikni da ga odabereš. Najbolje radi kvadratna slika od najmanje 512 × 512 piksela. Sve ostalo se izrezuje u kvadrat od sredine.
2. Provjeri pregled. Ako tvoja slika ima prozirnu pozadinu, ona ostaje, što je savršeno za logotipe. Vidjet ćeš sve veličine koje će se napraviti.
3. Preuzmi. Klikni Preuzmi Sve (ZIP) da dobiješ sve veličine, pa zalijepi prikazani kod u head svoje stranice. Za kod postoji gumb Kopiraj.

Ništa se ne mijenja ručno i ništa se ne instalira. Ako ti preglednik blokira preuzimanje, klikni Dopusti kraj adresne trake i prolazi.

Zašto jednom faviconu treba toliko veličina?

Zamisli fotomat koji istu sliku ispiše kao sitnu naljepnicu, fotografiju za putovnicu i plakat. Isto je lice, ali svako mjesto ima svoj okvir. Favicon radi isto. Tvoj se logo pojavljuje na različitim mjestima, a svako traži drukčiju veličinu:

• 16 × 16 i 32 × 32: kartica preglednika. Ona od 32 drži oštrinu na ekranima visoke razlučivosti (retina).
• 48 × 48: prečaci u Windowsima.
• 150 × 150: Windows pločica (tile).
• 180 × 180: Apple touch icon, koji iPhone i iPad koriste kad netko doda tvoju stranicu na početni zaslon.
• 192 × 192 i 512 × 512: Android, za početni zaslon i splash zaslon (koriste se i za web aplikacije).

Što je u ZIP datoteci?

Alat napravi sve ovo umjesto tebe i spakira u jednu datoteku:

• favicon.ico: klasična ikona u karticama preglednika. To je prava datoteka s više veličina, s verzijama 16, 32 i 48 unutra.
• favicon-16x16.png, favicon-32x32.png i favicon-48x48.png: male veličine.
• apple-touch-icon.png: ikona za iPhone i iPad.
• android-chrome-192x192.png i android-chrome-512x512.png: ikone za Android.
• mstile-150x150.png: Windows pločica.
• site.webmanifest: govori preglednicima koje ikone koristiti.
• head-snippet.html: kod za lijepljenje, spremljen kao datoteka.

Kamo idu datoteke?

Uploadaj datoteke u glavnu mapu svoje web stranice, a kod iz alata zalijepi u head svojih stranica. Taj kod govori pregledniku gdje da nađe svaku ikonu. Dva mala savjeta: otvori site.webmanifest i upiši naziv svoje stranice, jer je ostavljen prazan, i promijeni boju teme ako želiš nešto drugo osim bijele.

Nemaš još web-stranicu na koju ćeš ih prenijeti? Naš vodič za pokretanje prve web-stranice pokriva domenu, hosting i stranice. Ako radije ne bi počinjao od prazne stranice, AI website builder (plaćeni link) tvrtke Bluehost uključuje hosting, pa bi imao gdje staviti datoteke.

Koja slika radi najbolje?

• Kvadratna i velika. Kreni od najmanje 512 × 512 piksela. Alat je smanji na sve veličine, pa ti ništa ne moraš ručno mijenjati.
• Centrirana. Slika koja nije kvadratna izrezuje se u kvadrat od sredine, pa važan dio drži u sredini.
• Prozirna je u redu. Ako logo ima prozirnu pozadinu, ikone je zadržavaju.
• Jednostavno pobjeđuje. Na 16 piksela ima jako malo mjesta, pa se jasan oblik ili jedno slovo bolje čita od detaljnog crteža.

Jedna stvar koju trebaš znati: jedna slika odjednom

Generator napravi sve veličine iz jedne slike odjednom. Ne obrađuje više različitih logotipa u jednom prolazu. Ako imaš još jednu stranicu, klikni Odaberi drugu sliku i pokreni ponovno, što traje par sekundi.

Dobro je znati prije nego počneš

Česta pitanja