Создание фавиконки. Online генераторы и коллекции favicon. Как создать более сложные фавиконы

(аббр. от англ. “favorites icon” - «значок для избранного»). Он имеет, как правило, стандартный размер - 16x16, 32x32, 48x48, 64x64, 128x128 - и расширение.ICO, хотя некоторые браузеры поддерживают также расширения.GIF и.PNG.

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

xIconeditor

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

Faviconby

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

Favicon.cc

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

Favicon Generator

С помощью Favicon-generator можно создать favicon из любого изображения, или же выбрать из галереи уже готовых решений. Возможен поиск готовых favicon по цветовой гамме. На выходе получаете.ICO размером 16x16, или же zip архив с целым набором иконок для разных систем (web, Android, Microsoft и iOS) и разных размеров. Предварительный просмотр результатов отсутствует, так что Вы не сможете оценить качество полученных изображений, на загрузив их.
Кроме генератора favicon разработчики предлагают также графический редактор, обладающий основными инструментами для создания изображения и обеспечивающий предварительный просмотр полученных результатов непосредственно в процессе рисования.

Genfavicon

Очень простой в использовании инструмент - загружаете изображение (или вставляете ссылку на него), выбираете один из подходящих размеров (16×16, 32×32, 48×48 или 128×128) и, если изображение в окне предварительного просмотра Вам понравилось, сохраняете результат на свой компьютер. Остается поместить полученный файл в корневую директорию Вашего сайта, добавить ссылку на него в заголовок страницы, и Ваши страницы будут иметь собственный значок.

Prowdraw

Бесплатный online продукт для преобразования любого изображения в favicon . Поддерживает загрузку изображений в формате JPG, GIF, PNG, BMP и TIF. На выходе генерирует ICO файл одного из четырех выбранных размеров (16x16, 32x32, 48x48, 128x128) с четырьмя различными уровнями резкости. Все четыре отображаются на странице результатов, так что Вы можете сравнить и выбрать для загрузки наиболее приемлемый результат.

Dynamic Drive Favicon Generator

Предельно простой инструмент для создания favicon из существующего изображения . Поддерживаемые входные форматы: gif, jpg, png, и bmp (в gif и png поддерживается прозрачность). В дополнение к стандартному размеру 16x16 может генерировать Windows-иконки размером 48x48 и 32x32. Дополнительные настройки отсутствуют, однако кроме генератора favicon разработчик предлагает еще и отдельный продукт - favicon-редактор для создания иконок «с чистого листа».

Favicomatic

Помимо генерирования иконок самых разнообразных размеров, этот «заботливый» генератор favicon создает еще и фрагмент кода для вставки на страницы сайта (можно указать адрес Вашего сайта для генерирования корректной ссылки) и предоставляет возможность сохранить архивный файл с результатами работы непосредственно в Google Drive.

Favikon

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

FavIcon Pro

Еще один простой и незамысловатый инструмент для создания favicon . Преобразует изображение формата JPG, GIF, PNG в файл ICO одного из следующих размеров: 16x16, 32x32, 48x48, 64x64, 128x128. Рядом со ссылкой на скачивание можно увидеть полученный результат.

Freefavicon

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

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

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

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

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

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

- Есть возможность создать из картинки или нарисовать самому.
- После генерации показывается пример ссылки для добавления на сайт.
- Все на английском языке.
- Некрасивый дизайн.
- Невозможно обрезать картинку при создании.
3 www.Chami.com
- Красивый удобный интерфейс.
- Возможно сделать фавиконку из картинки или нарисовать самому.
- Большая палитра цветов для рисования.
- Нет предварительного просмотра.
- Все на английском языке.
- Нет галереи готовых иконок.
- Удобный интерфейс.
- Ничего лишнего.
- Нет галереи готовых иконок.
- Невозможно нарисовать самому.
- Нельзя обрезать картинку при генерации.
- Удобный красивый интерфейс.
- Ничего лишнего.
- Есть возможность нарисовать самому или сгенерировать из картинки.
- Присутствует галерея готовых иконок.
- Можно сохранить размер иконки при создании или сжать ее.
- Предварительный просмотр.
- Можно сделать анимированную иконку.
- Огромное количество цветов для рисования.
- Все на английском языке.
- Есть выбор размера иконок 16×16 и 32×32.
- Нет дополнительных функций, только создание фавикона из картинки.
- Нет предварительного просмотра.
- Предварительный просмотр.
- Большая коллекция готовых иконок.
- Есть возможность обрезать картинку.
- Все на английском языке.
- Присутствуют ошибки на сайте.
- Неудобный интерфейс.
- Можно выбрать размер иконки 16×16, 32×32, 48×48 и 64×64.
- Все на английском языке.
- Ничего лишнего.
- Есть возможность выбрать размер иконки.
- Можно нарисовать самому или сделать фавикон онлайн из картинки.
- Нет возможности обрезать картинку.
- Нет предварительного просмотра.

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

