Weblap ikonok mobilokon, tableteken (Androidon és iOs-en)

Miért is érdemes?

Amikor arra törekszünk, hogy cégünket jellemző emblémánk, logo-nk minél jobban a látogatók memóriájába véssük, érdemes az apró részletekre is figyelni. Például, ha az adott személy ismét fel szeretné keresni a weboldalunk, de a sok előzmény, könyvjelző között nem találja gyorsan, akkor bizony azt az értékes látogatót, érdeklődőt el is veszítettük. A könyvjelzők közt ott van a favicon, ami kiemel a sorból minket, mármint weboldalunk. Ma is sok weboldal hanyagolja, pedig igen fontos, látványos a hiánya. Azonban további igen gyakori hiányosság a különféle méretű ikon képek, melyeket a mobiltelefonok és tabletek (android és iOs rendszerek egyaránt) használnak és megjelenítenek. Ha tehetjük, miért is ne emelkedjünk ki a tömegből? Lássunk egy példát. Az androidos Chrome böngészőnél a gyakorta felkeresett oldalakat az első lapon megjeleníti a következő módon:

A képen látható, hogy mennyivel is jobban mutat egy oldalunkra jellemző ikon, mint sem csupán egy betű, amit a böngésző automatikusan generál? A freemail nem törődik az ikonok helyes használatával, ellentétben a másik 4 oldallal, köztük a saját oldalunkkal. Alaphelyzetben ez a kép úgy nézne ki, hogy van 5 db szürke hátteres betű és egy ikonos. Nem az ikonos kép fogja a szemet, tekintetet vonzani? Dehogynem!

Hogyan használjuk?

Először is ki kell választani egy az oldalunkra jellemző képet, színt. Érdemes az oldal, cég logóját használni erre a célra. A képnek minimum 64*64, maximálisan 192*192 pixel méretűnek és 1:1 képarányúnak kell lennie, mivel az android és az iOs-ek ezt támogatják ikonoknak. A használatuk egyszerű. Csak helyezzük a weboldalunk fejlécébe a </head> rész elé a következő kódot:

Html weboldalhoz:

<link href="//www.yoursite.com/icon-devices.png" rel="apple-touch-icon" />
<link href="//www.yoursite.com/icon-devices-76.png" rel="apple-touch-icon" sizes="76x76" />
<link href="//www.yoursite.com/icon-devices-120.png" rel="apple-touch-icon" sizes="120x120" />
<link href="//www.yoursite.com/icon-devices-152.png" rel="apple-touch-icon" sizes="152x152" />
<link href="//www.yoursite.com/icon-devices-180.png" rel="apple-touch-icon" sizes="180x180" />
<link href="//www.yoursite.com/icon-devices-192.png" rel="icon" sizes="192x192" />
<link href="//www.yoursite.com/icon-devices-128.png" rel="icon" sizes="128x128" />

WordPress sablonban:

<link href="<?php echo get_template_directory_uri(); ?>/images/icon-devices.png" rel="apple-touch-icon" />
<link href="<?php echo get_template_directory_uri(); ?>/images/icon-devices-76.png" rel="apple-touch-icon" sizes="76x76" />
<link href="<?php echo get_template_directory_uri(); ?>/images/icon-devices-120.png" rel="apple-touch-icon" sizes="120x120" />
<link href="<?php echo get_template_directory_uri(); ?>/images/icon-devices-152.png" rel="apple-touch-icon" sizes="152x152" />
<link href="<?php echo get_template_directory_uri(); ?>/images/icon-devices-180.png" rel="apple-touch-icon" sizes="180x180" />
<link href="<?php echo get_template_directory_uri(); ?>/images/icon-devices-192.png" rel="icon" sizes="192x192" />
<link href="<?php echo get_template_directory_uri(); ?>/images/icon-devices-128.png" rel="icon" sizes="128x128" />

Az utóbbi kód a WordPress sablon mappájából az images/icon-devices-*.png elérésű kép url-ét fogja mutatni. Tehát a megfelelő nevű képeket töltsük fel a root/wp-content/themes/sablonunkneve/images/ mappába.

Ennyi is lenne az egész!

Forrás:

• KYLEJLARSON – How to Add Icons for iPhone, iPad & Android to Your Website (angol)