Как создать favicon для сайта самостоятельно?
Юрий, Ярославль 386 просм.
У меня самодельный сайт на конструкторе, и вместо иконки во вкладке браузера до сих пор стоит серый квадрат. Как сделать нормальный фавикон своими силами, без дизайнера?
Алексей Петров технический директор
ответил
Фавикон делается в три шага: нарисуйте простой квадратный значок в высоком разрешении, например 512х512 пикселей, загрузите его в бесплатный генератор вроде favicon.io или realfavicongenerator.net - он сам нарежет картинку под нужные размеры и форматы, - а затем подключите готовый набор файлов на сайте одной строкой кода в head страницы.
Для самого значка не нужен дизайнер: подойдёт первая буква названия компании на однотонном фоне, простой символ или упрощённая версия логотипа без мелких деталей - на 16х16 пикселях, а именно так фавикон видно в вкладке браузера, мелкие элементы всё равно сольются в кашу. Нарисовать такой значок можно в Canva или даже в Figma за десять минут.
Генератор отдаёт архив с файлом favicon.ico и несколькими PNG под разные устройства - обычно 16х16, 32х32 и 180х180 для иконки на экране айфона. Эти файлы нужно загрузить в корневую папку сайта, а в html-коде каждой страницы, внутри тега head, прописать несколько строк вида link rel="icon" href="favicon.ico" - готовый код сайт-генератор тоже выдаёт сам, останется вставить его в шаблон.
Если сайт собран на конструкторе вроде Tilda или на WordPress, отдельный код чаще всего не нужен: ищите в настройках сайта пункт "Иконка сайта" или Site Icon и просто загружайте туда готовую картинку 512х512 - платформа сама сделает остальное. После загрузки фавикон иногда не обновляется из-за кэша браузера: если новая иконка не появилась сразу, откройте сайт в режиме инкогнито или очистите кэш вкладки.
Задать свой вопрос
Вопросы проходят модерацию. Ответ специалиста студии публикуется на сайте в течение пары дней.
Вопрос отправлен на модерацию. После проверки он появится на сайте вместе с ответом.
Вопрос не отправлен: нужно подтвердить согласие на обработку персональных данных.