А сейчас, как и обещал, ТОП-5 удобных и качественных сервисов, на мой взгляд.

Это моя пятерка лучших. Хочу узнать, какой сервис вы поставите на первое место, а какой на последнее? Буду рад услышать ответы в комментариях.

P.S. Если вы еще не придумали для себя фавикон, то обязательно загляните на сайт Faviconka.ru . На нем вы найдете больше 2.000 готовых иконок на любой вкус. Надеюсь, статья вам была полезна, и вы нашли свой сервис, чтобы сделать фавикон онлайн.

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

Подобные сайты редакторы иконок очень эффективны. Они позволяют вам:

легко и быстро создавать новые материалы;
придать существующим наработкам завершенный вид;
сохранять результат в разных форматах (SVG, ICO & PNG);
создавать иконки для .

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

IconsFlow

IconsFlow.com — векторные иконки + редактор позволяющий создавать персонализированные наборы и экспортировать их в хорошем качестве (SVG, ICO & PNG). Главным преимуществом сервиса является наличие двух редакторов:

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

Если вы уже создали иконки в Illustrator, просто загрузите файлы SVG и поэкспериментируйте с разными фонами. В IconsFlow существуют определенные ограничения при бесплатном использовании, поэтому убедитесь, что вы с ними ознакомились перед стартом. Для начинающих пользователей имеются уроки и раздел помощи, к тому же есть возможность работать в редакторе иконок на русском.

Вид векторного редактора IconsFlow:

Примеры работ:

FlatIcons

С помощью FlatIcons.net вы можете создать свою флэт-иконку (в плоском стиле) на основе готовых шаблонов. Задавайте размеры, выбирайте рисунок и основной фон (круги, кольца, прямоугольники), меняйте цвет. Этот редактор иконок бесплатный, но у него есть два недостатка:

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

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

Launcher Icon Generator

Проект Launcher Icon Generator бесплатный и, как мы думаем, больше подходит для продвинутых пользователей. Данный онлайн редактор иконок позволяет загружать изображения / клипарты и добавлять текст. Вы можете скачать по одной иконке за раз в 5 размерах (48 x 48; 72 x 72; 96 x 96; 144 x 144; 192 x 192).

В качестве базового клипарта используется набор графики в стиле Material Design из GitHub. Сервис содержит такие настройки как: отступы, форма, цвет или прозрачность фона, масштабирование + дополнительные эффекты. Результат:

Android Material Icon Generator — еще один инструмент создания флэт-иконок. Фишкой сервиса определенно является эффект в виде длинной тени. Если вам нужны подобные решения — этот редактор иконок будет идеальным вариантом.

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

После скачивания в файле-архиве найдете 6 PNG разного размера и векторный файл SVG. В Illustrator иконка SVG будет размытой, но, к счастью, она хорошо смотрится в браузере. В итоге получается что-то вроде:

Сайт Simunity – это генератор на базе HTML5, где можно создать иконку и затем скопировать код, чтобы отобразить ее в ваших веб-проектах. В качестве исходных материалов используются иконки из Font Awesome, для которых выбираются разные параметры: цвет, рамка, размер и стиль теней.

Данный сервис пригодится, если вам необходимо быстро создать простые оригинальные иконки для сайта. Результат применения Simunity:

Итого. Рассмотренные выше онлайн редакторы иконок – отличные инструменты для оптимизации работы дизайнеров. Нет смысла скачивать какие-то программы, когда все можно легко и быстро делать в сети. Из этой подборки, пожалуй, можно выделить IconsFlow. В нем собрано максимально большое число функций: галерея иконок, загрузка SVG, код для встраивания, предварительный просмотр, создание собственных шаблонов, экспорт PNG, ICO и SVG, адаптация размера, модные стили и встроенный векторный редактор. К тому же это единственный бесплатный редактор иконок на русском, если для вас это важно.

Если знаете еще какие-то похожие сервисы, присылайте варианты в комментариях.

В сегодняшнем уроке я буду Вам рассказывать об иконках Favicon (фавикон ). Я Вам покажу как сделать favicon.ico для сайта (или для блога, тут без разницы) и покажу как можно вставить фавикон .

Наверняка, многие еще не знают о том, про какое “чудо” я говорю. Проще говоря, Favicon (фавикон) это картинка (иконка), которая стоит в браузере перед адресом сайта. Наглядно покажу Favicon моего блога:

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

План урока :

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

Как создать Favicon (фавикон) с нуля

Есть один очень удобный сервис. Он имеет адрес favicon.cc . Этот сервис по построению фавиконок выглядит так:

