Generátor favicon

Co je favicona a kde ji uvidíte

Favicon je malá čtvercová ikona vašeho webu. Název vznikl z „favorite icon“, ikony oblíbených: první prohlížeč ji zobrazoval u uložených záložek nazývaných Favorites.

V kartě prohlížeče je vedle názvu stránky, široká 16 pixelů nebo 32 na jemnějším displeji. Označuje web v záložkách i historii. Po uložení webu na úvodní obrazovku telefonu se stane ikonou aplikace. Google ji také zobrazuje u názvu webu ve výsledcích.

Všude má stejný úkol: být na první pohled rozpoznatelná mezi ostatními ikonami.

Proč z jedné favicony vzniká sada souborů

Každé místo vzniklo jindy a potřebuje vlastní soubor. Generátor favicon výše vytvoří všechny z jednoho obrázku.

Karty, záložky a historie používají favicon.ico s verzemi 16, 32 a 48 pixelů v jednom souboru. Je to nejstarší formát. Pokud stránka ikonu neurčí, prohlížeč ho stále hledá v kořenové složce webu.

Začnete-li SVG, získáte i favicon.svg pro prohlížeče, které ho podporují. Je složené z tvarů místo pixelů a zůstává ostré na každém displeji.

iPhone a iPad používají po přidání webu na plochu apple-touch-icon.png, čtverec o 180 pixelech. iPhone vyplňuje průhlednost černou, proto tato ikona vždy dostane plné pozadí, vaši barvu nebo bílou.

Android a weby nainstalované jako aplikace používají icon-192.png a icon-512.png. Najdou je přes site.webmanifest, malý textový soubor s názvem webu, pokud jste ho zadali, a umístěním větších ikon.

Samostatná PNG o 16 až 48 pixelech jsou záložní soubory pro služby vyžadující PNG. Pro výsledky hledání Google čte odkazy na ikony v HTML úvodní stránky.

Jak přidat favicony na web

Pokud vy nebo váš vývojář upravujete soubory webu, stačí dva kroky.

Rozbalte ZIP a vložte soubory do kořenové složky webu, nejvyšší složky s úvodní stránkou. Přidejte k adrese /favicon.ico a ověřte, že se ikona otevře.

Pak vložte řádky HTML z README nebo nástroje do části head svých stránek, kde je i titulek. Každý řádek odkazuje na ICO, ikonu Apple touch, manifest a případně SVG.

Stránky obvykle sdílejí šablonu, vložíte je tedy jednou. Staré odkazy na ikony nejprve smažte, jinak může prohlížeč vybírat původní ikonu.

Ve webovém editoru stačí nahrát icon-512.png do nastavení ikony webu, HTML doplní editor za vás.

Jak zachovat logo čitelné v 16 pixelech

V 16 × 16 má celá ikona jen 256 malých barevných čtverečků. Většina log pro to nevznikla.

Začněte symbolem místo názvu. U osmipísmenného názvu v 16 pixelech má každé písmeno šířku dva pixely. Nemáte symbol? Použijte první písmeno, velké a výrazné. Silné písmo vydrží zmenšení lépe než tenké.

Pak uberte detaily. Tenké čáry a malé mezery splývají s okolím a slogan se rozmaže.

Rozhoduje světlost vůči tmě, nejen barva. Karty bývají světlé i tmavé podle motivu, tmavě modrá ikona na tmavém panelu mizí. Tmavé značce v nástroji dejte světlé pozadí a naopak.

Odsazení mezi logem a okrajem čtverce je kompromis. Příliš velké zmenší logo, příliš malé nechá iPhone při zaoblení rohů část loga oříznout.

Nakonec zkontrolujte světlý i tmavý náhled výše ve skutečné velikosti bez přiblížení. Bezplatná kontrola loga jde dál: zmenší logo na 32 pixelů a měří zachované detaily.

Kdy místo zmenšení značku překreslit

Někdy nic nepomůže. Podrobná ilustrace či 3D vzhled založený na stínech stojí na detailech, které v 16 pixelech zmizí. Tento nástroj mění velikost, nepřekresluje.

To neznamená špatné logo, jen logo pro větší plochy. Navrhněte záměrně malou verzi: jednoduchý symbol nebo iniciálu písmem značky. Zachovejte barvy a část tvaru pro rozpoznání. Jasné písmeno je lepší než rozmazaná miniatura.

Potřebujete nový symbol? AI generátor loga ho navrhne z názvu a případného popisu. Loga z našich šablon loga obsahují samostatný symbol, pokud ho mají, a každé koupené logo má soubory favicon.