Как да създадете икона за сайт (favicon).

Отворете Favicon / ICO Generator и изберете Image. Качете PNG, JPG, JPEG, WebP или GIF, или изберете Try a sample. Работният пример използва favicon-orbit.png, 512 × 512 пикселов виолетов орбитален знак с прозрачни ъгли. Входните данни са 202,491 байта.

За марка без готово лого, изберете Text на страницата на инструмента. Въведете една или две букви и изберете Continue. Редакторът предлага шрифтове Modern sans, Classic serif и Monospace, плюс отделни цветове за текста и фона. Приемат се до три знака, но допълнителните знаци могат да станат трудни за разпознаване при малки размери.

Запазете оригиналното произведение. Генераторът създава нови файлове с икони и не презаписва източника. GIF входът става статична икона, а не анимиран favicon.

За монограм, менюто Font започва с три включени стила. Изберете Use system fonts на поддържан настолен браузър и разрешете достъп, за да добавите шрифтовете, инсталирани на вашето устройство. Използвайте предишните и следващите стрелки, за да сравните съседни шрифтове, или изберете семейство и проверете визуализацията на живо, особено при 16 пиксела. Шрифтовете остават на вашето устройство; включените стилове работят без разрешение.

Редакторът показва светли и тъмни раздели на браузъра плюс визуализации при често срещани размери на икони. Първо проверете примера от 16 пиксела; това е най-строгият тест дали знакът остава разпознаваем. Визуализацията Apple Touch представлява експорт от 180 пиксела и се показва по-малка в работното пространство.

На телефон отворете Settings. Оставете Create from настроено на Uploaded image и Image fit настроено на Show the whole image. За тази проба задайте Space around content на 0 и активирайте Transparent background. Източникът вече съдържа своя собствена заоблена виолетова форма и ясни полета, така че не се нуждае от допълнителен цветен фон.

С различен източник, Show the whole image запазва краищата си, докато Fill the icon може да ги изреже. Rounded square, Square и Circle определят външната форма. Transparent background запазва ясните зони, но не може да премахне непрозрачен фон, който вече е нарисуван в снимка. Преглеждайте най-малката визуализация след всяка промяна на рамкирането.

Под „Изтегляне“ изберете „Пакет с икони за уебсайт (ZIP)“ за този пример. Оставете името на уебсайта като „My website“ за пробата или го заменете с истинското име на марката за вашия проект. Това име се използва в site.webmanifest; то не се добавя като текст върху изображението.

Изберете „Старт“. Браузърът генерира favicon.ico със седем кадъра с квадратни изображения с размери 16, 24, 32, 48, 64, 128 и 256 пиксела. Той също така създава PNG икони с размери 16, 32, 48, 180, 192 и 512 пиксела, манифест и инструкции за инсталиране. Резултатът е един ZIP файл, вместо отделен бутон за изтегляне за всяка икона.

Ако имате нужда само от класически favicon.ico, изберете вместо това ICO с множество размери. Това е полезно, когато платформата на уебсайта приема качване на ICO и не се нуждае от отделен пакет.

Изтеглянето записва website-icons.zip. Действителният работен пример съдържа девет файла и е с размер 304,351 байта. Сравнението по-горе показва източника от 512 пиксела до истинския кадър от 256 пиксела, извлечен от експортирания ICO, вместо симулирана екранна снимка от браузър.

Разархивирайте ZIP файла, качете файловете с икони в коренната директория на вашия уебсайт и прочетете INSTALL.txt. Той включва HTML връзки (link tags) за ICO, PNG иконата, иконата Apple Touch и уеб манифеста. Ако поставите файловете в подпапка, актуализирайте както пътищата HTML, така и пътищата до иконите в site.webmanifest.

Проверете сайта си в нов раздел на браузъра и на устройствата, които ви интересуват. Браузърите могат да кешират икони (favicons), така че стара икона не доказва веднага, че инсталацията е неуспешна. Запазете изходното изображение и изтегления пакет, преди да опресните редактора, тъй като опресняването връща към основната страница на инструмента.