Фавикон для сайта. Создать иконки онлайн или в ручную за пару минут. Создать иконку для сайта


10 лучших веб-сайтов для генерации иконок / Полезное / FREELANCE.TODAY

Автор: Елизавета Гуменюк (liza1510) Рейтинг топика: 0 Просто люблю писать, переводить и давать людям возможность читать интересный контент. И пусть я не всегда идеальна — есть к чему стремиться!!!

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

Визуальный дизайн или дизайн пользовательского интерфейса – все это является главными аспектами тенденций в веб-дизайне. Вот почему особенности Google Material Design оказываются более эффективными при разработке пользовательского интерфейса для осуществления зрительной коммуникации с посетителем.

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

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

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

Иконки широко используются в социальных сетях, на сайтах электронной коммерции,  игровых ресурсах и многих других. Мы знаем  такие популярные иконки как «Like» на Фейсбуке или «Shopping Cart» на сайте E-commerce. Но на самом деле существуют тысячи иконок, попадающие под различные категории. В веб-разработке значки часто используются для перечисления чего-либо на странице, кнопок социальных сетей, таких важных разделов, как «Связаться с нами» и других.

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

Итак, вперед!  

&nbsp ;1) E-mail Icon Generator

Этот онлайн инструмент позволяет вам создавать красивые иконки для e-mail прямо с вашей электронной почты. Инструмент генерирует иконки для различных поставщиков услуг электронной почты, таких как Gmail, Yahoo!, MSN, Hotmail и многих других.  

2) MakeAppicon

MakeAppicon является надежным онлайн-инструмент генерации иконок для приложений iOS и Android. Инструмент позволяет изменять размер и оптимизировать ваши иконки под различные форматы и размеры, необходимые для iOS и Android.  

3) Iconion

Инструмент позволяет не только создавать свои собственные иконки, но и стилизовать уже существующие в нужном вам направлении. Вы можете выбрать шрифты для символа на Font Awesome, Linecons или любого другого онлайн-источника. После загрузки вашего изображения  в формате png, bmp, jpeg или ico, вы можете изменять изображение с помощью функций редактирования.  

4) IconizeMe

Если вы поклонник персональных иконок, то IconizeMe станет для вас отличным инструментом, который раскачает ваш онлайн-мир. Персональные иконки выглядят очень уникальными в профилях социальных сетей или личных блогах.  

5) FavIcon Generator

FavIcon Generator является идеальным онлайн-инструментом для генерации иконок из изображения для вашего сайта.

Инструмент позволяет загружать файл изображения, после чего выбрать выходной формат из различных вариантов, таких как gif, jpg, png и bmp. Сайт широко используется для брэндирования логотипа компании для посетителей онлайн.  

6) Favicon & App Icon Generator

Этот инструмент позволяет загружать изображения в форматах GIF, JPEG или PNG, а затем преобразовать их в Windows favicon с расширением ICO. Помимо этого вы можете использовать инструмент с целью создания иконок для веб-сайтов, а также для приложений iOS, Microsoft и Android.  

7) Launcher Icon Generator

Этот онлайн инструмент от Android Asset Studio предназначен для генерации веб-иконок для приложений Android. Вы можете создавать иконки из изображений, клипартов или текста. Кроме того, инструмент предлагает много возможностей выбрать цвета, формы, фоны и эффекты.  

8) Pic2Icon

Pic2Icon — это бесплатный генератор иконок, предлагающий массу возможностей применения различных эффектов к вашей иконке. Кроме того, он предлагает инструменты для преобразования формата иконок, а также генерацию иконок для Windows 7, Windows XP,  iPhone и iPad.  

9) RealWorld Icon Editor

Онлайн-инструмент, позволяющий создавать иконки из различных графических форматов. Редактор так же позволяет создавать иконки из 3D моделей и рисовать иконки со слоями.  

10) Picture To People

Онлайн-место для создания 3D-иконок и логотипов. Инструмент позволит разработчикам веб и мобильных приложений создавать социальные иконки 3D и логотипы для популярных сайтов, брендов, продуктов программного обеспечения. Некоторые из них — Facebook, LinkedIn, Instagram, YouTube, GitHub, Google.  

