Как да направите фавикон
Размерите, форматите и кодът, от които имате нужда, за фавикон, който се показва навсякъде.
Фавиконът е малката икона в раздела на браузъра, в отметките и до вашия сайт в мобилните резултати на Google. Липсващият фавикон кара сайта да изглежда недовършен, а размазаният изглежда още по-зле. Създаването на добър фавикон отнема няколко минути.
Започнете с правилната графика
Фавиконът се показва в размер дори 16 на 16 пиксела, така че пълно лого с надпис ще бъде нечетимо. Използвайте прост знак: символа от логото си, една начална буква или плътна форма в цвета на марката ви. Изпробвайте го, като го смалите до една четвърт от размера на екрана: ако все още личи какво е, ще свърши работа.
Започнете от квадратно изображение с размер поне 512 на 512 пиксела, в идеалния случай PNG с прозрачен фон. Ако логото ви не е квадратно, изрежете го до квадрат със заключено съотношение 1:1.
Файловете, които ви трябват
| Файл | Размер | Използва се от |
|---|---|---|
| favicon.ico | Съдържа версии от 16, 32 и 48 пиксела | Браузъри, по-стари системи, заявката по подразбиране за /favicon.ico |
| PNG икона | 32 на 32 и 192 на 192 | Съвременни браузъри, начални екрани на Android |
| apple-touch-icon.png | 180 на 180 | Отметки на началния екран на iPhone и iPad |
Google Search също използва фавикона ви в резултатите. Той трябва да е квадрат с размер поне 48 на 48 пиксела и да е достъпен за обхождащия робот на вашия сайт.
Създаване на ICO файла
Пуснете квадратния си PNG в конвертора от PNG към ICO. Той създава истински .ico файл с малките размери, които браузърите изискват. За PNG версиите преоразмерете същото квадратно изображение до 180, 192 и 32 пиксела.
Добавяне към сайта
Качете favicon.ico в главната папка на сайта, за да е достъпен на vashiyat-sait.com/favicon.ico, и добавете тези редове в head на страниците си:
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" href="/bg/icon-192.png" sizes="192x192"> <link rel="apple-touch-icon" href="/bg/apple-touch-icon.png">
В WordPress отидете в Appearance, Customize, Site Identity и качете квадратно изображение като Site Icon; WordPress създава размерите вместо вас. Shopify, Wix и Squarespace имат настройка за фавикон в настройките на сайта или на темата.
Когато новият фавикон не се показва
Браузърите упорито пазят фавиконите в кеша си. Отворете сайта в частен прозорец или отидете директно на vashiyat-sait.com/favicon.ico и опреснете. На Google може да са нужни дни или седмици, за да обнови иконата в резултатите от търсенето, след като обходи отново началната ви страница.
Чести грешки
- Използване на пълното лого с дребен текст, което при 16 пиксела се превръща в петно.
- Бяла икона върху прозрачен фон, която изчезва в светлите раздели на браузъра.
- Предоставяне само на мъничък файл от 16 пиксела, който изглежда размазан на екрани с висока резолюция.
- Забравен файл на /favicon.ico, който някои браузъри и роботи изискват, независимо какво пише в страницата.