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:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#c19948">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">

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í:

{
    "name": "Pavel Kovář - Frontend developer",
    "short_name": "Pavel Kovář",
    "icons": [
        {
            "src": "/assets/img/fav/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/assets/img/fav/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#f44336",
    "background_color": "#f44336",
    "start_url": "https://www.pavelkovar.cz/",
    "display": "standalone"
}

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.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square150x150logo src="/assets/img/fav/mstile-150x150.png"/>
            <TileColor>#f44336</TileColor>
        </tile>
    </msapplication>
</browserconfig>

Neváhejte mě kontaktovat

V případě zájmu o mé služby mě můžete kontaktovat na

pavel@pavelkovar.cz

nebo

Fyzická osoba zapsaná v Živnostenském rejstříku od 30. 7. 2014, eviduje Městský úřad Rožnov pod Radhoštěm,
Pavel Kovář, IČO: 03246078