Favicon.ico – Икона на уебсайт в браузъра

Inainte sa fie lansat un website, i se adauga un fisier grafic, favicon, който ще се появи в браузъра, в адресната лента. В повечето ситуации favicon е миниатюра на графичното лого или инициалите на съответния уебсайт. Тази фавикона се добавя, за да помогне на потребителите по-бързо да идентифицират уеб адрес в отметките.

Доскоро този файл трябваше да бъде във формата form “favicon.ico“, които да бъдат идентифицирани от уеб браузъра. Chrome, Internet Explorer, Opera, Safari, Firefox и др.
De cativa ani, odata cu avansarea noilor limbaje web, Html9 и CSS3, favicon също може да бъде един fisier .png или .jpg. Conditia este ca in header-ul site-ului, преди </глава>, редът трябва да присъства:

<връзка rel=”икона за бърз достъп” href=”/images/favicon.ico” тип=”изображение/х-икона” / />

Икона на уебсайт за iOS – iPhone, iPad и iPod Touch

В iOS можем да добавим преки пътища към уеб страници PE Home Screen-ULiPhone, iPad и iPod Touch.

Как да добавите пряк път към уебсайт на началния екран на iPhone, iPad и iPod

Правим това, като отворим уеб страница на iPhone (Safari, Chrome и т.н. интернет браузър), натиснете квадратчето със стрелката (знакът за “Споделяне” в iOS), след това опцията “Добавяне към началния екран“.

Ако уебсайтът има фавикон, зададен за браузъра, но не е зададен конкретната икона за iOS устройства, на екрана ще се появи икона, състояща се от представете си визуализация на уеб страницата.

Как да добавите уеб икони за iPhone, iPad и Android.

Първата стъпка е дасъздаваме изображение за иконата, който ще се появи на Home Screenидеята. За да може уеб иконата да бъде съвместима на всички устройства и да се вижда ясно, трябва да създадем изображението за всички резолюции на iPhone и iPad.

Стандартните разделителни способности и размери на иконите за iPhone, iPad, iPod и Android

• Класически модели iPhone / iPod = 57×57
• iPad = 76×76
• iPhone / iPod Retina = 120×120
• iPad Retina = 152×152
• iPhone 6/6S Plus = 180×180

Apple актуализирайте редовно препоръчителни размери на икониURL адреси приложения и уеб страници PE тази страница.

За устройства с Android иконите са с два размера:

• Класически Android = 128×128
• Android с висока резолюция (hi-res) = 192×192

След като направим изображенията, те се качват на уеб сървъра и в HTML източника на уебсайта, преди да затворят </глава>се добавят следните редове:

<връзка href=”/apple-touch-icon.png” rel=”икона за докосване на ябълка” / /> <връзка href=”/apple-touch-icon-76×76.png” rel=”икона за докосване на ябълка” размери=”76×76″ / /> <връзка href=”/apple-touch-icon-120×120.png” rel=”икона за докосване на ябълка” размери=”120×120″ / /> <връзка href=”/apple-touch-icon-152×152.png” rel=”икона за докосване на ябълка” размери=”152×152″ / /> <връзка href=”/apple-touch-icon-180×180.png” rel=”икона за докосване на ябълка” размери=”180×180″ / /> <връзка href=”/icon-hires.png” rel=”Икона” размери=”192×192″ / /> <връзка href=”/икона-нормална.png” rel=”Икона” размери=”128×128″ / />

За устройства на Apple името на изображението е .PNG и “rel=” трябва да съдържа префикса “ябълка-“. За Android имената на файловете ще бъдат “icon-hires.png” и “icon-normal.png” с rel=”Икона”.

Не е абсолютно необходимо да създавате изображения за всяка разделителна способност поотделно. Можете да направите изображение за най-висока разделителна способност, а устройствата с по-ниска разделителна способност ще го идентифицират и ще го зададат като икона.

Иконата на прекия път към уебсайта ще изглежда подобно на всяка друга приложения за iOS.