webová řešení

Favicon

Favicon je ikona www stránky, která se zobrazuje v záložce webového prohlížeče a usnadňuje tak orientaci uživatele v případě, že má otevřeno více záložek najednou. Rozměr základní ikony by měl být čtvercový, o rozměrech 16×16px nebo 32×32px.

Favicon

Favicon lze vytvořit pro každou webovou stránku a nejedná se o nic složitého. Stačí vytvořit grafický soubor favicon.ico a ten vložit do kořenového adresáře webu tak, aby byl dostupný z na URL adrese www.example.com/favicon.ico. V případě, že nemůžete nebo nechcete umístit soubor favicon.ico do rootu webu, lze jej umístit i jinam. V tomto případě, je ale nutné prohlížeč informovat, kde je favicon umístěn a to vložením následujícího kódu mezi značky <head> a </head>.

<link rel="icon" href="http://www.example.com/zanorena/slozka/favicon.ico">

Jak vytvořit favicon.ico

Ikonku si můžete vytvořit v jakémkoliv grafickém editoru nebo využít jednoho z mnoha generátorů, které vám vytvoření usnadní.

S rozmachem mobilních zařízení se začínají využívat favicony s většími rozlišeními také pro tablety či smartphony. Zároveň lze vytvořit favicony i pro mobilní platformy Android, iOS či Windows Phone.

Připravili jsme pro vás kompletní seznam faviconů, které vám budou fungovat napříč různými typy zařízeních i platforem. S vytvořením vám pomůže např. online generátor realfavicongenerator.net.

Ikony pro platformu Apple:

<link rel="apple-touch-icon" sizes="76x76" href="/zanorena/slozka/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="120x120" href="/zanorena/slozka/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="/zanorena/slozka/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/zanorena/slozka/apple-touch-icon-180x180.png">

Ikony pro webové prohlížeče:

<link rel="shortcut icon" href="/zanorena/slozka/favicon.ico">
<link rel="icon" sizes="16x16" type="image/png" href="/zanorena/slozka/favicon-16x16.png">
<link rel="icon" sizes="32x32" type="image/png" href="/zanorena/slozka/favicon-32x32.png">
<link rel="icon" sizes="96x96" type="image/png" href="/zanorena/slozka/favicon-96x96.png">
<link rel="icon" sizes="192x192" type="image/png" href="/zanorena/slozka/favicon-192x192.png">
<link rel="mask-icon" href="/zanorena/slozka/safari-pinned-tab.svg" color="#5bbad5">

Ikony pro platformu Android:

<link rel="manifest" href="/zanorena/slozka/manifest.json">

Obsah souboru manifest.json:

{
        "name": "",
        "icons": [
                {
                        "src": "\/zanorena\/slozka\/android-chrome-36x36.png",
                        "sizes": "36x36",
                        "type": "image\/png"
                },
                {
                        "src": "\/zanorena\/slozka\/android-chrome-48x48.png",
                        "sizes": "48x48",
                        "type": "image\/png"
                },
                {
                        "src": "\/zanorena\/slozka\/android-chrome-72x72.png",
                        "sizes": "72x72",
                        "type": "image\/png"
                },
                {
                        "src": "\/zanorena\/slozka\/android-chrome-96x96.png",
                        "sizes": "96x96",
                        "type": "image\/png"
                },
                {
                        "src": "\/zanorena\/slozka\/android-chrome-144x144.png",
                        "sizes": "144x144",
                        "type": "image\/png"
                },
                {
                        "src": "\/zanorena\/slozka\/android-chrome-192x192.png",
                        "sizes": "192x192",
                        "type": "image\/png"
                },
                {
                        "src": "\/zanorena\/slozka\/android-chrome-256x256.png",
                        "sizes": "256x256",
                        "type": "image\/png"
                }
        ],
        "theme_color": "#ffffff",
        "display": "standalone"
}

Ikony pro platformu Windows phone:

<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/zanorena/slozka/mstile-144x144.png">
<meta name="msapplication-config" content="/zanorena/slozka/browserconfig.xml">
<meta name="theme-color" content="#ffffff">

Obsah souboru browserconfig.xml:

<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/zanorena/slozka/mstile-70x70.png"/>
      <square150x150logo src="/zanorena/slozka/mstile-150x150.png"/>
      <square310x310logo src="/zanorena/slozka/mstile-310x310.png"/>
      <wide310x150logo src="/zanorena/slozka/mstile-310x150.png"/>
      <TileColor>#da532c</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Favicon na Wikipedii

Potřebujete vytvořit web, e-shop, aplikaci?
NEZÁVAZNÁ POPTÁVKA

Naše reference
Checky - analytická aplikace Saller-sport - e-shop se sportovním vybavením Hotel U dvou zlatých klíčů
zobrazit další
Napsali o nás
Děkuji moc za zpracování intranetu. Je to ještě lepší, než jsem čekal. Je vidět, že u práce přemýšlíte a záleží vám na výsledku. Rozhodně vás rád doporučím dál. Až budu příště něco potřebovat, budete první, na koho se obrátím.
zobrazit další
Naši klienti
REALITY FLASH s.r.o.Ferratum Czech s.r.o.TS Plzeň a.s.Václav KoudelaVáclav KoudelaModul Servis s.r.o.Assessment Systems International s.r.o.idioma s.r.o.Fuji Koyo Czech, s.r.o.PRO TRAVEL CK s.r.o.
Blog o webdesignu
4. díl: Přehledný design aneb Jak rozjet nový internetový obchod

Poslední 4 týdny se vám pokoušíme sepsat ty nejdůležitější kroky, díky kterým dosáhnete se svým novým internetovým obchodem lepších výsledků. Dnes se opět podíváme na další, velmi důležitý prvek, kterým je vzhled a celkový design e-shopu. 3 vteřiny a pryč Jakmile se vám podaří přivést na stránku potenciálního zákazníka, je velmi důležité jej na stránce udržet a následně přimět k prodeji. A samotný design vašeho obchodu je v tomto směru velmi důleižtým aspektem. Dle studií stačí uživateli pouhé 3 vteřiny, aby se rozhodl, zda-li na www stránce ...

zobrazit blog - zobrazit novinky

COOKIES - OK