Utilia
Kategórie ▾
Jazyk: sk ▾

Generátor favicon

Vytvor favicon.ico, ikony PNG, apple-touch-icon a site.webmanifest z jedného obrázka alebo emoji, s hotovými značkami HTML. Stiahnutie ZIP, bez nahrávania.

Zdroj

Prispôsobenie
site.webmanifest

Ako vytvoriť favicon

  1. V časti Zdroj vyber Obrázok alebo Text alebo emoji. - Obrázok: presuň sem PNG, JPG, WebP alebo SVG. Najlepšie funguje štvorcové logo s rozmermi aspoň 512 × 512 px. Voľba Celý obrázok ho vloží do ikony celý, Vyplniť a orezať ním vyplní štvorec. - Text alebo emoji: napíš písmeno, iniciálky alebo emoji a vyber Písmo, Tučné a Farba textu.
  2. Nastav Farba pozadia alebo zaškrtni Priehľadné pozadie. Vyber Tvar (Štvorec, Zaoblený alebo Kruh) a Odsadenie (%), aby okolo obsahu zostalo miesto.
  3. Voliteľne otvor site.webmanifest a zadaj Názov aplikácie (web manifest), Krátky názov, Farba témy a URL priečinka s ikonami (nechaj /, ak súbory pôjdu do koreňového adresára webu).
  4. Klikni na Generovať favicony. Ikony sa zobrazia v skutočnej veľkosti vedľa maketovej karty prehliadača. Potom ich každá zmena aktualizuje okamžite.
  5. Klikni na Stiahnuť ZIP, nahraj súbory na svoj web, potom Kopírovať značky a vlož ich do <head> svojich stránok.

Čo je v archíve ZIP

Súbor Veľkosť Použitie
favicon.ico 16, 32 a 48 px Karty prehliadača, záložky, staré prehliadače, Windows
favicon-16x16.png 16 × 16 Karty prehliadača
favicon-32x32.png 32 × 32 Karty na displejoch s vysokou hustotou, odkazy na paneli úloh
apple-touch-icon.png 180 × 180 Domovská obrazovka iPhonu a iPadu
android-chrome-192x192.png 192 × 192 Domovská obrazovka Androidu (web manifest)
android-chrome-512x512.png 512 × 512 Úvodné obrazovky pri inštalácii (web manifest)
site.webmanifest — Názov, farby a ikony inštalovateľného webu
favicon-tags.html — Značky HTML na ukážku

Súbor ICO obsahuje tri obrázky PNG, formát, ktorý čítajú Windows (od Visty) aj každý súčasný prehliadač. Súbor apple-touch-icon sa vždy ukladá na plnom pozadí, pretože iOS zobrazuje priehľadné pixely ako čierne; pri priehľadnom pozadí sa použije biela.

Značky HTML

Vygenerované značky vyzerajú takto (s URL tvojho priečinka):

<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">

Prehliadače si súbor /favicon.ico tiež automaticky vyžiadajú v koreňovom adresári tvojej domény, takže jeho ponechanie tam pomáha aj na stránkach bez týchto značiek.

Tipy na dizajn

  • Drž to jednoduché. Pri 16 × 16 px detaily zanikajú. Najlepšie sa číta jedno písmeno, výrazný symbol alebo najjednoduchšia verzia tvojho loga.
  • Skontroluj náhľad v skutočnej veľkosti. Ikona 16 px v maketovej karte je to, čo návštevníci naozaj vidia.
  • Mysli na tmavý režim. Tmavé logo na priehľadnom pozadí môže v tmavých témach prehliadača zmiznúť; pomôže farebné pozadie alebo malé odsadenie.
  • Emoji vyzerajú na každom systéme inak, pretože každá platforma ich kreslí vo vlastnom štýle. Súbory PNG si zachovajú vzhľad tvojho zariadenia.

Často kladené otázky

Aké veľkosti favicon potrebuje?

V praxi: favicon.ico so 16, 32 a 48 px, apple-touch-icon s 180 px a súbory PNG s 192 a 512 px pre web manifest. Tento nástroj ich všetky vytvorí z jedného zdroja.

Môžem použiť logo vo formáte SVG?

Áno. Súbory SVG sa pred vytvorením ikon vykreslia vo vysokom rozlíšení. SVG sa zobrazuje ako obyčajný obrázok, takže sa jeho skripty nikdy nespustia.

Ako vytvorím favicon z emoji?

Vyber Text alebo emoji, napíš alebo vlož emoji, vyber pozadie alebo ho nechaj priehľadné a generuj. Výsledkom je skutočné PNG a ICO, takže funguje v každom prehliadači.

Prečo sa moja nová favicon nezobrazuje?

Prehliadače favicony agresívne ukladajú do vyrovnávacej pamäte. Načítaj stránku znova s vymazanou pamäťou, otvor web v súkromnom okne alebo pridaj k URL verziu, napríklad /favicon.ico?v=2.

Nahráva sa môj obrázok na server?

Nie. Ikony, archív ZIP aj manifest sa vytvárajú vo tvojom prehliadači; nič neopustí tvoje zariadenie.

Súvisiace nástroje