Отличный сервис по созданию favicon.ico для Вашего сайта
Кто-то делает дело, потому что это быстро и «нетрудно», кто-то делает это только потому, что это популярно и впоследствии прибыльно, кто-то просто делает своё дело.
Представляю Вам один из лучших сервисов по созданию Favicon — FavIcon from Pics 2.0.
Думаю, все Вы замечали одну из небольших, но очень забавных деталей, говорящих иногда очень много о сайте и ресурсе в целом. Тем, кто малознаком с сайтостроительством, скорее всего ничего не скажет такое название как favicon.ico, но, во всяком случае, даже они в курсе, что при добавлении сайта в закладки браузера и просто при его просмотре в окне рядом с названием ресурса часто красуется личико сайта – этот самый favicon.ico.
Если сказать точнее: Favicon (FAVorites ICON — значок для избранного, произошло от названия папки с закладками в IExplorer), причем до 7й версии эксплорера, он отображался только в избранном и благодаря этому администраторы серверов могли узнать, сколько пользователей создало закладку на их сайт.
Сегодня вы узнаете:
- Как можно сделать качественную favicon.ico?
- Какой сервис создания иконок для сайтов справиться лучше всего с созданием личика сайта (именно с созданием favicon)?
- Как пользоваться этим сервисом и что он умеет ещё, кроме создания иконок favicon.ico?
- Как установить себе на сайт favicon.ico?
- Как сделать анимированный favicon.ico?
Это конечно далеко не все вопросы, которые касаются иконок сайтов, но думаю, они самые основные. Начну с того, как я наткнулся на этот онлайн сервис. Задача передо мной стояла самая простая – сделать иконку для itpride.net, именно эта иконка сейчас установлена на данном сайте.
Перепробовав несколько сайтов по созданию favicon.ico, я уже начал было подумывать скачать программу с софтпортала, что-то по типу any2icon, но подумав о том, что «качать mail-сервер для отправки одного письма» это слишком.
Называется он — FavIcon from Pics, его скриншот Вы видели в начале этого рассказа. Для непосвященного в английский язык (а сервис англоязычный) он, возможно, вызовет некоторые трудности, которые мы сейчас попробуем решить.
Интерфейс сначала довольно простой, мы видим две кнопки для создания иконок favicon.ico. В первом случае Мы можем загрузить исходное изображение с компьютера. Во втором, при наличии аккаунта в Twitter, — просто вводим свой ник в твитере, и сервис автоматически скачает изображение Вашего аватара (безумно удобно).
Я выбрал первый вариант, и загрузил изображение нашей иконки в разрешении 1000х1000(как Вы могли догадаться, сервис не устанавливает ограничений на размер) и ко всему прочему, 
).
После нажатия кнопки Generate Favicon.ico (1 — кстати, обратите внимание, что название кнопки изменилось на «Add Another…», т.е., приглашение добавить ещё одно изображение), мы уже можем забрать готовую иконку по ссылке «Download Favicon Package» (2).
Сервис также сразу создает анимированную версию favicon с повтором логотипа.
Вот тот же скриншот, но уже ближе. Обращаю внимание на список того, что мы можем ещё сделать с помощью сервиса.
Перевод пунктов сверху вниз (8 пунктов):
- Изменение цвета, добавление текста, редактирование анимации, создание дополнительных иконок для iPod и другие полезности…
- Посмотреть состав архива (обычно 2 файла иконок и файл со сведениями о компании)
- Посмотреть на работу favicon в браузере (превьюшка, так сказать)
- Валидация иконки, может кто-то и захочет
- Добавить свой favicon в галерею (Может Вы художник, и тысячи пользователей будут использовать именно ваш favicon, кстати, у них недурная галерея)
- Написать отзыв о работе
- Загрузить только favicon.
ico - Загрузить только анимированную версию иконки
icoИтак, если Вам этого было мало, можете нажать ссылку «EDIT» под анимированной версией иконки для перехода к редактированию. Тут нас ждет не менее широкий список возможностей, а именно — десять, после слов «customization…».
Что ещё можно сделать тут с favicon.ico:
- Добавление текста к анимации (прокрутка), а также управление добавленными картинками (чуть позже подробнее)
- Цвет текста в анимации (наверное, потом добавят и шрифт)
- Удалить анимацию из архива
- Добавить в архив иконку для iPod
- Выбор цвета подложки (бэкграунд) favicon
- Добавить бордюр иконке, по-простому — рамка для favicon
- Сделать подложку прозрачной
- Конвертация в черно-белый вариант
- Добавить иконки других размеров(16х16 256 цветов, 16х16 64К цветов …)
- Удалить дополнительные иконки из архива
Остальные пункты смотрите выше, я их уже описал.
Вот так, кстати, выглядит выбор цвета для анимированного текста favicon.
А теперь, Вы видите, что в архив добавились ещё одна иконка размером 32х32 (1), а также иконка для iPod(2). На скриншоте видно слабо, но синий бордюр тоже был добавлен.
Я уже несколько раз упоминал ранее, что можно загрузить ещё одно изображение (Add another image). Вернее не одно, а сколько пожелаете картинок. Сделав это, Вы сможете:
- сделать несколько различных favicons не запуская сервис снова
- можно использовать обе (2,3,5…) картинки для создания яркой анимированной favicon
На этом рисунке Вы видите пример настройки анимации с двумя иконками, они называются {PIC1} {PIC2} и, что самое примечательное, их можно поставить несколько (например, рисованные буквы — А-Б-В…), а также вставить между ними текст. Тут уже как фантазия подскажет.
Да, вернёмся к началу нашего ликбеза по favicon.ico. На следующем изображении я создаю себе иконку из аватара в Twitter:
Можете нас добавить к себе в follow list – https://itpride.
net/twitter
Результаты работы сервиса для favicon:
Я не буду говорить о том, что этот сайт делает иконки лучшего качества по сравнению с аналогами, и не стану говорить о том, что такую функциональность не всегда можно найти в программных продуктах, которые, между прочим, стоят не так уж и мало.
Лучше я скажу о минусе этого сервиса (да есть и такой) – при загрузке третьей иконки автоматически открывается popup окно с рекламой от google, но думаю, — это небольшая плата за сервис. Ребята постарались и заслужили как минимум на «хлеб с маслом».
Им удалось сделать один из лучших онлайн сервисов по созданию и редактированию иконок favicon.
Как установить иконку favicon на свой сайт?
Для установки на сайт иконок favicon.ico вставьте следующий код, между тегами в файле шапки Вашего сайта (для WordPress, к примеру, — это в header.php):
<lnkrel=“shortcuticon” href=“favicon.ico”> — для обычной иконки
<lnk rel=“icon” type=“image/gif” href=“animated_favicon1.
gif”> и для анимированной
Ежели они у вас имеют другие имена, исправьте их в параметре «href» и не забудьте скопировать иконки в директорию сайта на хостинге.
Запустить сервис сейчас:
Создать Favicon онлайн | Создать Favicon (⇒)
ЗЫ: Чуть не забыл, последнее и всё, я ушёл: если Вы знаете какой-то хороший или уникальный сервис или сайт, или у Вас есть свой супер-сайт – присылайте его на наш email (admin(ET)itpride.net). Мы постараемся опубликовать о нем статью, или присылайте целую статью о своем сервисе. Лучшие – получат прямые ссылки на свои сайты.
Заменить favicon.ico для всех устройств на Битрикс
При создании сайта часто забывают установить на него нужный favicon.ico. Но для чего же нужна эта иконка для сайта на битрикс?
Для начала нужно разобраться что такое эта иконка? Favicon — это иконка сайта, что отображается рядом с адресной строкой, возле заголовка на вкладке или в списке закладок браузера.
Традиционно используется изображение размером в 16х16 пикселей в формате ICO, которое зачастую размещается в корне сайта с названием favicon.ico.
Все было бы просто, но оказывается что не один только браузер использует эти иконки. Они могут использоваться на рабочем столе смартфона например или в списке закладок на windows. В таком случае, согласитесь, что размер 16х16 иконки сайта Битрикс на рабочем столе айфона будет выглядеть не очень эстетично. В таком случае нам будет нужен особый набор иконок. И одним добавлением файла в корень сайта тут не обойдешься. Потребуется специальное подключение.
Генерация иконок для Битрикс
Первым этапом нужно нарисовать иконку в фотошопе или использовать какой-либо онлайн сервис для генерации. Лично я рисовал в фотошопе. Картинка должна быть ровно квадратной. Желательно 512 на 512 пикселей минимум. Когда нарисовали сохраняем в формате png. У кого иконка заполняет все пространство квадрата то это хорошо, но я столкнулся с проблемой круглой картинки у которой углы прозрачные.
А теперь самое сочное. Подготовленную иконку мы прогоняем через сервис favicon-generator.org, который не только сгенерирует нам все типы иконок под разные устройства но и выдаст нам код подключения иконок на сайте для битрикс!
Загрузка иконок на сайт
Скачанный архив с набором иконок для начала нам нужно загрузить на сайт. Находим папку нашего шаблона сайта и создаем в ней еще папку favicon. Директория шаблона сайта может быть или в /bitrix/templates/<ваш_шаблон> или в /local/templates/<ваш_шаблон>, с тех времен как Битрикс начал поддерживать папку local. Загружаем созданный архив в созданную нами папку favicon и распаковываем. Теперь мы видим, что куча разных иконок уже у нас на сайте!
Подключение набора иконок
Нам осталось подключить все иконки на в нашем шаблоне сайта. Для этого нужно всего лишь внести нужные записи которые нам выдал сервис генерации.
Копируем текст с сервиса и вставляем в шапку шаблона нашего сайта в файл header.php между тегами <head></head>. Почти готово. Еще нужно только поменять адреса наших иконок в строке их подключения. Так как мы их не разархивировали в корневой папке сайта, для того чтобы не разводить там бардак, то укажем на папку где они находятся. Для этого нам потребуется добавить в каждом атрибуте href следующую строчку <?=SITE_TEMPLATE_PATH?>/favicon. Чтобы получилось не href=»/favicon-16×16.png» , а вот так: href=»<?=SITE_TEMPLATE_PATH?>/favicon/favicon-16×16.png». SITE_TEMPLATE_PATH — это консанта, которая указывает на расположение папки шаблона нашего сайта, где бы он не находился.
Готово! Теперь нам осталось сохранить файл header.php и перезагрузить браузер, не забыв предварительно скинуть кеш браузера. Теперь не только у нас отображается красивая иконка в закладке браузера, но и мы можем сохранить ссылку на наш сайт в виде красивой иконки, например на айфоне.
Конвертировать PNG в ICO онлайн
Перетащите файлы сюда
Размер изменения:
Ширина:
пикс.
Высота:
пикс.
Применить цветовой фильтр: ЦветнойОттенки серогоМонохромныйОтменить цветаРетроСепия
DPI:
точек на дюйм
Удалить фон Улучшить 
«/>
Резкость Сглаживание Удаление пятен Уравнять
Информация: Пожалуйста, включите JavaScript для корректной работы сайта.
Реклама
Оцените этот инструмент 4,6 /5
Вам нужно преобразовать и загрузить хотя бы 1 файл, чтобы оставить отзыв
Отзыв отправлен
Спасибо за ваш голос
Изображение в ICO — Лучший конвертер изображения в ICO онлайн
Home Image Converter Img в ICO
Поделиться с
Выберите файл или перетащите его сюда
Ваши файлы в безопасности
Как конвертировать изображение в ICO бесплатно онлайн
Шаг 1
Загрузите файлы формата JPG, PNG или BMP в этот онлайн-конвертер ICO (в пределах 20 М).
Шаг 2
Выберите размер значка и начните преобразование (16×16, 32×32, 64×64, 256×256 и другие).
Шаг 3
Загрузите преобразованные файлы ICO из конвертера изображений в ICO.
Рекомендация
Изображение в JPG Изображение в PNG Heic в JPG Изображение в BMP JPG в PDF Icon Converter Desktop
WorkinTool Функции конвертера изображения в ICO
100% бесплатно функции. Вы можете использовать этот конвертер файлов значков совершенно бесплатно неограниченное количество раз.
Пакетное преобразование
Этот бесплатный онлайн-конвертер изображений в ICO может конвертировать четыре изображения одновременно, если вы хотите преобразовать файлы BMP, PNG или JPG в файлы ICO.
Безопасность обеспечена
Ваши файлы изображений будут автоматически удалены через 24 часа, никто не сможет их прочитать или загрузить, 100% защита вашей конфиденциальности.
Быстро и легко
Этот конвертер изображений в значки будет обрабатывать ваши изображения на высокой скорости.
Всего за несколько шагов вы можете успешно преобразовать изображение в ICO.
Высокое качество
Преобразованный файл ICO не потеряет качество исходного файла. Вы также можете изменить размер изображения до размера значка по своему усмотрению.
Удобный для пользователя
Этот конвертер файлов ICO предназначен для всех пользователей и совместим с любыми устройствами. Просто используйте его в своей тарелке.
Программное обеспечение для настольных ПК VS Онлайн-инструмент
Программное обеспечение для настольных ПК
Скачать бесплатно для Win 11/10/8/7
Поддерживается более 120 форматов изображений
Предлагаются различные варианты преобразования и дополнительные функции, такие как сжатие и редактирование изображений.0004
Нет ограничений на размер файла изображения при конвертации
Пакетная обработка изображений без количественных ограничений
Более высокая скорость обработки изображений с лучшим качеством вывода
Ваши файлы останутся на вашем компьютере только без загрузки
Без рекламы
Онлайн-инструмент
Исследуйте сейчас
Совместимость с JPG, PNG и BMP
Нет необходимости загружать, доступ в любом месте, где вы хотите
Никаких проблем с обновлением или системных требований, о которых стоит беспокоиться
Все загруженные изображения безопасны и подлежат удалению в течение 24 часов
Стабильная скорость преобразования при сетевом подключении
До четырех изображений одновременно для преобразования
Максимальный размер каждого загружаемого файла составляет 20 МБ.