Заключение

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

Источник 

freelance.today

Как создать иконку ico онлайн

Как создать иконку ico онлайнНеотъемлемой частью современных веб-сайтов является значок Favicon, позволяющий быстро идентифицировать тот или иной ресурс в списке вкладок браузера. Также сложно представить компьютерную программу без собственного уникального ярлыка. При этом сайты и софт в таком случае объединяет не совсем очевидная деталь — и те и другие используют иконки в формате ICO.

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

Как создать иконку ICO онлайн

Работа с графикой — не самая популярная категория веб-сервисов, однако в том, что касается генерации иконок, определенно есть из чего выбирать. По принципу работы такие ресурсы можно разделить на те, в которых вы сами рисуете картинку, и сайты, позволяющие конвертировать уже готовое изображение в ICO. Но в основном все генераторы иконок предлагают и то, и другое.

Способ 1: X-Icon Editor

Этот сервис является наиболее функциональным решением для создания ICO-картинок. Веб-приложение позволяет вам детально прорисовать иконку вручную либо же воспользоваться уже готовым изображением. Главным преимуществом инструмента является возможность экспорта картинки с разрешением вплоть до 64×64.

Онлайн-сервис X-Icon Editor

  1. Чтобы создать ICO-иконку в X-Icon Editor из уже имеющейся на вашем компьютере картинки, перейдите по ссылке выше и воспользуйтесь кнопкой «Import».Импортируем изображение для создания иконки в X-Icon Editor
  2. Во всплывающем окне щелкните «Upload» и выберите нужное изображение в Проводнике.Загрузка иконки в X-Icon EditorОпределитесь с размерами будущей иконки и нажмите «Ok».
  3. Получившийся значок по желанию вы можете изменить с помощью инструментов встроенного редактора. Причем работать позволяется со всеми доступными размерами иконки в индивидуальном порядке.Интерфейс редактора X-Icon EditorВ этом же редакторе вы можете создать картинку с нуля.

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

  4. Далее просто кликните по надписи «Export your icon» во всплывающем окне и файл с соответствующим расширением будет сохранен в памяти вашего компьютера.Скачиваем иконку с онлайн-сервиса X-Icon Editor

Так, если нужно создать целый набор однотипных иконок разного размера — ничего лучше, чем X-Icon Editor для этих целей вам не найти.

Способ 2: Favicon.ru

При необходимости сгенерировать значок favicon с разрешением 16×16 для веб-сайта, отличным инструментом также может служить русскоязычный онлайн-сервис Favicon.ru. Как и в случае с предыдущим решением, здесь вы можете как самостоятельно нарисовать иконку, раскрашивая каждый пиксель отдельно, так и создать favicon из готовой картинки.

Онлайн-сервис Favicon.ru

  1. На главной странице ICO-генератора сразу доступны все нужные инструменты: сверху — форма для загрузки готовой картинки под иконку, ниже — область редактора.Интерфейс онлайн-генератора ICO-иконок Favicon.ru
  2. Чтобы сгенерировать иконку на основе имеющейся картинки, щелкните по кнопке «Выберите файл» под заголовком «Сделать favicon из изображения».Загружаем картинку в онлайн-сервис Favicon.ru
  3. После загрузки изображения на сайт обрежьте его, если нужно, и нажмите «Далее».Обрезаем иконку в онлайн-генераторе Favicon.ru
  4. При желании отредактируйте получившуюся иконку в области с заголовком «Нарисовать иконку».Работаем с иконкой в области для редактирования Favicon.ruПри помощи этого же холста вы можете нарисовать ICO-картинку самостоятельно, раскрашивая на ней отдельные пиксели.
  5. Результат своей работы вам предлагается наблюдать в области «Предпросмотр». Здесь по мере редактирования картинки фиксируется каждое изменение, сделанное на холсте.Готовим к скачиванию favicon в онлайн-сервисе Favicon.ruЧтобы подготовить иконку к загрузке на компьютер, нажмите «Скачать Favicon».
  6. Теперь в открывшейся странице остается лишь щелкнуть по кнопке «Скачать».Загружаем ICO-файл на компьютер с сервиса Favicon.ru

