Jak nástroj použít
- 1.Přetáhněte logo na stránku, vložte ho ze schránky nebo klikněte na „Vybrat obrázek“. Nejlepší výsledek dá čtvercové PNG nebo SVG o velikosti alespoň 512 × 512 pixelů.
- 2.Upravte okraj a pokud logo potřebuje pod sebou plný tvar, zvolte barvu pozadí a zaoblené rohy.
- 3.Zkontrolujte náhled: záložky prohlížeče ukazují, jak ikona vypadá ve velikosti 16 pixelů ve světlém i tmavém motivu.
- 4.Klikněte na „Stáhnout favicon.zip“, nahrajte soubory do kořenové složky webu a HTML kód vložte do sekce head svých stránek.
Jaké soubory favicon web potřebuje
Dnes stačí malá sada, která pokryje všechny prohlížeče a zařízení. favicon.ico je klasický soubor, který prohlížeče, čtečky RSS a další nástroje stahují z adresy /favicon.ico, i když ho stránka vůbec nezmiňuje. Obsahuje verze 16, 32 a 48 pixelů. Moderní prohlížeče dávají přednost ikoně SVG (icon.svg), která zůstane ostrá v jakékoli velikosti a díky media query prefers-color-scheme uvnitř SVG může v tmavém režimu dokonce změnit barvy.
apple-touch-icon.png (180 × 180) použijí iPhony a iPady, když si někdo přidá váš web na plochu. Android a nainstalované webové aplikace berou PNG o velikosti 192 a 512 pixelů uvedená v site.webmanifest. Starší návody uvádějí desítky velikostí, prohlížeče si ale pro všechno ostatní tyto soubory samy přizpůsobí.
Kam soubory umístit
Nahrajte soubory do kořenové složky webu, aby se načítaly z adres jako https://example.com/favicon.ico, a řádky HTML přidejte do <head> každé stránky. V site.webmanifest změňte název na název svého webu.
Frameworky mívají vlastní postup. V Next.js App Routeru vložte favicon.ico, icon.svg (nebo icon.png) a apple-icon.png do složky app a značky se přidají samy. Ve WordPressu nahrajte čtvercový obrázek v sekci Vzhled → Přizpůsobit → Identita webu → Ikona webu. Hostované nástroje na tvorbu webů, jako Shopify, Wix nebo Squarespace, mají pole pro faviconu v nastavení webu.
Jak navrhnout ikonu, která funguje i v 16 pixelech
Záložka prohlížeče zobrazuje ikonu ve velikosti 16 × 16 pixelů (na displejích s vysokým rozlišením 32). Drobný text, tenké čáry a detailní loga se v takové velikosti slijí. Použijte jednoduchý symbol, první písmeno názvu nebo výraznou část loga s velkým kontrastem.
Zkontrolujte oba náhledy záložek: tmavé logo na průhledném pozadí může v tmavém motivu prohlížeče zmizet. Pokud se to stane, dejte ikoně barvu pozadí nebo logu přidejte světlý obrys.
Otázky a odpovědi
Nahrává se moje logo někam?
Ne. Ikony vykreslí a do souboru ZIP zabalí váš prohlížeč přímo ve vašem zařízení. Nic se neposílá do nestoo ani nikam jinam.
Jakou velikost má mít favicona?
Záložky prohlížeče používají 16 × 16 a 32 × 32 pixelů, a právě to obsahuje favicon.ico (plus 48 × 48 pro zástupce ve Windows). Telefony a webové aplikace potřebují větší ikony: 180 × 180 pro Apple touch icon a 192 × 192 a 512 × 512 pro Android. Začněte s obrázkem o velikosti alespoň 512 × 512 pixelů nebo s SVG.
Proč se moje nová favicona nezobrazuje?
Prohlížeče si favicony ukládají do mezipaměti na dlouho, někdy dokonce i po vynuceném obnovení stránky. Otevřete soubor ikony přímo (/favicon.ico) a načtěte ho znovu, zkuste anonymní okno, nebo do odkazů v HTML přidejte verzi, například href="/favicon.ico?v=2", aby prohlížeče stáhly nový soubor.
Mám použít ICO, nebo PNG?
Obojí. favicon.ico nechte v kořenové složce, protože některé prohlížeče a nástroje hledají jen tento soubor. Moderní prohlížeče použijí ikony PNG nebo SVG z vašeho HTML. Soubor ICO vytvořený tady obsahuje uvnitř obrázky PNG, takže zůstává malý.
Můžu vytvořit faviconu z emoji nebo textu?
Přímo v tomto nástroji ne, ale s SVG je to snadné: uložte <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">🦊</text></svg> jako icon.svg a přetáhněte ho sem. Emoji vypadají v každém operačním systému jinak, takže vygenerované soubory PNG a ICO zobrazí emoji tak, jak ho vykreslí váš počítač.