Pridanie faviconu

Na svoj web môžeš pridať favicon. Favicon je ikonka, ktorá sa zobrazuje vo vrchnej lište prehliadača, hneď vedľa nadpisu webstránky.

Je dobré favicon na webstránky pridať. Je to rovnako dôležité, ako ikonka mobilnej aplikácie v mobile.

Favicon pridávame do <head></head> sekcie webstránky.

Favicon je väčšinou tvorený z loga. Existuje viacero generátorov faviconu.

Úloha

  1. Vyber si logo alebo ikonku, ktorá bude reprezentovať favicon tvojej webstránky. (Uisti sa, že logo je postačujúcej veľkosti, ideálne v rozmeroch 1024px x 1024px a v pomeroch štvorca).
  2. Choď na stránku Favicon generator.
  3. Nahraj svoj obrázok
  4. Po vygenerovaní stihni súbor s vygenerovanými obrázkami.
  5. Rozbal zložku
  6. Nakopíruj všetky vygenerované súbory do koreňového adresáru projektu (htmlkurz2016).
  7. Pridaj súbory do <head></head> sekcie webstránky vygenerovaný kód nachádzajúci sa na stránke, kde si generoval/a favicon (viď obrázok).
  8. Uprav kód. Všade pred href vymaž /.

<link rel="apple-touch-icon" sizes="57x57" href="apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

Tvoj favicon je na webstránke.