Как результат, на вашем ПК сохраняется файл с расширением ICO, представляющий собою картинку размером 16×16 пикселей. Сервис отлично подойдет для тех, кому требуется всего лишь конвертировать изображение в маленькую иконку. Впрочем, и проявлять фантазию в Favicon.ru совсем не запрещается.

Способ 3: Favicon.cc

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

Онлайн-сервис Favicon.cc

  1. Как и на описанных выше сайтах, работу с Favicon.cc вам предлагается начать прямо с главной страницы.Главная страница онлайн-сервиса Favicon.ccЕсли вы желаете создать иконку с нуля, можете воспользоваться холстом, занимающим центральную часть интерфейса, и инструментарием в колонке справа.

    Ну а для конвертирования уже имеющейся картинки нажмите на кнопку «Import Image» в меню слева.

  2. С помощью кнопки «Выберите файл» отметьте нужное изображение в окне Проводника и укажите, нужно ли сохранить пропорции загружаемой картинки («Keep dimensions») или же подогнать их под квадрат («Shrink to square icon»).Загружаем картинку на сервис Favicon.ccЗатем щелкните «Upload».
  3. При надобности отредактируйте иконку в редакторе и, если все устраивает, перейдите к разделу «Preview».
  4. Сохраняем ICO-файл в память компьютера с онлайн-сервиса Favicon.ccЗдесь вы можете увидеть, как будет выглядеть готовый favicon в браузерной строке либо списке вкладок. Все устраивает? Тогда скачайте иконку одним нажатием на кнопку «Download Favicon».

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

Способ 4: Favicon.by

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

Онлайн-сервис Favicon.by

  1. Осуществив переход по ссылке выше, вы увидите уже знакомый набор инструментов, холст для рисования и формы импорта картинок.Главная страница онлайн-генератора иконок Favicon.byТак, загрузите готовое изображение на сайт либо же нарисуйте favicon самостоятельно.
  2. Ознакомьтесь с наглядным результатом работы сервиса в разделе «Ваш результат» и нажмите на кнопку «Скачать фавиконку».
  3. Предпросмотр результата в онлайн-сервисе Favicon.byВыполнив эти действия, вы сохраните готовый ICO-файл в память своего компьютера.

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

Способ 5: Online-Convert

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

Онлайн-сервис Online-Convert

  1. Чтобы приступить к созданию иконки с помощью этого ресурса, сначала импортируйте нужное вам изображение на сайт при помощи кнопки «Выберите файл».Импортируем картинку в онлайн-сервис Online-ConvertЛибо же загрузите картинку по ссылке или с облачного хранилища.
  2. Если вам требуется ICO-файл с конкретным разрешением, например, 16×16 для favicon, в поле «Изменить размер» раздела «Дополнительные настройки» введите ширину и высоту будущей иконки.Указываем нужные параметры для конвертирования изображения в Online-ConvertЗатем просто щелкните по кнопке «Преобразовать файл».
  3. Спустя несколько секунд вы получите сообщение вида «Ваш файл был успешно преобразован», а картинка автоматически будет сохранена в памяти вашего компьютера.Уведомление об успешном преобразовании картинки в Online-Convert

Как видите, создать иконку ICO при помощи сайта Online-Convert совсем несложно, и делается это буквально за пару кликов мыши.

Читайте также:Конвертируем изображения PNG в ICOКак конвертировать JPG в ICO

Что же касается того, какой сервис использовать именно вам, здесь есть лишь один нюанс, и заключается он в том, для чего вы намерены использовать сгенерированные иконки. Так, если нужен favicon-значок, подойдет абсолютно любой из представленных выше инструментов. А вот для других целей, к примеру, при разработке ПО, могут применяться картинки ICO совершенно других размеров, поэтому в таких случаях лучше использовать универсальные решения вроде X-Icon Editor или Online-Convert.

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

Помогла ли вам эта статья?

Да Нет

lumpics.ru

Как создать иконку для вашего проекта: советы и полезные сервисы

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

Анализ ассоциаций

image21

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

Исследование конкурентов

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

image13

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

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

Предназначение иконки

При разработке иконки важно учесть, как она будет использоваться, и какие ее функции.

