Jak udělat profi favicon na WordPress
Favicon je nenápadná, ale důležitá drobnost na webech. Nese vizuální info o vašem webu a identitě. Uživatelé jej vidí při vyhledávání na Google nebo Seznamu. Na web jej dostanete relativně jednoduše. Tady je můj postup s WordPressem tak, aby favicon fungoval jak v prohlížečích, tak i mobilních zařízeních.
Co je favicon
Favicon je malý obrázek čtvercového tvaru, který je uložený v kořenovém adresáři webu. Původně míval rozměry jen 16×16, případně 32×32 pixelů, ale pro nová vysoká rozlišení můžete mít i výrazně vyšší rozlišení.
Jak favicon vyrobit
Celý proces má několik fází:
- vyrobíte obrázek
- připravíte jeho verze v různých rozlišeních
- připravíte meta data do hlavičky zdrojového kódu
- obrázky a a meta data nahrajete na webu
Celé je to práce tak na 10 minut maximálně. Tak do toho. 👇
Obrázek pro favicon
Ideální nástroj je Canva. Je zdarma. Vytvořte obrázek s vlastními rozměry 260×260. Stačí jeden, později v jiném nástroji zdarma uděláme menší verze hromadně. Do něj vložte, co má být obsahem favicon. Text, jiný obrázek, fotku. Je to na vás.
👉 Tip: Nejlepší pluginy pro WordPress?
Výsledek uložte do počítače jako png soubor.
Generátor favicon a html
S hotovým obrázkem jdeme na další krok. Různé verze obrázků a html meta data vám zdarma udělají různé nástroje. Můj oblíbený je realfavicongenerator.net.
Celkový čas: 2 minuty
Nahrajte obrázek
Ikonu z Canva nahraje do aplikace.
Upravte vzhled
Pro prohlížeče, výsledky hledání na Google a různé operační systém upravte podle chuti zaoblení ikony (radius). Vždy vidíte náhled výsledku. Jakmile máte hotovo, stiskněte na konci stránky tlačítko „Generate your Favicons and HTML code“.
Stáhněte hotová data
Na poslední stránce stáhněte sadu ikon (1) jako zip. Zkopírujte si i html kód.
Vložení na web
Poslední fáze je tu. Připojte se na FTP k vašemu webu. Údaje najdete u poskytovatele webhostingu. Jako software vám postačí FileZilla nebo TotalCommander. Oba jsou zdarma pro Windows.
Všechny obrázky nahrejte do základní složky webu.
HTML kód s meta značkami pro načtení toho správného obrázku musíte dostat do hlavičky všech vašich stránek. Laikům na to doporučím plugin Header Footer Manager. V něm vytvoříte tzv. snippet, kterému nastavíte Site Wide zobrazení v hlavičce (Header) u všech zařízení. Vložíte html kód a snipet uložíte.
Po uložení a obnovení stránky máte na WordPress webu vlastní favicon.
Skvělý tip Zdeňo! Mě to kurňa nešlo minule a jsem rád, za tuhle jinou cestu. Fakt! 🙂