Генератор фавиконок

Что такое фавикон?

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

Создание фавикона

Выберите изображение, лучше квадратное, не меньше 512 × 512 пикселей. Toolo создаст:

• файл favicon.ico - классический формат, который понимают все;
• набор PNG современных размеров, скачиваемый одним ZIP-архивом.

Установка файлов

Положите favicon.ico в корень сайта: браузеры сами ищут его по адресу /favicon.ico. Затем добавьте в <head> страниц соответствующие теги, например:

• <link rel="icon" href="/favicon.ico" sizes="any">
• <link rel="apple-touch-icon" href="/apple-touch-icon.png">

Для устанавливаемого веб-приложения укажите значки 192 и 512 в файле manifest.webmanifest.

Как сделать хороший крошечный значок

• Упрощайте: при 16 пикселях детальный логотип превращается в пятно. Буква, символ или простая форма работают лучше.
• Думайте о контрасте: значок должен читаться и на светлой, и на тёмной вкладке.
• Используйте площадь: оставляйте минимум пустого места вокруг рисунка.

Новый фавикон не отображается

Браузеры долго хранят фавиконы в кэше. Обновите страницу с очисткой кэша, откройте сайт в режиме инкогнито или добавьте к адресу параметр версии, например /favicon.ico?v=2.

Частые вопросы

Изображение должно быть квадратным?

Желательно. Неквадратное изображение будет подогнано и может слегка исказиться. Сначала обрежьте его до квадрата инструментом «Обрезать изображение».

Моё изображение отправляется на сервер?

Нет. Значки создаются в браузере; изображение не покидает устройство.

Сохраняется ли прозрачность PNG?

Да. Прозрачность сохраняется и в файле ICO, и в PNG.

Действительно ли нужны все размеры?

Для вкладок достаточно favicon.ico. PNG размером 180, 192 и 512 улучшают отображение на главном экране телефонов и в веб-приложениях.