Например, иконка мобильного приложения должна выполнять функцию идентификации и выделять его среди других приложений на смартфоне. Это касается как списка программ уже на смартфоне, так и в магазине приложений (App Store, Google Play).

image15

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

Уникальность и узнаваемость

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

Поменьше деталей

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

 

image04 image07

Вторая иконка приложения смотрится лучше за счет простоты и минимализма.

Определите приоритетность размера

Существует два подхода к создания иконки.

Первый: создать ее в большом размере с максимальной детализацией, а на ее основе уже проработать варианты меньшего размера и более схематичного вида. Второй – противоположен первому: сначала создается иконка наиболее часто используемого размера, а уже путем добавления или убавления деталей прорабатываются остальные варианты. Какой путь выбрать? Решайте сами, оба варианты рабочие.

image17

 

Нужно несколько иконок? Создавайте сет!

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

image12

Не жалейте места

Иконки бывают разными : широкими и узкими, высокими и низкими. Объединяет их одна рекомендация – не жалейте свободного места и не стремитесь заполнить всю доступную область изображениями или надписями. Позвольте иконке «дышать», оставьте немного пространства вокруг готовой композиции при размещении в интерфейсе или где-либо еще. При этом четкого указания по поводу размера отступа в пикселях для таких случаев нет, просто ориентируйтесь на собственное визуальное восприятие.

image01

Разные иконки для разных платформ

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

image10

Цвет очень важен

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

image11

Обходитесь без текста

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

image14

Ищите баланс между оригинальностью и простотой восприятия

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

image02

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

Не забывайте о фоне

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

Элементам интерфейса приложения нет места на иконке

Не размещайте элементы интерфейса приложения на его иконке. Это запутывает пользователя и считается дурным тоном.

Иконка должна быть информативной

Эффективная иконка своим видом сообщает о функции приложения. Так пользователь сможет понять для чего ваш продукт до того, как заглянет в описание. Например, для иконок плееров используют изображения нот, инструментов или визуалайзеров, для камер или графических редакторов – объектив фотоаппарата, а для мессенджеров вроде Viber – символичные облачка сообщений.

image23

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

Ксения Маевская, разработчик приложения Помню-Напомню.

Теперь, когда мы узнали советы как создавать эффективную иконку, представляем вашему вниманию полезные сервисы для ее создания.

Полезные сервисы и ресурсы для создания иконки

IconsFlow — Векторные Иконки

1487663595

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

Fontawesome

image08

Шрифтовые иконки для использования с Twitter Bootstrap

COLOURlovers

image22

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

Colorscheme

image19

Профессиональный онлайн-сервис, позволяющий сгенерировать цветовую схему в соответствии с правилами колористики на цветовом круге.

Gradients

image16

 

Автоматическое создание градиентов.

Logomak

image09

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

Руководство, посвященное Material Design для Android

Руководство по iOS Human Interface от Apple.

Пошаговая инструкция создания иконки

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

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

Одним из онлайн сервисов, который позволяет быстро создавать современные иконки является IconsFlow.

image00

Пару слов о возможностях сервиса:

  • Возможность экспорта иконок в SVG (вектор), PNG и ICO формах;
  • Загрузка своих собственных иконок;
  • Большой функционал по редактированию;
  • Возможность создания пакетов иконок в одном стиле;
  • Бесплатные варианты.

Теперь перейдем к процессу создания иконки.

Чтобы создать иконку или целый набор, вам нужно в онлайн редакторе сначала найти нужную иконку или сразу несколько.

image20

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

image05

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

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

image18

То есть, кликая в одном месте,  вы меняете дизайн всех иконок сразу : тени, размер, фон, и т.д. Очень удобно, если вам нужно создать 3-5 или более иконок.

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

image24

Вот собственно и все.

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

Читайте также:

Как правильно проектировать минималистичный дизайн

Как использовать анимацию для улучшения UX

4 совета дизайнерам, которые помогут значительно ускорить работу

<p style="text-align: center">Нашли ошибку? Выделите текст и нажмите <em>Ctrl+Enter</em>.</p>

say-hi.me

Иконка для сайта или как сделать Favicon ico самостоятельно

Иконка для сайта, как сделать иконку Favicon

