Favicon.ico – Ikona webové stránky v prohlížeči

Před spuštěním webové stránky je přidán grafický soubor, favicon, který se zobrazí v prohlížeči v adresním řádku. Ve většině situací je favicon miniaturou grafického loga nebo iniciálami příslušné webové stránky. Tato favicon je přidána, aby uživatelům pomohla rychleji identifikovat webovou adresu v záložkách.

Až donedávna musel být tento soubor ve formě formuláře “favicon.ico“, které mají být identifikovány webovým prohlížečem. Chrome, Internet Explorer, Opera, Safari, Firefox atd.
Po několik let, s rozvojem nových webových jazyků, Html9 a CSS3, favicon může být také jedna fisier .png nebo .jpg. Podmínkou je, že v záhlaví webu před </hlava>, řádek by měl být přítomen:

<odkaz rel=”ikonu zástupce” href=”/images/favicon.ico” typ=”obrázek/ikona x” />

Ikona webu pro iOS – iPhone, iPad a iPod Touch

V IOS můžeme přidat zkratky webových stránek pe Domovská obrazovka-UliPhone, iPad a iPod touch.

Jak přidat zástupce webu na domovskou obrazovku iPhone, iPad a iPod

To provedeme tak, že si na iPhonu (Internetový prohlížeč Safari, Chrome atd.) otevřeme webovou stránku, stiskneme čtvereček se šipkou (znak pro “podíl” v iOS), pak možnost “Přidat na domovskou obrazovku“.

Pokud má web favikonu nastavenou pro prohlížeč, ale není nastavena specifická ikona pro zařízení iOS, na obrazovce se objeví ikona skládající se z představte si náhled webové stránky.

Jak přidat webové ikony pro iPhone, iPad a Android.

Prvním krokem jevytvoříme obrázek pro ikonu, který se objeví na Domovská obrazovkaidevice. Aby byla ikona webu kompatibilní na všech zařízeních a byla jasně vidět, musíme obrázek vytvořit pro všechna rozlišení iPhone a iPad.

Standardní rozlišení a velikosti ikon pro iPhone, iPad, iPod a Android

• Klasické modely iPhone / iPod = 57×57
• iPad = 76×76
• iPhone / iPod Retina = 120×120
• iPad Retina = 152×152
• iPhone 6/6S Plus = 180×180

Apple pravidelně aktualizovat doporučené velikosti ikonURL Aplikace a webové stránky pe tuto stránku.

U zařízení Android mají ikony dvě velikosti:

• Klasický Android = 128×128
• Android s vysokým rozlišením (hi-res) = 192×192

Poté, co jsme vytvořili obrázky, jsou před uzavřením nahrány na webový server a do zdroje HTML webu </hlava>, doplňují se tyto řádky:

<odkaz href=”/apple-touch-icon.png” rel=”Apple-touch-ikona” /> <odkaz href=”/apple-touch-icon-76×76.png” rel=”Apple-touch-ikona” velikosti =”76×76″ /> <odkaz href=”/apple-touch-icon-120×120.png” rel=”Apple-touch-ikona” velikosti =”120×120″ /> <odkaz href=”/apple-touch-icon-152×152.png” rel=”Apple-touch-ikona” velikosti =”152×152″ /> <odkaz href=”/apple-touch-icon-180×180.png” rel=”Apple-touch-ikona” velikosti =”180×180″ /> <odkaz href=”/icon-hires.png” rel=”ikona” velikosti =”192×192″ /> <odkaz href=”/icon-normal.png” rel=”ikona” velikosti =”128×128″ />

U zařízení Apple je název obrázku .PNG a “rel=” musí obsahovat předponu “jablko-“. Pro Android budou názvy souborů “icon-hires.png” a “icon-normal.png” s rel=”ikona”.

Není bezpodmínečně nutné vytvářet obrázky pro každé rozlišení zvlášť. Můžete vytvořit obrázek pro nejvyšší rozlišení a zařízení s nižším rozlišením jej identifikuje a nastaví jako ikonu.

Ikona zástupce na web bude vypadat podobně jako kterákoli jiná aplikace pro iOS.