Příprava favicon a touchicon pro webové stránky

V dnešní době už je potřeba myslet i na to, že favicony nejsou využívány pouze jako ikonka záložky v prohlížeči na desktopu, ale využívají se i jako například různí zástupci na ploše nebo takzvané touchicony. Ty se využívají na mobilních zařízeních, kdy máme například na ploše zástupce na náš web. A věřte mi, že druhů touchicon a podobně je spousta.

Nejjednodušším a nejjistějším způsobem je vytvořit jednu ikonu v .png formátu o doporučeném rozměru 512x512px a nechat si vygenerovat všechny ostatní potřebné rozměry pomocí online nástroje https://realfavicongenerator.net/. Nahráním ikonky a vyplněním jednoduchého průvodce nám nástroj vygeneruje všechny potřebné rozměry ikonek, které vložíme do naší složky s assety (nejlépe do vlastní složky, např. „fav“) a do HTML vložíme vygenerovaný kód, ten může vypadat i nějak takhle:

Když bychom to chtěli celé zjednodušit do jedné věty, kód definuje cesty a rozměry k ikonám a každé zařízení si už vybere tu ikonku, která mu nejvíce vyhovuje.

Nezapomínat na site.webmanifest

Bystří z vás si určitě všimli, že mimo obrázkové soubory se nám také vygeneroval soubor site.webmanifest. Ten udává informace o naší aplikaci a je stěžejním v rámci progresivních webových aplikacích, o kterých si povíme určitě v jiném článku. Nyní pro nás je podstatné správně nastavit cesty k ikonkám a v ideálním případě mít vyplněný alespoň název aplikace (name) a ten se využije například v tu chvíli, když uživatel přidá náš web jako zástupce na plochu svého mobilního telefonu – a zde se bude zobrazovat právě tento název aplikace. Dále určitě doporučují vyplnit také minimálně následující:

Kromě site.webmanifest souboru je zde také soubor browserconfig.xml, který slouží primárně pro Microsoftí aplikace. I zde je důležité nezapomenout nastavit správně cesty k jednotlivým souborům a zkontrolovat nastavení barvy TileColor.