Приветствую вас, уважаемые читатели блога Vorabota.ru! Когда мы набираем в командной строке браузера адрес какого-нибудь сайта, с левой стороны в момент загрузки страницы появляется маленькое изображение в виде иконки. Иконка для сайта – Favicon, (сокращение от английского слова FAVorites ICON) переводится как «значок для избранного».

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

И если вы обращали внимание, при выдаче результатов поиска в поисковике Яндекса на странице перед заголовками найденных страниц присутствует Favicon (иконка сайта).

Иконки для сайтов favicon в поисковой выдаче

И чем привлекательней будет это маленькое изображение, тем будет большая вероятность того, что пользователь зайдет именно на этот сайт. Важность иконки Favicon очевидна. Но некоторые начинающие Web мастера не знают, как сделать иконку для сайта и установить ее на свой ресурс. Сделать иконку (Favicon) для своего сайта на самом деле не так сложно. Достаточно подготовить будущее изображение в любом графическом редакторе и сгенерировать полученный файл через онлайн сервис в формат ico. На мой взгляд, самый удобный онлайн сервис для генерации иконок для сайта – это Favicon.cc.

Сделать иконку для сайта самостоятельно на онлайн сервисе Favicon

Как видно на скриншоте, интерфейс этого онлайн сервиса вполне простой и понятный. На нем есть возможность сгенерировать заранее подготовленные изображения или нарисовать онлайн прямо на самом ресурсе новую иконку. Кроме статичных изображений на этом сервисе можно сделать и анимированную иконку для сайта. Но анимированное изображение лучше подготовить заранее другим способом, к примеру, как я описывал в заметке как можно создать баннер и анимировать его. Думаю, что так будет намного легче, чем рисовать каждый кадр вручную. Также в сети есть множество ресурсов, которые предлагают готовые варианты иконок. Пропустив через такой онлайн генератор изображение, вы получите иконку для сайта 16 х 16 пикселей. После этого загрузите ваш favicon в корневую папку вашего сайта и посмотрите, произошли ли изменения, когда откроете свой сайт, в каком-нибудь браузере.

Если изменения не произошли, и вы не видите свой новый favicon в строке перед адресом сайта, попробуйте для начала очистить кэш браузера. Также может быть, что для размещения иконки в вашем сайте есть специальная папка, туда и надо поместить favicon ico. Все зависит от движка, на котором сделан сайт. В моем случае (сайт на Joomla) favicon находится по адресу /templates/папка с шаблоном сайта/favicon.ico.

На сайтах, сделанных, на других движках, путь к иконке может быть другой. К примеру, если вы решили создать свой блог на Blogstop.com, и хотите сменить иконку (а прямого доступа к папкам в blogger нет), достаточно зайти на blogger в панель управления блогом → Дизайн → Элементы страницы. В верхней левой части окна – Значок → Изменить и загружаете свою новую иконку. Все очень просто.

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

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

На этом я хочу пожелать всем читателям всего хорошего. Возможно, кому-нибудь эта заметка будет полезна. До новых встреч на страницах блога Vorabota.ru

Вас это может заинтересовать:

vorabota.ru

Как сделать иконку (фавикон) для сайта онлайн?

Сделать фавикон для своего сайта я решил не случайно. В бизнесе не выигрывают посредственности, залог вашего успеха – это умение быть уникальным и выделяться среди других. И наш сайт не исключение. Уникальные статьи, уникальные картинки, уникальный дизайн — все это способы выделиться среди конкурентов и получить больше посетителей на сайт. Еще одним элементом, способным отличить ваш сайт от других, будет уникальная иконка вашего сайта — favicon.ico.

Содержание:

  1. Что такое фавикон?
  2. Зачем сайту фавикон?
  3. Как нарисовать иконку самостоятельно?
  4. Как сделать favicon.ico из картинки?
  5. Как установить фавикон на сайт?
  6. Как сделать иконку запоминающейся?

В сегодняшнем видео уроке я покажу как как создать 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">

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

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

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

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

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

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

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

Жду ваших комментариев, Дмитрий Жилин

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(6 голосов, в среднем: 4.8 из 5)

biznessystem.ru

