Статия

Създаване на favicon от PNG

Favicon е малка графика, която браузърите показват в разделите, отметките и списъците с история. Правилното му изпълнение включва повече от просто преоразмеряване на лого: форматът .ico пакетира множество резолюции в един файл, модерните браузъри предпочитат PNG, мобилните устройства имат свой собствен apple-touch-icon, а манифестите на уеб приложения се нуждаят от собствен набор от икони. Тази статия обхваща всяка от тях и обяснява как да произведете целия набор от единичен изходен PNG.

Написано от Bastien Sulyan · Публикувано на 29 юни 2026 г.

Какво е favicon и къде браузърите го използват

Думата favicon е съкращение от "favorite icon" (икона на любимите). Браузърите първоначално са го показвали в адресната лента в Internet Explorer 5 (1999), след това са го приели за отметките. Днес се появява в разделите на браузъра, лентата с отметки, историята на сърфирането, страницата за нов раздел в някои браузъри и лентите на задачите на операционни системи, когато даден сайт е закачен. На мобилни устройства, ако потребителят добави сайт към началния си екран, устройството използва свързано, но различно изображение, наречено apple-touch-icon, вместо стандартния favicon. Търсачките понякога показват favicon-и до резултатите в интерфейса си. Графиката е малка по проект, което я прави ефективна за бърза визуална идентификация, но и взискателна за добро производство: при 16x16 пиксела, подробно лого се превръща в неясно петно. Самият favicon файл е преминал през няколко формата с течение на десетилетията, като .ico остава най-широко съвместимият, а PNG сега е модерният стандарт за повечето браузъри.

Контейнерът .ico: множество резолюции в един файл

Форматът .ico е контейнер, а не единично изображение. Един .ico файл може да съдържа множество растерни изображения с различни резолюции, всяко съхранено като отделен запис в индекс в началото на файла. Трите най-чести размера са 16x16, 32x32 и 48x48 пиксела. Когато Windows показва favicon в Explorer или в лентата на задачите, той избира записа, който най-добре съответства на контекста на показване. По-старите версии на Windows се нуждаеха от запис 48x48 за слотове с висока плътност в лентата на задачите. Браузърите искат favicon с 16x16 за разделите, но могат да използват по-голям запис, ако е открит дисплей с по-висока плътност. Пакетирането на трите размера в един .ico файл означава, че единична HTTP заявка покрива всеки случай на употреба. Разпределението им като отделни PNG файлове също е валидно, но изисква допълнителни link тагове и добавя HTTP заявки. Вътрешните изображения в .ico файл са стандартни BMP или PNG данни, така че контейнерът добавя само малко заглавие за всеки запис.

Проектиране за малки размери: опростете знака

При 16x16 пиксела имате 256 пиксела общо. Типичен логотип с словесна марка или фини детайли става нечетлив при този размер. Стандартният подход е да се създаде опростен знак: единична буква, абстрактна форма или икона, представляваща бранда без да разчита на детайли. Няколко конкретни проблема за предвиждане: тънките щрихи изчезват напълно при малки размери, особено на дисплеи без retina. Двойки букви и детайли с отрицателно пространство се сливат в сив шум. Градиентите стават едва видими. Висок контраст между знака и фона му е единственият най-важен фактор за четливост. Плътна форма на обикновен фон почти винаги се чете по-добре от подробна илюстрация при 16x16. Размерите 32x32 и 48x48 са по-снизходителни и могат да поддържат малко повече детайли, но версията 16x16 трябва да се третира като ограничаващото условие. Ако знакът все още не се чете при 16x16, дизайнът изисква допълнително опростяване.

Модерният набор: .ico, PNG икони, apple-touch-icon, манифест и HTML link тагове

Пълната настройка на favicon за публичен сайт в момента изисква пет неща. Първо, favicon.ico в корена на сайта (браузърите искат /favicon.ico директно, без link таг като резервен вариант). Второ, PNG с 32x32 за модерни настолни браузъри, деклариран с link таг: `<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">`. Трето, PNG с 16x16 за размера на раздела: `<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">`. Четвърто, apple-touch-icon с 180x180 пиксела за отметки на началния екран на iOS: `<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">`. Пето, манифест за уеб приложение (site.webmanifest) с PNG 192x192 и 512x512 за Android и прогресивни уеб приложения. Прозрачността се поддържа в PNG и в PNG-кодираните записи вътре в .ico, въпреки че apple-touch-icon трябва да има непрозрачен фон, защото iOS игнорира алфа канала и запълва прозрачните зони с черно.

Правете го локално: favicon-generator пази изображението ви на устройството ви

Генераторът favicon на този сайт взима PNG и произвежда пълния набор: многорезолюционен favicon.ico, пакетиран с записи 16x16, 32x32 и 48x48, отделните PNG размери за директна употреба с link тагове и apple-touch-icon с 180x180. Всичко това се случва в браузъра ви с Canvas API и JavaScript .ico кодер. Изходното ви изображение никога не се качва никъде; то остава на устройството ви. Това е важно, когато изходният файл е лого на компания или актив, който не трябва да напуска вашата машина, преди да контролирате накъде отива. Всеки генериран файл се предлага като отделно изтегляне, с конвенционалните имена на файлове. Копирате ги в корена на сайта си и добавяте съответните link тагове в HTML head-а си. Ако изходното ви лого има фини детайли, които не оцеляват при рендерирането в 16x16, можете да го изрежете или опростите, преди да го пуснете в генератора, или да предоставите различно изходно изображение, специално подготвено за favicon.

Инструменти от тази статия

Често задавани въпроси

Все още ли ми трябва favicon.ico, ако декларирам PNG link тагове?

Да, по две причини. Първо, браузъри, които не четат HTML-а ви (уеб роботи, RSS четци, някои стари мобилни браузъри), търсят /favicon.ico директно в корена на домейна. Ако файлът липсва, те генерират 404 заявка при всяко зареждане на страница, което добавя шум към регистрационните ви файлове и малко ненужно завъртане. Второ, по-старите версии на Internet Explorer разпознават само .ico формата и игнорират PNG link тагове. Предоставянето и на двете покрива всички случаи.

Мога ли да използвам SVG като favicon?

Chrome и Firefox поддържат SVG favicon-и чрез `<link rel="icon" type="image/svg+xml" href="/favicon.svg">`. Safari не поддържа SVG favicon-и. Тъй като SVG favicon-ите са независими от резолюцията, те изглеждат остри на всяка плътност на дисплея, включително retina екрани, без да се нуждаят от множество варианти по размер. Практическата препоръка е да декларирате SVG link тага за браузъри, които го поддържат, и все пак да включите .ico резервния вариант за пълно покритие. SVG favicon-ите могат също да включват медийна заявка `prefers-color-scheme`, за да превключват автоматично между светла и тъмна версия.

От какво изображение да започна, за да получа най-добър резултат?

Квадратен PNG с размер 512x512 или по-голям с прозрачен фон дава най-голяма гъвкавост. Започването с голям размер и намаляването запазва повече детайли, отколкото започването от малко изображение. Ако основното ви лого включва словесна марка, помислете за подготовка на отделна опростена версия, показваща само иконата или знака, тъй като текстът няма да бъде четлив при 16x16, независимо от изходната резолюция. Висок контраст между знака и фона му е най-надеждният предиктор за това дали малките размери ще се четат ясно.