Návody na favicony
Konkrétne odpovede na otázky pri tvorbe faviconov: aké rozmery, formáty a kód použiť.
Rozmery faviconov: formáty a použitie
Vyhľadávanie „rozmery faviconu“ stále ponúka zoznamy pätnástich súborov z roku 2014. Dnes pritom na karty, výsledky vyhľadávania, iOS, Android a PWA stačí šesť rozmerov. Pozrime sa, ktoré to sú a prečo.
Prečítať návodPrevod PNG na ICO zadarmo
.ico zostáva očakávaným formátom v koreňovom adresári webu a väčšina online konvertorov vyžaduje odoslanie obrázka na server. Tu je postup, ako z PNG vytvoriť správny favicon.ico s viacerými rozmermi bez odosielania súborov.
Prečítať návodapple-touch-icon: rozmery, formát a kód
Ikona Apple Touch výslovne určuje obrázok použitý pri pridaní webu na domovskú obrazovku iPhonu. Je oddelená od faviconu karty aj od ikon deklarovaných vo webovom manifeste.
Prečítať návodFavicon pre tmavý režim pomocou SVG
Čierne logo na priehľadnom pozadí vyzerá skvele na svetlej karte, no na tmavej je neviditeľné. ICO sa prispôsobiť nevie, favicon SVG však áno: obsahuje pravidlo CSS, ktoré mení farby podľa motívu prehliadača.
Prečítať návodPridanie faviconu do HTML
Spoľahlivý favicon v HTML nestojí na zázračnej značke, ale na malej sade dostupných súborov a odkazov v head. Tento postup pokrýva moderné karty, staršie klienty a mobilné odkazy bez množstva historických variantov.
Prečítať návodFavicon chýba alebo sa neaktualizuje
Keď favicon chýba, chyba nie je vždy v súbore. Prehliadač, CDN, service worker aj vyhľadávač môžu uchovávať odlišné verzie. Systematická diagnostika pomôže vyhnúť sa súčasným zmenám viacerých prvkov.
Prečítať návodFavicony v Next.js App Router
App Router môže vytvárať značky ikon z konvenčne pomenovaných súborov alebo z objektu metadata. Oba prístupy sú platné, no ich miešanie bez jasných pravidiel ľahko vytvorí konkurenčné deklarácie.
Prečítať návodNávod na favicon SVG
SVG zachováva ostré obrysy pri každej hustote pixelov a môže prispôsobiť farby motívu. Táto pružnosť má podmienku: súbor musí zostať samostatný, jednoduchý a čitateľný na veľmi malej ploche.
Prečítať návod