Содержание
Создать фавикон онлайн | favicon.ico для сайта
X
- Новости Be1.ru
- Новости SEO
Be1 Вконтакте
1251 подписчиков
Be1 Facebook
1567 подписчиков
Новости
Сообщить о проблеме
Favicon — (от англ. FAVorites ICON в переводе «значок для избранного») — значок веб-сайта размером 16x16px или 32x32px, который отображается браузером в адресной строке или рядом с сохраненной закладкой. Традиционно название и расширение иконки используется favicon.ico.
Наш сервис способен конвертировать выбранное Вами изображение (размером до 175 Кб) в иконку значка сайта (размерами 16x16px или 32x32px). После генерации необходимо лишь загрузить favicon.ico в нужный каталог хостинга сайта.
Отсутствие иконки является ошибкой технической оптимизации ресурса, это снижает узнаваемость бренда, снижает CTR поисковых сниппетов, ухудшает поиск веб-ресурса по закладкам браузера и др.
У Яндекса есть специальный бот, который индивидуально индексирует фавикон всех сайтов. Периодичность добавления новых иконок в поиск составляет примерно от двух недель до одного месяца.
Куда загрузить фавикон чтобы он был онлайн?
Для отображения созданного Вами favicon.ico в виде значка сайта необходимо загрузить его в корневой каталог сайта (либо в любой каталог) и указать в коде шаблона сайта абсолютный или относительный путь к нему (подробнее на Wikipedia), пример кода:
Зачем указывать путь к Фавикону?
При использовании одного значка сайта на всем сайте, если favicon.ico находится в корневой папке, путь к нему можно не указывать — браузеры сами его найдут и выведут в виде значка сайта. Большие или уникальные ресурсы используют разные значки сайта к каждой из своих категорий.
Для этого в соответствующих шаблонах у них прописан путь к разным favicon.ico.
Be1.ru рекомендует выбирать для иконки сайта простые изображения, главное, чтобы они ассоциировались с сайтом и хорошо запоминались, к примеру: пальма, воздушный шарик или логотип организации.
Отзывы об инструменте
Оценка:
3.6
5
5
23.10.2022 18:16
Вполне хороший ресурс. Очень удобно, что тут указаны все размеры фавиконок. Нужен был для своего сайта.
Ответить
20.03.2020 16:00
Не работает, загружаю png 32х32, конвертирую в 32х32. Результат отображается, при скачивании пишет — Ошибка: файлы отсутствуют…
02.05.2017 11:48
Сделал себе отличную фавиконку.
Все понятно и удобно. Классно придумали!
Ответить
29.01.2021 10:55
Коллеги, привет!
Инструмент вместо пустого фона вставляет ЧЁРНЫЙ ФОН. Представьте вашу фирменную единичку на черном фоне.
Рука не повернулась единицу поставить, потому что пользуюсь другими инструментами вашего сайта.
Ответить
09.06.2017 00:19
Было бы неплохо, если бы Вы сделали генератор favicon для всех устройств, в т.ч. и ретина-устройств
Ответить
\n’ +
‘
\n’ +
‘
\n’ +
‘ 0\n’ +
‘ \n’ +
‘
\n’ +
‘
\n’ +
‘ 0\n’ +
‘ \n’ +
‘
\n’ +
‘
\n’ +
‘ ‘+item.
author+’\n’ +
‘
Создать Favicon
Создать Favicon
Генератор Favicon — это бесплатный онлайн сервис, который позволяет создавать иконки и значки (файл favicon.ico) для вашего сайта.
Данный инструмент позволяет создавать Favicon всех популярных размеров, таких как: 16х16, 32х32, 48х48, 64х64, 128х128.
Назад к инструментам
Инструменты
Генератор Favicon — это бесплатный онлайн сервис, который поваляет создавать иконки и значки (файл favicon.ico) для вашего сайта. Данный инструмент позволяет создавать Favicon всех популярных размеров, таких как: 16х16, 32х32, 48х48, 64х64, 128х128. Выберите размер и изображение (JPG, GIF, PNG), которое вы хотите конвертировать в формат ICO с вашего компьютера и нажмите Создать.
Создать фавикон
Выберите размер
16px x 16px32px x 32px48px x 48px64px x 64px96px x 96px120px x 120px128px x 128px144px x 144px
Выберите фотографию
Для создания favicon необходимо:
- Выберите размер вашего фавикона
- Выберите файл и нажмите Создать Favicon
- Сохраните полученный Favicon на свой компьютер
Как добавить Favicon на сайт?
- После создания Favicon через наш инструмент, скачайте его на ваш компьютер.
- Загрузите фавикон в корневую директорию вашего сайта, чтобы он был доступен по адресу https://yoursite.com/favicon.ico
- Скопируйте код ниже и вставьте в ваш HTML внутри тегов HEAD
- rel - тип ресурса: icon или icon shortcut
- href - адрес файла
- type - тип передаваемых данных. Зависит от формата файла.
• image/x-icon — для формата ICO;
• image/gif — для формата GIF;
• image/jpeg — для формата JPEG;
• image/png — для формата PNG;
• image/bmp — для формата BMP.
Примечание. Если в HTML-коде страницы ссылка на фавиконку прописана несколько раз, робот выберет иконку на свое усмотрение. Например, указаны 2 разные иконки, чтобы соответствовать разным поисковым системам.
Требования Яндекса к фавиконке
Примечание: Для отображения в результатах поиска Яндекс загружает фавиконку с HTTPS-версии сайта, если она доступна.
Если нет — фавиконка не отображается.
- Размер: 16×16, 32×32, 120×120 пикселей.
- Формат: ICO (рекомендуемый), GIF, JPEG, PNG, BMP.
Требования Google к фавиконке
- Размер: значок сайта должен быть квадратным и иметь размеры, кратные 48 пикселям, например: 16×16, 48×48, 96×96, 144×144 пикселей
- Формат: ICO (рекомендуемый), GIF, JPEG, PNG, BMP.
- Убедитесь, что значок сайта хорошо выглядит при разрешении 16×16 пикселей, так как для показа в результатах поиска масштаб значка будет изменен. Учтите, что добавлять значок размером 16 x 16 пикселей не следует.
- Значок сайта должен служить графическим представлением вашего бренда. Это поможет пользователям быстро узнать ваш сайт при ознакомлении с результатами поиска.
Отображение фавиконки
Если робот загрузил favicon, она появится в результатах поиска в течение двух недель.
Примечание. Если робот не может получить доступ к вашей фавиконке, он скачает изображение, например, из тега apple-touch-icon, и использует его для отображения фавиконки в результатах поиска и рекламных кампаниях.
Если во время обхода сайт недоступен для робота, может скачаться фавиконка хостинга со страницы-заглушки сайта. Поэтому в поиске вместо вашей фавиконки отобразится произвольная иконка.
Генератор Favicon - Текст на Favicon
Быстро создавайте свою фавиконку из текста, выбирая текст, шрифты и цвета. Загрузите свой значок в самых современных форматах.
Установка
Сначала используйте кнопку загрузки, чтобы загрузить файлы, перечисленные ниже. Поместите файлы в корневой каталог вашего сайта.
- android-chrome-192x192.png
- android-chrome-512x512.png
- apple-touch-icon.png
- favicon-16x16.png
- favicon-32x32.png
- favicon.ico
- site.webmanifest
Затем скопируйте следующие теги ссылок и вставьте их в
head вашего HTML.
png">
Почему favicon.io?
Хотите ли вы создать значок из текста, из
существующее изображение или из смайликов, которые мы вам прикрыли.
Генератор favicon абсолютно бесплатен и чрезвычайно прост в использовании.
Сгенерированный значок будет работать во всех браузерах и нескольких
платформы.
Начало работы с генератором фавиконок
Приведенный выше инструмент позволит вам создать фавиконку из текста.
Начните с выбора одной-двух букв для генератора фавиконки.
Так как генератор favicon выводит очень маленькие изображения,
важно использовать несколько символов для максимальной разборчивости. Один раз
интересная особенность этого генератора favicon заключается в том, что вы можете копировать
и вставьте символы Юникода и смайлики в текстовое поле.
Это полезно, когда смайлик не указан в смайлике.
страница фавикона.
Вот пример сохранения 💯
Сделать фон простым
Далее выберите форму фона. Есть три простых
доступные формы: квадрат, круг и закругленные. Эти
наиболее распространенные формы, используемые для создания фавикона. Ты можешь видеть
примеры этих форм с
ПродуктХант,
индихакеры и
ХакерНьюс.
Выбор шрифта для фавиконки
Генератор фавиконки использует
Гугл шрифты
в котором доступно более 800 шрифтов. Это полезно для соответствия шрифту
используется на вашем собственном веб-сайте. В будущем будет
специальная страница шрифта, чтобы помочь вам выбрать свой шрифт. Это будет иметь
фильтры для языков, стилей и часто используемых шрифтов. Ты можешь
отредактируйте размер шрифта после того, как вы выбрали свой шрифт.
Попробуйте взять
как можно больше места.
Пошив цветов
Последним шагом является выбор цветов. Если у вас есть HEX
значения цветов, которые вы хотите, вы можете просто ввести их в
поле ввода. В противном случае вы можете использовать некоторые из цветов, которые мы
предлагаем использовать палитру цветов под каждым полем ввода. Один крутой
особенность в том, что вы можете использовать прозрачные фоны. Просто введите
«прозрачный» в поле цвета фона.
Вот пример фавикона, сгенерированного с прозрачным
фон .
Генератор Favicon - Emoji to Favicon
Выберите один из сотен эмодзи, чтобы создать свой фавикон. Изображения эмодзи из проекта Twemoji.
Emoji Favicons
Графика emoji взята из проекта с открытым исходным кодом
Твемодзи. Авторские права на графику принадлежат Twitter, Inc и другим компаниям, 2020 г.