Конвертиране на PNG в ICO (favicon)

Какво трябва да прави един favicon

Favicon се показва в много малки размери, често 16 на 16 пиксела. При този размер финните детайли изчезват, а тънките линии се губят напълно. Добрият favicon е плътна, проста форма със силен контраст: една буква, опростена версия на знака от логото или плътна форма в цвета на марката. Ако пълното ви лого съдържа текст, използвайте само символа или само първата буква.

Причината .ico файловете да съдържат няколко размера е, че мащабирането на едно изображение нагоре или надолу при показване изглежда размазано. Като осигурите версии от 16, 32, 48 и 64 пиксела, операционната система или браузърът могат да покажат изображение, точно до пиксел, във всеки контекст: 16 px в раздел, 32 px в списък с отметки на екран с висока плътност, 48 px в пряк път в лентата на задачите на Windows и т.н.

Подготовка на изходния PNG

• Направете го квадратен. Ако логото ви е широко, първо го поставете върху квадратно прозрачно платно или изрежете до символа с инструмента за изрязване.
• Започнете от 256 пиксела или повече. Смаляването от голям, чист източник дава по-гладки резултати от уголемяването на малък.
• Запазете прозрачен фон, ако формата е плътна, за да изглежда добре и в светла, и в тъмна тема на браузъра. Ако формата е тънка или светла, поставете я върху квадрат с плътен цвят.
• Избягвайте текст, по-дълъг от един или два знака; при 16 пиксела той ще бъде нечетлив.

Инсталиране на favicon

Запазете изтегления файл като favicon.ico и го поставете в основната папка на сайта си. След това добавете това в <head> на всяка страница:

<link rel="icon" href="/favicon.ico" sizes="any">

Повечето платформи вместо това имат специална настройка: в WordPress тя се нарича Site Icon (Икона на сайта) в раздела Appearance (Външен вид), Shopify и Squarespace имат поле Favicon в настройките на темата, а Webflow има такова в Project Settings. Качете .ico файла там. За пълно ръководство прочетете как да направите favicon.

Още по-нататък

За пълния набор от икони, които съвременните устройства изискват, ще ви трябват и PNG от 180 пиксела за преки пътища на началния екран в iOS (apple-touch-icon) и PNG от 192 и 512 пиксела за Android и манифеста на уеб приложението. Това са обикновени PNG файлове, затова използвайте инструмента за преоразмеряване, за да ги направите от същия оригинал. Файлът .ico от тази страница покрива разделите на браузъра, отметките и Windows, където повечето хора забелязват липсващ favicon.