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

Naše reference
Zbožový srovnávač TipCen Hotel U dvou zlatých klíčů Portál Zájezdy pro školy
zobrazit další

Jaká bude cena vašeho projektu?
NEZÁVAZNÁ POPTÁVKA

Napsali o nás
Skvělá spolupráce, profesionální team! Děkujeme a doporučujeme.
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

POUŽÍVÁME COOKIES - OK