osobní stránky Petra Holuba

Všechny články

Prohlížení po kategoriích, viz menu...

Jak na Favicony?

Publikováno 19.04.2022. Kategorie: Software. Žádné komentáře.

Úvod

jako vždy rozkecaný.

Kdysi dávno, v pravěku internetu, stačil soubor nazvaný favicon.ico se smysluplným obsahem, o velikosti 16x16px a umístěný v kořenovém adresáři vašeho webu. Tento způsob podporuje většina netových prohlížečů na PC. Bohužel přišla řada přenosných zařízení. mobilů, tabletů a tam již situace není zcela jednoduchá. Každá verze operačního systému jak Android, tak iOS většinou požadují ikony v různém rozlišení. Jiné do oblíbených položek, jiné při umístění na plochu, atd. Extrémní způsob je popsán v [1]

Tímto směrem jsem se rozhodně vydat nechtěl. Sám jsem používal soubor favicon.ico v rootu svých webů a celkem to fungovalo, i na mobilních zařízeních. Jen v některých situacích - při uložení záložky na plochu a podobně - se vytvořil jen jakýsi screenshot. Rozhodl jsem tomu trochu napomoci.

Postup

popíši jen heslovitě, protože předpokládám, že kdo se zabývá ruční výrobou faviconu, jsou mu základní principy známy. Spíše se zaměřím na opakovatelnost a jednoduchost.

Z toho, co jsem napsal, je jasné, že ikony (vlastně grafické soubory) potřebujeme nejen v různých rozlišeních, ale i v různých grafických formátech, protože tvůrci webových prohlížečů se nejsou schopni domluvit na jakémsi standardu. Nakonec i slavná w3.org toho příliš neuvádí a v záhlaví alibisticky píše, že

Draft in development; may change radically at any time.

Takže babo raď...

Po studiu pár článků a vyzkoušení několika různých generátorů faviconů jsem si vybudoval určitý postup, který sem píši především proto, že až budu za pár let toto pořebovat, tak si určitě na detaily nevzpomenu.

Celou akci lze rozdělit na několik kroků

Vytvoření ikony, která bude sloužit za favicon. Ta je v nejmenším rozlišení veliká jen 16x16 pixelů, takže půjde nepochybně o vrcholné dílo, já upřednostňuji její vytvoření z písmen, třeba zkratka a podobně. Základní velikost je dobré udělat ve velikosti největší možné ikony, to je momentálně 512x512 px. Pustíme náš oblíbený grafický editor a vytvoříme si plátno v této velikosti. Co bude jeho obsahem, nechávám na úvaze laskavému čtenáři. Program [2], nám celou situaci usnadní, neb favicon vytvoří z použitých písem zcela sám, je možné měnit typ fontu, velikost, barvu jeho i barvu pozadí. Výsledek uložíme jako favicon.png.
Čeká nás vytvoření všech ostatních potřebných ikon a pár skriptů. K tomu můžeme použít program [3], kam výše získaný soubor natáhneme. Po pár vteřinách máme hotovo a výsledek naší práce stáhneme tlačítkem s nápisem < Generate your Favicons and HTML code >. Obdržíme zazipovaný soubor. Jeho obsahem jsou nejen příslušné grafické soubory, ale i dva skripty, které taktéž použijeme.
A teď to přijde. V záhlaví stránky, kde stahujeme příslušné soubory, je i kód, který musíme umístit do domovské stránky našeho webu, tedy do index.htm, index.html, index.php, default.asp, default.aspx. a to do oddílu mezi <head> a </head>. Může vypadat např. takto:
```
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
```
Vemte prosím na vědomí, že kód platí doslovně jen v případě, že všechny soubory, které získáme ze zazipovaného souboru umístíme taktéž do kořenového adresáře našeho webu. Pokud ne, musíme cesty k souborům příslušně upravit.
Obsah zazipovaného souboru vypadá takto: Vidíme favicony pro Android, jednu pro mobily/tablety firmy Apple, dále důležitý soubor favicon.ico, ten obsahuje celkem tři velikosti, a v neposlední řadě safari-pinned-tab.svg pro prohlížeč Safari. Podle mých pokusů tato celkem rozumná sada souborů vyhoví pro 90% situací. Pokud budeme chtít soubory dát do nějakého adresáře, což je přehlednější, doporučuji kopii souboru favicon.ico nechat v rootu webu. Jen taková sichrovka a pak už nás nemůže nic překvapit :-)

P.S. Až budete zkoušet různé postupy, nezapomeňte vždy vymazat cache prohlížeče <SHIFT> + <CTRL> + R, nebo <CTRL> + F5, jinak žádné změny neuvidíte / nepocítíte.

Odkazy

které mi přišly zajímavé

[1] - Ikona stránky favicon Takhle bych to asi nedělal, ale dobrý přehled, co který prohlížeč podporuje.

[2] - FAVICON GENERATOR / GENERATE FROM TEXT Online vygenerovíní faviconů z textu, tedy spíše ze dvou, max. tří písmen. Možnost nastavit barvy, typ fontu, atd.

[3] - Favicon Generator. For real. Vygeneruje veškeré soubory pro instalaci faviconu.

[4] - color-hex Naprosto úžasný program pro výběr a generování barev ve všech možných a nemožných odstínech.

Má v přehledu množství již vygenerovaných barevných palet, doporučuji vyzkoušet.

[5] - favicon-cheat-sheet Obsáhlé povídání o faviconech, co je nutné, co jen doporučené, a tak. Pro techničtěji zaměřené čtenáře zajímavé čtení.

Přehled článků