Které soubory favicon webu potřebuje a jaké má mít velikosti

Web potřebuje malou sadu souborů s ikonami a většina rozhodnutí se točí kolem velikosti. Do kořenové složky webu uložte favicon.ico s obrázky o velikosti 16, 32 a 48 pixelů pro karty prohlížeče a Windows. Přidejte ikonu Apple touch o velikosti 180 px pro plochy iPhonu a iPadu a PNG ikony 192 a 512 px uvedené ve webovém manifestu. Generátor favicon vytvoří všechny z jednoho loga a připraví řádky HTML, které stačí vložit na své stránky.

Soubory a jejich velikosti

ZIP, který generátor stáhne, obsahuje všech sedm souborů. Soubor favicon.ico vznikne ze tří PNG obrázků o velikosti 16, 32 a 48 pixelů, uložených uvnitř jednoho souboru. Každá ikona je stejné logo nakreslené menší. Generátor pracuje z verze vašeho obrázku o velikosti 512 pixelů a z ní vytvoří každou velikost.

Řádky HTML

Generátor zapíše čtyři řádky pro hlavičku vašich stránek:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

První řádek odkazuje na favicon.ico a deklaruje jeho velikost 48 × 48. Druhý uvádí PNG o velikosti 32 px. Třetí určuje ikonu Apple touch a čtvrtý odkazuje na manifest, kde jsou uvedeny ikony 192 a 512 px. PNG o velikosti 16 px je v ZIP, ale v těchto řádcích chybí. Prohlížeče navíc hledají /favicon.ico i samy od sebe, takže soubor se najde, i když první řádek chybí. Cesty ponechte tak, jak jsou napsané, pokud vaše soubory neleží jinde.

Proč malé velikosti potřebují jednoduché tvary

Ikona o rozměrech 16 × 16 pixelů má celkem 256 pixelů. Ikona 48 px jich má 2 304 a zdrojový obrázek 512 px jich má 262 144. Většina detailů loga zmizí dřív, než se dostane na 16 pixelů, takže tenká čára nebo malé slovo se změní v rozmazanou skvrnu. Použijte jednoduchou značku, nebo jedno či dvě písmena s výrazným kontrastem.

Možnost písmene přijímá jeden nebo dva znaky a vykreslí je velká uprostřed ikony, a pokud jsou příliš široké, zmenší je. Dostupné tvary jsou Čtverec, Zaoblený a Kruh. Náhled zobrazuje vedle sebe výsledky pro 16, 32, 48, 180 a 512 px a také světlou a tmavou kartu, takže můžete posoudit malé velikosti ještě před stažením. Náhledy se aktualizují podle toho, jaký tvar, okraj nebo pozadí zvolíte, takže si každé nastavení můžete nejdřív vyzkoušet.

Okraj, pozadí a ikona pro Apple

Okraj má tři nastavení: Bez okraje, Malý a Velký. Malý nechá na každé straně prázdných 10 procent ikony, Velký 20 procent. V režimu obrázku Bez okraje ořízne obrázek na jeho středový čtverec, takže se ztratí okraje širokého loga. Nastavení s okrajem naopak vloží celý obrázek dovnitř čtverce.

Na výběr je pozadí Průhledné, Bílé a Vlastní, přičemž výchozí je Průhledné. Ikona Apple touch je vždy neprůhledná. V režimu obrázku její průhledné části převezmou zvolené pozadí, a pokud je pozadí Průhledné, pak bílé. V režimu písmene převezmou barvu pozadí písmene. Průhledné části ikony Apple touch se na iPhonu a iPadu mohou zobrazit jako černé, proto je generátor vyplní. Ostatní velikosti si zachovávají průhlednost, kterou jste zvolili. Proč se průhledné PNG mění na černé pozadí vysvětluje příčinu.

Favicon je čtvercová, takže široké logo potřebuje nejdřív čtvercový rámeček. Tvůrce čtvercové fotky vloží celý obrázek do rámečku 1:1 s rozmazaným, bílým, černým nebo vlastním okrajem, takže nic není oříznuté. Změna velikosti obrázku nastaví přesné rozměry v pixelech. Pokud zapnete Zachovat poměr stran a vyplníte obě strany, obrázek se vejde do rámečku bez zkreslení. Poměry stran fotek vysvětleně popisuje běžné tvary.

Změny, které se zobrazují se zpožděním

Prohlížeče si favicon ukládají do mezipaměti. Změněný soubor na stejné adrese může ještě delší dobu zobrazovat starou ikonu, takže běžné obnovení stránky často nestačí. Otevřete adresu ikony přímo a ověřte, že je na serveru nový soubor, a potom stránku znovu načtěte s obejitím mezipaměti. Pokud se stará ikona stále zobrazuje, dejte novému souboru jiný název a upravte odkaz tak, aby na něj ukazoval.

Jak to udělat ve fixmint

1. Zvolte Obrázek a přetáhněte své logo do pole, nebo zvolte Písmeno a napište jeden nebo dva znaky.
2. Nastavte Okraj na Bez okraje, Malý nebo Velký a Pozadí na Průhledné, Bílé nebo Vlastní barvu.
3. Zkontrolujte ikony 16, 32 a 48 px na světlé a tmavé kartě a náhledy 180 a 512 px.
4. Stiskněte Stáhnout ZIP pro všech sedm souborů, nebo Stáhnout favicon.ico pro jeden soubor.
5. Stiskněte Kopírovat HTML a vložte řádky z HTML pro hlavičku do hlavičky každé stránky.

Okrajové případy

• Váš obrázek zůstává ve vašem zařízení. Generátor vytváří ikony ve vašem prohlížeči a nic se nenahrává.
• Dvě písmena. Dva znaky se přijmou a vykreslí menší, aby se vešly obě, takže jsou při 16 px hůř čitelné než jedno písmeno.
• Názvy souborů. Ponechte názvy, které používá HTML, protože na ně odkazy míří.
• Nečitelné soubory. Pokud se obrázek nepodaří převést na ikony, generátor zobrazí hlášení „Z tohoto vstupu nebylo možné vytvořit ikony. Zkuste jiný obrázek.“ a výstupy vymaže. Zkuste jiný soubor, nebo obrázek uložte znovu v běžném formátu.