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

Favicon — это маленькая иконка вашего сайта, которая отображается на вкладке в браузере или в поисковой выдаче.

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

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

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

И ни в коем случае, не используйте стандартную иконку Tilda Publishing. Потому что, выглядит это крайне плохо и непрофессионально (особенно, если вы занимаетесь разработкой сайтов профессионально)

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

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

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

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

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

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

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

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

Использовать будем 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

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

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

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