- Инструменты /
- Favicon для сайта онлайн
Favicon для сайта онлайн
Зачем делать favicon?
- Узнаваемость сайта
Иконки favicon помогают сделать вкладку с вашим сайтом узнаваемой, это важно, когда пользователь одновременно открывает несколько ресурсов. С заметным фавиконом ваш сайт не потеряется среди других открытых вкладок.
- Информативность
Фавикон должен соответствовать цветовой гамме сайта и тематике компании. Вы можете использовать, например, логотип или первую букву названия или простое, но оригинальное графическое изображение, чтобы пользователь, увидев иконку вашего сайта, мог сразу определить, что на вкладке.
- Запоминаемость бренда
Если использовать в качестве фавикона логотип или его узнаваемый фрагмент, пользователи сайта будут часто его видеть и быстрее запомнят.
Как пользоваться сервисом для создания favicon?
Выбор изображения: Нажмите кнопку «Выбрать изображение с компьютера» на нашем сервисе. Загрузите квадратное изображение размером 512x512 пикселей, в одном из следующих форматов: jpg, jpeg, png или gif.
Создание Favicon: После того как вы загрузили изображение, нажмите кнопку «Создать Favicon» на нашем сервисе. Это запустит процесс создания иконки.
Предпросмотр и загрузка: Сервис предоставит вам пример того, как будет выглядеть ваш favicon. Если вам нравится результат, вы можете скачать готовый файл. Вы получите файл favicon.ico для вашего сайта.
Установка на сайт: После скачивания файлов, загрузите их на ваш сайт. Вставьте соответствующий код в тело html вашей веб-страницы, чтобы иконка отображалась корректно.
Как установить favicon на вашем сайте
Разместите изображение в корневом каталоге сайта под именем favicon.ico. Это приведет к созданию адреса в формате https://sitename.ru/favicon.ico, который является путем к вашему изображению. Если вы хотите использовать различные фавиконы для разных разделов сайта, этот путь будет важным для ориентации пользователей. Если же вы используете один favicon для всего сайта, путь указывать не требуется.
Загрузите на сайт следующие файлы на сервер:
- favicon.ico
Основной файл иконки, который будет отображаться во всех браузерах.
- apple-touch-icon.png
Иконка для устройств Apple, которая будет отображаться на главном экране.
- favicon-32x32.png
Иконка для браузеров, которые используют 32x32 пикселей.
- favicon-16x16.png
Иконка для браузеров, которые используют 16x16 пикселей.
- android-chrome-192x192.png
Иконка для устройств Android.
- android-chrome-512x512.png
Иконка для устройств Android.
- site.webmanifest
Файл манифеста, который содержит информацию о вашем сайте.
После этого скопируйте приведенные ниже ссылочные теги и вставьте их в секцию head вашего HTML-кода:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> <link rel="manifest" href="/site.webmanifest" />
Не забудьте также отредактировать название вашего сайта и пути в файле site.webmanifest, открыв его в текстовом редакторе.
Вопросы и ответы
Почему мой фавикон не отображается в выдаче?
Индексация фавиконов в Яндексе занимает от недели до месяца. В выдаче Google фавиконок нет.
Наличие фавикона входит в факторы ранжирования поисковых систем?
Иконки никак не влияют на SEO и отношение поисковиков к сайту, но могут косвенно повлиять на трафик и кликабельность сниппета за счет того, что ссылка в выдаче становится чуть привлекательнее.
Обязательно делать несколько размеров иконок?
Можно установить один фавикон для всех вариантов отображения, но есть риск, что на некоторых устройствах он будет выглядеть расплывчатым и некачественным.
Как проверить, как ПС видит фавикон?
Проверить, как поисковые боты видят фавиконку, можно с помощью URL: Яндекс (https://favicon.yandex.net/favicon/имя_домена) и Google (https://www.google.com/s2/favicons?domain=имя_домена).