Чтобы нарисовать favicon достаточно выбрать цвет и просто рисовать. Если Вы нарисовали что-то, где-то не так, для удаления фрагмента рисунка выберите инструмент transparent (поставьте галочку) и “тыкайте” на пикселы (“квадратики”), которые нужно убрать:

Я нарисовал следующий фавиконку:

Больше всего в favicon.cc мне понравилось то, что можно мгновенно видеть результат своего труда в оригинальном размере. Для этого нужно немного спуститься вниз в раздел Previw:

Или же можно прямо в браузере (Opera, Firefox, Internet Explorer и т.п.) посмотреть итог работы:

Создание favicon (фавикон) из готового изображения

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

Сервис на русском языке, поэтому у Вас не должно возникнуть проблем. Просто указываете картинку, которую Вы хотите видеть в роли иконки Вашего сайта (кнопка “Обзор”), потом нажимаете “Создать favicon.ico ”, а дальше уже “Скачать favicon.ico ”.

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

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

Что такое фавикон и зачем он вообще нужен? Фавикон по англ. пишется как Favicon и переводится дословно — «Любимая иконка», но в Викопедии приводиться другой перевод — «Значок для избранного». Фавикон можно сравнить с логотипом, уменьшенным в несколько раз и имеющим расширение .icon.

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

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

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

Фавиконы в виде обычной картинки

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

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

Правило №1 .

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

Правило №2 .

Картинка должна быть квадратной и весом не более 150 kB.

После не долгих поисков я нашел вроде бы подходящую картинку с изображением воздушного шара соответствующую вышеперечисленным правилам:

Теперь мне надо ее преобразователь в формат.icon и уменьшить до размеров 32х32 пикселя.

Для преобразования картинок в фавиконы существуют специальные серверы и я воспользуюсь одним из них — tools.dynamicdrive.com .

Достаточно выбрать изображение и загрузить его на сервер, затем выбрать формат и нажать кнопочку — «Greate Icon» :

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

Если на картинке размером 32х32 еще можно разобрать силуэт воздушного шара, то на изображении форматом 16х16 уже плохо понятно, то ли это какае-то луковица или перевернутая груша 🙂

Из этого следует. что существует еще одно требование к картинке для фавикона.

Правило №3. .

Объект на картинке должен иметь небольшой размер в реальном мире. Для фавикона не годятся изображения самолетов, кораблей, воздушных шаров и т.д.

Поэтому я немного опустился на землю и нашел другое изображение. Давайте попробуем его:

Отлично, посмотрим, что получается после обработки:

Ну вот, совсем другое дело. Скачиваем фавикон на свой компьютер нажимая — «Download FavIcon» .

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

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

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

На левую панель вообще не обращаем внимания, в принципе сервис уже готов к работе и осталось выбрать цвет или цвета будущего рисунка. Я для примера нарисую кастрюлю 🙂 С помощью зажатой левой клавиши мышки водим по квадратикам и они закрашиваются в нужный цвет, а если надо стереть лишнее, то нажимаем по квадратику правой кнопкой мыши. Я покажу Вам в качестве примера простенькую анимацию, состоящую всего из 2 изображений. Первое изображение:

После того, как рисунок готов нажимаем — «Использование анимации» и выпадет панель со следующими функциями:

Выбираем — «Добавление новых кадров» и уже на чистом поле рисуем вторую часть анимации:

Чуть ниже можно посмотреть на результат и скачать готовый файл:

Как выглядит мой «шедевр»? 🙂

Конечно это самый простой пример анимации, а есть анмированные фавиконы состоящие и 6 эпизодов, но это уже «мультфильмы» какие-то.

Как сделать фавикон в Photoshop

Наверное у Вас в Фотошоп отсутствует формат. icon, но это не беда, сейчас мы это дело поправим. Скачиваем архив плагина ICOFormat для Adobe Photoshop и распаковываем его в папку — C:\Program Files\Adobe\Adobe Photoshop\Plug-ins\File Formats. Запускаем фотошоп, загружаем любое изображение и пробуем его сохранить в формате.icon

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

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

Установка фавикона минутное дело и описывать даже особо нечего. Значит, у нас уже есть файл размером 32х32 пикселя и на надо всего лишь закачать его в корень сайта с помощью FTP клиента , туда где находятся папки wp-admin, wp-content и wp-includes. Кстати совсем не обязательно помещать файл в корень блога, можно закинуть его и в другое место, но тогда надо правильно указать путь к нему в файле header.php.

Если мы все же поместили файл с фавиконом в корень сайта, то в файле header.php перед закрывающим тегом надо прописать следующее:

Вот в принципе и все, фавикон на сайт установлен!

Сервисы готовых фавиконов

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

До встречи!

С уважением, Виталий Кириллов