Favicon.ico, neboli ikonka u adresy webu
Určitě každý si někdy všiml malého obrázku u nějaké webové stránky. Ukázky z Google Chrome, Internetu Exploreru a Opery.
Když už teď víme o co se jedná, přistupme k návodu….
1) Otevřeme si malování a připravíme si zhruba čtverec do kterého pak budeme malovat a nebo psát co budeme chtít. Pamatujte, že by ikonka měla být nejlépe čtvercového tvaru a měla by jít rozpoznat i když ji zmenšíme do velikosti 16×16 px. To znamená, že na nějaké přehnané detaily raději zapomeňte. Já zvolil pro ukázku jednoduché černé N s oranžovým pozadím.
2) Když už máme připravenou ikonku tak ji uložíme. Nejlépe název: favicon a typ: jpg. Vyhnete se tak zbytečným problémům.
3) Favicon máme uložený, to znamená že si nyní otevřeme stránku www.favicon.cc a v menu vybereme Import Image.
4) Dáme vybrat soubor
5) Vybereme si náš favicon.jpg a stiskneme tlačítko otevřít.
6) Ikonka se nám zobrazila jakože ji máme vybranou, klikneme proto na Upload
7) Zde již máme rozřezanou naši ikonku na jednotlivé pixely a navrchu u záložky můžeme vidět, jak vypadá favicon v prohlížeči už zmenšený…
8) Na stránce popojedeme o kousek níže a ukáže se vám tlačítko Download Favicon. Je opravdu hned pod náhledem z bodu 7, stačí popojet. Stáhneme tedy Favicon
9) favicon.ico máte už stažený. Otevřete si proto nějaký váš FTP Client, například FileZillu. Připojte se k souborům své stránky. A do kořenového adresáře (většinou tam kde máte třeba index.html nebo index.php) nahrejte favicon.ico. Tak jak vidíte na obrázku.
10) Hotovo! teď už stačí jen obnovit vaši stránku například pomocí tlačítka na klávesnici F5 nebo si načtěte stránku znovu. Stránka by měla mít právě vaši ikonku.
Bonus: Každá stránka i podstránka může mít samozřejmě vlastní favicon. Docílit toho můžete tak, že si do hlavičky stránky vložíte kód:
Pro Internet Explorer (IE) použijte kód: <link rel="shortcut icon" href="nazev_vasi_ikony.ico">
Mozilla Firefox: <link rel="icon" href="ikonka.ico"> nebo <link rel="shortcut icon" href="obr/nazev_vasi_ikony.png" type="image/png">
