Создание: 05.02.2023
Обновлено: 27.10.2023
Автор:
Кирилл Сатулин
Просмотров:
22 555
Время прочтения:
10 мин.

Фавикон на Тильде

Разберем 3 простых способа создания фавикон:
1. Как нарисовать его самому
2. Как сделать favicon с помощью готовых иконок
3. Как сделать фавиконку из готового логотипа
Еще больше интересных материалов в телеграм-канале

Что такое Фавикон

Favicon — это маленькая иконка вашего сайта, которая отображается на вкладке в браузере или в поисковой выдаче.
На поиске, по фавиконке, мы можем быстро идентифицировать знакомый нам бренд.
Например, легко найти в выдаче популярные бренды, такие как: Авито, Wildberries, Яндекс.Маркет, Сбер, Тинькофф, Apple, Вконтакте и тд.

Этим, кстати, пользуются мошенники, создающие копии сайтов.
Посмотрите на поисковую выдачу с айфонами, там сайты не брезгуют использовать такой же favicon, как у компании Эппл. При беглом просмотре выдачи, не сразу определишь, где настоящий сайт.

Поэтому, уделите время, созданию хорошей иконки, по которой в дальнейшем, возможно, будут идентифицировать ваш сайт или сайт вашего клиента

И ни в коем случае, не используйте стандартную иконку Tilda Publishing. Потому что, выглядит это крайне плохо и непрофессионально (особенно, если вы занимаетесь разработкой сайтов профессионально)
Помню, как один спикер из «Бизнес Молодости», делился лайфхаком, для повышения кликабельности объявления. Использовать в favicon красную стрелку, указывающую на ваше объявление в Директе.

3 способа создания favicon

1-й способ. Делаем сами с нуля

Этот способ можно попробовать использовать, если у вас нет логотипа

Используем сервис https://www.favicon.by/
В нем, мы можем выбрать цвет, который мы будем использовать для рисования иконки, прозрачность.
Следующим шагом, нам надо нарисовать по квадратам (пикселям) фигуру, которая будет использоваться, как фавикон

Потом, нажать импорт и сервис выгрузит нам в нужном для Тильды формате. Останется только ее загрузить на сайт.

Таким способом, хороший favicon не создашь, но можно попробовать написать первую букву названия сайта.

2-й способ. Favicon из готовых иконок

Этот способ также подойдет тем, у кого нет логотипа. Но смотреться такая фавиконка будет гораздо лучше первого способа

Для этого, нам нужно подобрать подходящую иконку под тематику сайта
Я использую для этого бесплатный сервис — https://icon-icons.com/ru/
Он на русском языке. Ищем в поиске отдельную иконку или скачиваем определенную коллекцию
Я, скачал кактус, для цветочной тематики. Смотрится как фавикон, очень хорошо

Какие тут нюансы

  1. Можно скачать сразу в формате ico (если дает такую возможность, потому что не у всех иконок, есть такой формат)
  2. Можно скачать в другом любом формате и воспользоваться конвертером, который рекомендует сама Тильда, вот этот — https://www.xiconeditor.com/
  3. Старайтесь скачивать квадратные картинки, иначе, какая то из сторон, будет автоматически обрезаться Тильдой. О том, как самому сделать квадратную иконку, я расскажу в 3-м способе
  4. Можно использовать и обычные картинки (только потом их нужно перевести в формат .ico), но не берите картинки с мелкими деталями, так как они будут плохо смотреться.

3-й способ. Как сделать фавикон из логотипа

Подробно, я говорю об этом способе в видео на этой странице (Рекомендую посмотреть)

Этот способ создания фавикон самый хороший
Для этого, у вас должен быть логотип

Использовать будем Figma (всё очень просто)
  1. Загружаем лого в Фигму
  2. Нам нужно выбрать квадратную часть из лого (если он у вас не квадратный), которая будет преобразована в фавикон
  3. Нажимаем на картинку и выбираем сверху инструмент Crop
  4. Выбираем нужную область, которая будет у нас фавиконкой (убираем все ненужное)
  5. Для этого можем приблизить, чтобы точно убрать все ненужные края
  6. Нажимаем Enter
  7. Теперь нам нужно сделать ее квадратной (если у вас квадратная, то пропускайте)
  8. Для этого, выбираем нашу картинку, правой кнопкой мыши жмем и выбираем Frame Selection
  9. Выбрав фрейм, справа меняем ширину или высоту так, чтобы получился квадрат
  10. Перетягиваем нашу иконку в центр, потянув за нее мышью
  11. Выбираем фрейм, справа внизу, где Export, жмем + (плюс) и нажимаем на Export Frame, формат PNG
  12. Сохраняем на ноутбуке
  13. Если размер картинки, меньше 270 px, то перед экспортом (где Export), нажать на 1х и выбрать увеличение размера, чтобы получилось не менее 270px (потом поймете зачем)
  14. Конвертируем с помощью сервиса, о котором я писал выше, в тильдовский формат ico

В каком формате загружать фавикон в Тильду

В Тильду, можно загружать 3 вида иконок
  1. Стандартная, про которую говорили выше
  2. Для браузеров Safari
  3. Для плиток Windows
Для стандартной иконки, нужен формат — ico
Для 2 и 3 пункта нужен — png

Как сконвертировать в нужный для Tilda формат

  1. Идем сервис — https://www.xiconeditor.com/
  2. Нажимаем Import
  3. Нажимаем Upload и выбираем иконку, которую хотим сконвертировать
  4. Теперь нам нужно выбрать отображаемую часть. Для этого за правый нижний угол, нужно потянуть до конца края
  5. Нажимаем ОК и получается картинка с пикселями. Не пугайтесь, так и должно быть)))
  6. Далее Export
  7. И еще раз — Export Your icon
  8. Сохраняем на компьютере

Для Сафари и плиток Виндовс

Для этих видов иконок используем формат PNG

Как правило, логотипы все в формате PNG, JPG или SVG
Если у вас не ПНГ, то воспользуйтесь этим сервисом, для перевода из другого формата в нужный

Размер картинки должен быть не менее 270 пикселей и квадратный
Более подробно, я показываю в видео

Как загрузить favicon в Tilda

  1. Идем настройки сайта
  2. Выбираем пункт «Еще» в самом низу настроек
  3. Нажимаем Upload file и выбраем нашу иконку в формате .ico
  4. Для Safari и плиток Windows, нужно нажать на соответствующую ссылку там же, но чуть ниже
  5. Сохранить и Переопубликовать все страницы
  6. Если изменений нет, то обновите кэш, с помощью комбинаций клавиш «ctrl+F5» (или смотрите в инкогнито)

Проблемы или ошибки

Нужно еще раз опубликовать все страницы, далее перезагрузить страницу с помощью комбинаций клавиш ctrl+F5 (на Windows) или cmd+R (на MacOS), а также попробуйте посмотреть в инкогнито

Видео: Как создать, добавить (изменить) фавикон на Тильде

Комментарии к статье

Рекомендуемые статьи
Из-за ограничений в Youtube, приходится переходить на другие платформы:
Rutube
VK
VK
Все мои соц сети и мессенджеры:
Последние видео с канала

Подпишитесь на новинки

Материалы, которые не публикуются больше нигде, кроме телеги!
Made on
Tilda