Návody k favicon
Praktické odpovědi na otázky při tvorbě favicon: jaké velikosti a formáty zvolit a jaký kód vložit.
Velikosti favicon: formáty a použití
Při hledání „velikost favicon“ stále narazíte na seznamy patnácti souborů z roku 2014. Dnes ale stačí šest rozměrů pro karty prohlížeče, výsledky vyhledávání, iOS, Android a PWA. Podívejme se, které to jsou a proč.
Přečíst návodPřevod PNG na ICO zdarma
Soubor .ico je stále očekávaným formátem v kořenovém adresáři webu a většina online převodníků vyžaduje odeslání obrázku na server. Zde zjistíte, jak z PNG vytvořit správný favicon.ico s více velikostmi bez nahrávání souborů.
Přečíst návodapple-touch-icon: velikost, formát a kód
Ikona Apple Touch výslovně určuje obrázek, který se použije, když si návštěvník přidá váš web na plochu iPhonu. Je nezávislá na favicon v kartě i na ikonách deklarovaných ve webovém manifestu.
Přečíst návodFavicon v tmavém režimu pomocí SVG
Černé logo na průhledném pozadí vypadá skvěle na světlé kartě a na tmavé je neviditelné. ICO se přizpůsobit neumí, ale SVG favicon ano: obsahuje CSS pravidlo měnící barvy podle motivu prohlížeče.
Přečíst návodJak přidat favicon do HTML
Spolehlivá favicon v HTML nestojí na jedné kouzelné značce, ale na malé sadě dostupných souborů a odkazů v head. Tento postup pokrývá moderní karty, starší klienty i mobilní zástupce bez zbytečných historických variant.
Přečíst návodFavicon chybí nebo se neaktualizuje
Když favicon chybí, nemusí být problém v souboru. Prohlížeč, CDN, service worker i vyhledávač mohou uchovávat různé verze. Systematická diagnostika zabrání tomu, abyste měnili několik věcí najednou.
Přečíst návodFavicon s Next.js App Router
App Router umí vytvářet značky ikon ze souborů podle konvencí nebo z objektu metadata. Oba postupy jsou správné, ale jejich kombinování bez jasných pravidel snadno vede ke konkurenčním deklaracím.
Přečíst návodNávod na SVG favicon
SVG zachovává ostré obrysy při každé hustotě pixelů a umí přizpůsobit barvy motivu. Tato flexibilita má jednu podmínku: soubor musí být samostatný, jednoduchý a čitelný v miniaturním prostoru.
Přečíst návod