Vzorky zdarma! Vzorky zdarma pro měsíc listopad najdete zde

Jak na favicon?

Branding hraje důležitou roli v našem webovém designu a díky favicon může mít čtenář nebo zákazník lepší pocit z našeho webu. Favicon znamená v doslovném překladu „oblíbená ikona“, pokud ale stále nevíte, o co se jedná, stačí se podívat ve vašem prohlížeči na levý růžek právě otevřené karty, kde uvidíte VF v kroužku. Ano, tento malý obrázek je ikonka, která zdobí vaši otevřenou kartu. Je to v podstatě taková malá identita našich webových stránek.

A jak takovou ikonku vytvořit? Vybereme si obrázek, který budeme chtít převézt do formátu vhodného pro fav(ikonu). Pro nejlepší výsledek doporučuji vytvořit obrázek s transparentním pozadím a výsledek uložit ve formátu .png. Nebudete mít tak zbytečně kolem obrázku bílý nebo černý čtvereček, který nepůsobí příliš zajímavě.


Otevřeme si v novém okně našeho internetového prohlížeče třeba tuto stránku (http://favicon.htmlkit.com/favicon/), nahrajeme náš obrázek a klikneme na   generate favicon. Takových stránek je samozřejmě víc, ale já osobně jsem zvyklý používat tuhle.

Ikonku, která se vám po krátkém komentu vygeneruje a uložíme na pracovní plochu.

K tomu, aby se nám ikonka na stránce opravdu objevila, potřebujeme vložit tento speciální html kod:

.ico favicon

<link rel=“shortcut icon“ href=“favicon.ico“ />

.gif favicon

<link rel=“icon“ type=“image/gif“ href=“animated_favicon1.gif“>

kombinace .ico a .gif

<link rel=“shortcut icon“ href=“favicon.ico“>

<link rel=“icon“ type=“image/gif“ href=“animated_favicon1.gif“>

Mějte vždy na paměti, že se každý kod vkládá mezi  <head> a </head>. Pokud stejně jako já používáte wordpress, prostor pro tento kod hledejte v záhlaví, anglicky header.

Share on Tumblr

Přidat komentář

Zrušit odpověď na komentář