Utilia
Kategorie ▾
Jazyk: cs ▾

Generátor favicon

Vytvoř favicon.ico, ikony PNG, apple-touch-icon a site.webmanifest z jednoho obrázku nebo emoji s hotovými značkami HTML. Stažení ZIP, bez nahrávání.

Zdroj

Přizpůsobení
site.webmanifest

Jak vytvořit favicon

  1. V části Zdroj zvol Obrázek nebo Text nebo emoji. - Obrázek: přetáhni PNG, JPG, WebP nebo SVG. Nejlépe funguje čtvercové logo s rozměry alespoň 512 × 512 px. Volba Celý obrázek ho vloží celé do ikony, Vyplnit a oříznout pokryje celý čtverec. - Text nebo emoji: napiš písmeno, iniciály nebo emoji a pak vyber Písmo, Tučné a Barva textu.
  2. Nastav Barva pozadí, nebo zaškrtni Průhledné pozadí. Vyber Tvar (Čtverec, Zaoblený nebo Kruh) a Odsazení (%), které kolem obsahu nechá místo.
  3. Volitelně otevři site.webmanifest a zadej Název aplikace (web manifest), Krátký název, Barva motivu a Adresa složky s ikonami (nech /, pokud soubory půjdou do kořene tvého webu).
  4. Klikni na Generovat favicony. Ikony se zobrazí ve skutečné velikosti vedle napodobeniny karty prohlížeče. Poté se při každé změně aktualizují okamžitě.
  5. Klikni na Stáhnout ZIP, nahraj soubory na svůj web, pak klikni na Kopírovat značky a vlož je do <head> svých stránek.

Co je v archivu ZIP

Soubor Velikost Používá
favicon.ico 16, 32 a 48 px Karty prohlížeče, záložky, staré prohlížeče, Windows
favicon-16x16.png 16 × 16 Karty prohlížeče
favicon-32x32.png 32 × 32 Karty na displejích s vysokou hustotou, zástupci na hlavním panelu
apple-touch-icon.png 180 × 180 Plocha iPhonu a iPadu
android-chrome-192x192.png 192 × 192 Plocha Androidu (web manifest)
android-chrome-512x512.png 512 × 512 Úvodní obrazovky při instalaci (web manifest)
site.webmanifest — Název, barvy a ikony instalovatelného webu
favicon-tags.html — Značky HTML pro referenci

Soubor ICO obsahuje tři obrázky PNG, formát, který čte Windows (od Visty) i všechny současné prohlížeče. Soubor apple-touch-icon se vždy ukládá na jednobarevném pozadí, protože iOS zobrazuje průhledné pixely černě; při průhledném pozadí se použije bílá.

Značky HTML

Vygenerované značky vypadají takto (s adresou tvé složky):

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

Prohlížeče si také automaticky vyžádají /favicon.ico v kořeni tvé domény, takže ho tam stojí za to nechat i pro stránky bez těchto značek.

Tipy pro návrh

  • Drž to jednoduché. Při velikosti 16 × 16 px detaily mizí. Nejlépe se čte jedno písmeno, výrazný symbol nebo nejjednodušší verze loga.
  • Zkontroluj náhled ve skutečné velikosti. Ikona 16 px na napodobenině karty je to, co návštěvníci opravdu vidí.
  • Pamatuj na tmavý režim. Tmavé logo na průhledném pozadí může v tmavých motivech prohlížeče zmizet; pomůže barevné pozadí nebo malé odsazení.
  • Emoji vypadají v každém systému jinak, protože každá platforma je kreslí po svém. Soubory PNG zachovají vzhled tvého zařízení.

Časté dotazy

Jaké velikosti favicon potřebuje?

V praxi: favicon.ico s velikostmi 16, 32 a 48 px, apple-touch-icon 180 px a obrázky PNG 192 a 512 px pro web manifest. Tento nástroj je vytvoří všechny z jednoho zdroje.

Mohu použít logo ve formátu SVG?

Ano. Soubory SVG se před vytvořením ikon vykreslí ve vysokém rozlišení. SVG se zobrazuje jako obyčejný obrázek, takže se jeho skripty nikdy nespustí.

Jak vytvořím favicon z emoji?

Zvol Text nebo emoji, napiš nebo vlož emoji, vyber pozadí nebo ho nech průhledné a generuj. Výsledkem jsou skutečné soubory PNG a ICO, takže fungují v každém prohlížeči.

Proč se moje nová favicon nezobrazuje?

Prohlížeče favicony agresivně ukládají do mezipaměti. Načti stránku s vymazanou mezipamětí, otevři web v anonymním okně, nebo přidej k adrese verzi, například /favicon.ico?v=2.

Nahrává se můj obrázek na server?

Ne. Ikony, archiv ZIP i manifest se vytvářejí ve tvém prohlížeči; nic neopouští tvoje zařízení.

Související nástroje