Favicon – vytvořte si ikonu webové stránky

Při práci s internetovým prohlížečem jste jistě zaznamenali, že řada webů je opatřena ikonkou, která symbolizuje jejich logo. Vytvoření této ikonky není nic složitého, dokonce kvůli tomu ani nemusíte instalovat žádný speciální program. Po jejím doplnění na web budou vaše stránky zase působit o něco lépe. Ikonka se zobrazuje v adresním řádku prohlížeče nebo v seznamu oblíbených položek.

Formát ikonky

Ikonka webové stránky, neboli favicon, je vlastně běžný soubor typu ICO, tedy klasická ikonka. V řadě návodů je doporučován formát o rozměrech 16 × 16. Ten bohatě stačí, většina prohlížečů totiž větší formát ikonky stránek ani nezobrazuje. Použít můžete také formát ikony, kde je uloženo více obrázků, a sice již zmíněný 16 × 16 × 16 barev a 32 × 32 × 256 barev.

Tvorba ikonky

Vytvoření takovéto ikonky není nic složitého. Stačí si připravit nějaký obrázek, který v potřebných rozměrech uložíte do souboru ICO. Podporují jej některé grafické editory, použít můžete například i prohlížeč obrázků IrfanView. Pokud váš oblíbený program soubory ICO nepodporuje, využijte online služby FavIcon from Pics, kterou na svých stránkách nabízí Chami.com, výrobce známého HTML editoru HTML-Kit.

Tvorba ikony webové stránky

Ikonku pro webovou stránku si můžete nechat vytvořit online

Do formuláře jednoduše vložíte obrázek z disku, stiskem tlačítka jej přetvoříte na ikonku. Služba vám poté nabídne náhled na výsledek a možnost stažení souboru. V archivu ZIP najdete nejenom klasickou ikonku, ale také její průhlednou podobu. To je dobré vědět, jelikož náhled na stránce průhlednou verzi neukazuje, ať se snažíte sebevíc.

Umístění ikonky

Je velice důležité, aby soubor s ikonkou byl pojmenován jako favicon.ico. Tento soubor byste následně měli umístit do kořenového adresáře vaší webové prezentace. Existuje několik dalších způsobů, jak favicon.ico použít, například pomocí kaskádových stylů, umístění do kořene webu však funguje naprosto spolehlivě. Tuto metodu doporučuji provozovatelům systému Drupal, které neustále trápí hlášení o nenalezeném souboru favicon.ico.

Pokud si chcete pohrát s kaskádovými styly a případně vyzkoušet změnu ikonky pro jednotlivé stránky na vašem webu, pak použijte následující zápis:

<link rel="shortcut icon" href="ikonka.ico"> pro prohlížeče Internet Explorer

<link href="favicon.png" rel="icon" type="image/png" /> pro prohlížeče s jádrem Mozilla (Firefox a spol.)

Tagy

Buďme ve spojení, přihlaste se k newsletteru

Odesláním formuláře souhlasíte s podmínkami zpracováním osobních údajů. 
Více informací v Ochrana osobních údajů.

Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal, WordPress a Symfony. Acquia Certified Developer & Site Builder. Autor několika knih o Drupalu.
Web Development Director v Lesensky.cz. Ve volných chvílích podnikám výlety na souši i po vodě. Více se dozvíte na polzer.cz a mém LinkedIn profilu.

Komentáře k článku

návštěvník

Je možné umístit ikonu libovolného webu na své stránky bez souhlasu majitele zmíněné ikony? Děkuji Bendová

návštěvník

Pokud pomocí ní budete odkazovat na daný web, je to přínos pro majitele webu, jemuž ikona patří. Takže vadit mu to jistě nebude. Tedy pokud nejde o nějaké jiné využití - to byste musela lépe specifikovat.

Profile picture for user Jan Polzer

Jak píše kolega - pokud je to k odkazování na původní web, pak se asi nikdo nebude zlobit. Pokud to chcete využít jinak, je třeba se optat majitele.

 

návštěvník

Dobrý den chci se zeptat zda vytvoření ikonky na CHAMI.com je zdarma děkuji

Přidat komentář

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Moje kniha o CMS Drupal

 

Kniha 333 tipů a triků pro Drupal 9


Více na KnihyPolzer.cz

Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Poslední komentáře
Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

@maxiorel na Twitteru

Maxiorel na Twitteru