Фавикон для сайта. Создать иконки онлайн или в ручную за пару минут

Подробности Категория: Создание сайта

Создание фавикон для сайтаПриветствую читателей нашего блога firelinks.ru, посвященного заработку в интернете и созданию собственного бизнеса в сети.

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

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

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

Основные способы создание favicon для сайта:

  • Ручная подгонка рисунка самостоятельно;
  • Заказ создания у фрилансеров;
  • Автоматическое создания с имеющимися картинками с помощью онлайн сервисов.

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

Рассмотрим способ создания фавикон для сайта с помощью программы фотошоп, а также покажу как сделать фавикон онлайн. Первым этапом мы открываем программу, далее создаем новый проект и задаем размеры изображения 16х16 пикселей, кстати, это основной размер для нашей иконки независимо на каком движке делается или был сделан сайт.

Создание нового проекта в фотошопе

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

В стандартной версии программы Фотошоп сохранить картинку в расширении ICO не получится, для этого нужно скачать сторонний плагин.

Скачать плагин для сохранения картинок ICO.  (.zip)

Инструкция по установке плагина:

  • Установка плагина:
  • закрыть программу фотошоп;
  • разархивировать и запустить плагин;
  • скопировать плагин в папку с установленной программой в папку  C:\......\Plug-Ins\File Formats\.

Теперь мы можем сохранять нашу картинку в формате .ico.

Сохранение фавикон в формате ICO

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

Также Вы можете заказать создание иконки у фрилансеров. Но подумайте сами, стоит ли это того?

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

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

Создание фавикон онлайн. Удобные инструменты для автоматизации процесса

Берем нашу картинку, которую мы нарисовали или скачали с интернета и загружаем в  сервис favicon.ru.

Скачать иконки для сайта

Выбираем фон, который нам нужен или редактируем его, делая прозрачным и т.д.

Создание фавикон с помощью онлайн сервиса

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

Отлично, иконка готова. Теперь остается один не закрытый вопрос: как поставить иконку на наш сайт.

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

Рассмотрим способ размещения иконки сайта на сайт сделанный под управлением самого многофункционального движка Джумла (Joomla).

Заходим в корень нашего сайта на хостинге или на локальном сервере и заливаем туда наш файл в расширении .ico.

Установка фавикон на сайт Джумла

Далее заходим в папку с шаблоном сайта (Templates) и заливаем копию в корень папки.

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

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

Полезные материалы:

firelinks.ru

Как создать и загрузить иконку сайта?

башенный кран 

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

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

Данный сайт создан на базе CMS Joomla 3. Поэтому, изначально, на данном сайте была установлена фирменная иконка этой CMS такого вида:

У меня возникло желание её заменить по выше описанным причинам. Поэтому я приступил к созданию собственной иконки.

Как создать иконку сайта?

Иконка для сайта — это изображение размером 16*16 пикселей. Сегодня, для того чтобы создать иконку сайта, удобно воспользоваться одним из многих онлайн сервисов. Обычно, они предлагают два способа создания иконки:

  • 1. Получить иконку из любого изображения. То есть, можно загрузить в онлайн сервис любой рисунок, после чего он переформатирует его в иконку для сайта.
  • 2. Воспользоваться онлайн редактором иконок. Можно в режиме онлайн нарисовать иконку самостоятельно.

После того как полученное изображение вас устроило, следует сохранить файл иконки на компьютер. Следует заметить, что название и расширение файла иконки имеет вид favicon.ico. Новое изображение иконки создано. Теперь, чтобы она начала отображаться в поисковой выдаче и на вкладке в браузере, следует загрузить её на сайт.

Как загрузить иконку сайта?

Для того чтобы загрузить иконку на сайт сделанный на базе CMS Joomla 3 нужно получить доступ к файлам и папкам в корне вашего сайта. Я пользуюсь FTP клиентом FileZilla. Вы можете воспользоваться другим удобным для вас способом. Загружать иконку сайта следует в папку установленного шаблона. Шаблон находится в папке ваш_сайт/templates/ваш_шаблон. Скорее всего, там уже будет находится файл favicon.ico.

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

Подробности Создано: 26 октября 2015

delovoybezdelnik.ru