Онлайн создание иконки для сайта: Пиктограммы | Создание иконки онлайн — Независимое театральное объединение "Зрительские симпатии"

Содержание

Отличный сервис по созданию 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-сервер для отправки одного письма» это слишком. Я продолжил поиски в выдаче Google, и вот — нашел отличный сервис, где можно легко создать качественный favicon.

Называется он — FavIcon from Pics, его скриншот Вы видели в начале этого рассказа. Для непосвященного в английский язык (а сервис англоязычный) он, возможно, вызовет некоторые трудности, которые мы сейчас попробуем решить.

Интерфейс сначала довольно простой, мы видим две кнопки для создания иконок favicon.ico. В первом случае Мы можем загрузить исходное изображение с компьютера. Во втором, при наличии аккаунта в Twitter, — просто вводим свой ник в твитере, и сервис автоматически скачает изображение Вашего аватара (безумно удобно).

Я выбрал первый вариант, и загрузил изображение нашей иконки в разрешении 1000х1000(как Вы могли догадаться, сервис не устанавливает ограничений на размер) и ко всему прочему,

сделать favicon он может из любого формата изображений, кроме специфических (RAW и т.д.

После нажатия кнопки Generate Favicon.ico (1 — кстати, обратите внимание, что название кнопки изменилось на «Add Another…», т.е., приглашение добавить ещё одно изображение), мы уже можем забрать готовую иконку по ссылке «Download Favicon Package» (2).

Сервис также сразу создает анимированную версию favicon с повтором логотипа.

Вот тот же скриншот, но уже ближе. Обращаю внимание на список того, что мы можем ещё сделать с помощью сервиса.

Перевод пунктов сверху вниз (8 пунктов):

Изменение цвета, добавление текста, редактирование анимации, создание дополнительных иконок для iPod и другие полезности…
Посмотреть состав архива (обычно 2 файла иконок и файл со сведениями о компании)
Посмотреть на работу favicon в браузере (превьюшка, так сказать)
Валидация иконки, может кто-то и захочет
Добавить свой favicon в галерею (Может Вы художник, и тысячи пользователей будут использовать именно ваш favicon, кстати, у них недурная галерея)
Написать отзыв о работе
Загрузить только favicon. 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 для сайта онлайн, буквально, в несколько кликов. Видео урок будет в конце, а для начала давайте разберемся в том, что же такое favicon и какая польза для сайта от него может быть.

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

Если вы еще не знаете, что это такое, то посмотрите в верхнюю часть вашего браузера, туда, где находятся закладки открытых вами сайтов, вы увидите следующую картинку:

Значки, которые вы видите рядом с названием сайта – это и есть favicon. Кроме закладок в браузере, фавикон понимают некоторые поисковики, например, в результатах поисковой выдачи Яндекса, возле сайта, имеющего favicon будет отображаться соответствующий значок.

Удивительно, но такие иконки имеют не все сайты, а среди тех, у которых они есть, большинство значков стандартные, вшитые в какую либо общедоступную систему управления сайтом, типа WordPress, или в тему оформления. На картинке видно, что владелец сайт на 17 позиции поленился создать favicon.

Размер фавикона 16 на 16 пикселей. Картинку можно сделать соответствующего размера или, сначала сделать большую, а потом сжать ее. И тот и другой способ приемлем.

Зачем сайту фавикон?

У использования favicon для сайта есть много полезных преимуществ, но я бы выделил два:

Во-первых, ваш сайт лучше запоминается. И люди, нашедшие в первый раз полезный контент, в следующий раз в поиске выберут снова ваш ресурс по запомнившейся картинке. Это работает на создание брэнда и повышению узнаваемости.
Во-вторых, в результатах поисковой выдачи, сайты имеющие фавикон, интуитивно притягивают больше посетителей, чем их соседи и конкуренты без иконок. Зачастую, этот элемент дает больше пользы, чем правильно написанные статьи.

Как нарисовать фавикон самостоятельно

Теперь вы знаете, что такое фавикон, осталось прикрутить эту штучку к вашему сайту. Можно найти и готовые иконки, но я записал с экрана видео урок по которому вы легко разберетесь как создать фавикон онлайн. Займет это у вас всего несколько минут, зато ваш новый логотип будет на 100% уникальным и полностью соответствующим вашему ресурсу.

Не забудьте поделиться ссылкой на этот урок в твиттере, фэйсбук и других социалках, если он вам был полезен — вам не трудно, а мне будет приятно 🙂

Итак, создать картинку favicon.ico для сайта у нас получилось, ее нужно скачать.

Как сделать иконку из картинки?

Рисовать мы научились, но, иногда, бывает проще создать иконку из готового изображения. Сервисы, которые позволяют это сделать также существуют.

Создавать иконку будем с помощью iconizer. net, который хранит в себе богатую базу готовых иконок на самые различные тематики и направления, начиная от общей направленности до тематических.

Перейдите на iconizer.net и в строчку для поиска введите ключевое слово или фразу, которая характеризует или описывает тематику вашего блога. Например, WordPress или продвижение, раскрутка, заработок. Только, вводимое вами ключевое слово, должно быть написано английском языке. Если возникнут проблемы с переводом, то воспользуйтесь переводчиком Яндекс или Google. После ввода нажмите кнопку «Search».

Результаты будут выглядеть следующим образом:

Теперь вам остается определиться с подходящей картинкой и щелкнуть по ней так, что она открылась в другом окне с панелью настроек.

Советую сделать настройки с точно такими же параметрами, которые показаны на изображении, чтобы избежать лишних проблем. И уже после этого нажать на «Generate Icon» и далее «Download».

Как установить фавикон на сайт?

Полученный файл favicon. ico нужно поместить в корневой каталог вашего сайта.

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

В моем браузере Хром фавикон подопытного сайта www.tb1000tur.ru, появился сразу, а вот в “Мозиле” пришлось подождать. Что касается Яндекса, то там процесс распознавания иконки сравним с процессом индексации страниц сайта – может затянуться и на пару месяцев.

Для ускорения индексации можно прописать между тегами <head></head> вашего сайта следующую строчку:

<link rel="icon" href="http://tb1000tur.ru/favicon.ico" type="image/x-icon">

Где вместо адреса для моего сайта прописываете адрес своего. В принципе, можно обойтись и без нее, если фавикон лежит в корневой папке.

Как сделать favicon более запоминающимся?

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

Совет номер раз. Старайтесь сделать изображение понятным и соответствующим тематике вашего сайта. Если сайт о путешествиях, как я приводил пример выше, то изображение пальмы будет в тему. В том случае, когда картинку под нужную вам тему подобрать сложно — используйте буквы, как это делают Youtube или поисковая система Яндекс.

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

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

69 064 иконки веб-разработки — бесплатно в SVG, PNG, ICO

Получите неограниченный доступ к более чем 6,1 миллионам активов

Получите неограниченное количество загрузок

Веб-разработка Значок

Вектор веб-разработки Значок

Веб-разработка Значок

Веб-разработка Icon

Venngage Free Icon Maker — Пользовательские иконки для вашего бренда

Создание значков, отражающих ваш бренд, не должно быть сложным. Venngage имеет библиотеку из более чем 40 000 значков и иллюстраций, которые вы можете использовать и менять цвета, чтобы они соответствовали вашему бренду в любом из ваших дизайнов.

Лучший дизайн, лучшая узнаваемость бренда: создавайте значки, отражающие ваш бренд

Разве вы никогда не чувствовали разочарования, имея идеально фирменный дизайн, за исключением — вы знаете — значков ?

Если вам когда-либо будет трудно получить правильные значки с правильными фирменными цветами, чтобы гарантировать единообразие брендинга — что ж, теперь вам повезло.

Потому что с помощью бесплатного онлайн-конструктора иконок Venngage вы вытащите себя из трясины небрендовых скучных иконок.

Выбирайте из более чем 40 000 значков и иллюстраций и применяйте фирменные цвета к любым одноцветным значкам, которые вы хотите для своего дизайна, всего одним щелчком мыши с помощью конструктора значков Venngage.

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

НАЧНИТЕ БЕСПЛАТНО

Как создать значок с помощью Venngage Icon Maker:

Зарегистрируйте БЕСПЛАТНУЮ учетную запись Venngage, указав свой адрес электронной почты, Facebook или Gmail
Выберите шаблон из сотен профессиональных шаблонов или используйте чистый холст
Выбирайте из более чем 40 000 значков и иллюстраций
Настройте свои значки: измените их цвет, размер, форму, чтобы они отражали ваш бренд, или сгруппируйте значки вместе, чтобы создать новые
Поделитесь новыми значками брендов с членами вашей команды, чтобы упростить доступ к ним в будущем

Создание незабываемых фирменных значков:

Выберите из нашей библиотеки значков и иллюстраций

Мы предлагаем более 40 000 значков и иллюстраций для удовлетворения любых ваших потребностей в дизайне.

Применение тонов кожи к различным значкам

Меняйте оттенки кожи для наших разнообразных значков, чтобы они отражали вашу разнообразную аудиторию.

Применение цветов бренда к значкам

Наш бесплатный редактор значков позволяет легко применить цвета вашего бренда к значкам одним щелчком мыши.

Сотрудничайте со своей командой

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

Брендируйте свой дизайн одним щелчком мыши

Пользователь Venngage Business может легко загрузить свои фирменные цвета, логотипы и шрифты в My Brand Kit, а затем применить эти элементы брендинга к своему дизайну одним щелчком мыши.

И знаете что? Это работает и с иконками!

Выберите цвет, на который вы хотите изменить свои одноцветные значки, и примерьте его на свои значки, чтобы почувствовать, что хорошо выглядит в дизайне.

Мгновенная замена значка или загрузка значка

Не устраивает значок? Просто дважды щелкните значок и выберите из тысяч полностью настраиваемых значков и иллюстраций.

Вы также можете загрузить значки своих брендов в редактор: дважды щелкните значок, и появится всплывающее окно с вариантами загрузки изображений.

Загрузите собственные значки в формате JPG, PNG или GIF всего одним щелчком мыши. Значки сохраняются в вашей библиотеке изображений, поэтому вы можете получить к ним доступ в любое время.

Разнообразные иконки для разной аудитории

Ваши иконки должны отражать ваш бренд, и вашу аудиторию.

Расскажите своей аудитории, что вы видите их, используя различные значки в своем дизайне.

Наша библиотека значков содержит более 2000 разнообразных значков и иллюстраций, а наш онлайн-редактор значков позволяет легко настроить оттенок кожи значков одним щелчком мыши.

Создание значков во время совместной работы с вашей командой

Совместная работа в режиме реального времени ускоряет и делает процесс создания значков более эффективным.

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

Наш онлайн-конструктор значков делает дизайн и совместную работу беспроблемным для всех членов команды, независимо от дизайнерских навыков.

Сохраните свои значки для более легкого доступа в будущем

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

Любой, кто хочет использовать значки, может сделать копию шаблона коллекции значков и получить доступ к значкам оттуда.

Да, последовательный брендинг — это так просто.

Часто задаваемые вопросы о программе Icon Maker

Какая программа для создания иконок самая лучшая?

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

Как я могу создавать свои собственные значки?

Онлайн-конструктор значков Venngage позволяет легко создавать собственные значки. Группируйте значки и различные элементы дизайна вместе, чтобы создавать новые. Применяйте фирменные цвета к своим значкам, сделанным на заказ, для единообразия брендинга.

Как изменить цвет значка?

Находясь в редакторе значков, дважды щелкните одноцветный значок и выберите цвет, на который хотите его изменить.