Создание favicon ico. Вот некоторые рекомендации, которые необходимо учитывать при создании Favicon. Как происходит процесс создания иконки в Логастер

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

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

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

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

1. 
   

   • Есть возможность создать из картинки или нарисовать самому.
   • После генерации показывается пример ссылки для добавления на сайт.
   • Все на английском языке.
   • Некрасивый дизайн.
   • Невозможно обрезать картинку при создании.

2. 3 www.Chami.com

3. 
   

   • Красивый удобный интерфейс.
   • Возможно сделать фавиконку из картинки или нарисовать самому.
   • Большая палитра цветов для рисования.
   • Нет предварительного просмотра.
   • Все на английском языке.
   • Нет галереи готовых иконок.

4. 
   

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

5. 
   

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

6. 
   

   • Есть выбор размера иконок 16×16 и 32×32.
   • Нет дополнительных функций, только создание фавикона из картинки.
   • Нет предварительного просмотра.

7. 
   

   • Предварительный просмотр.
   • Большая коллекция готовых иконок.
   • Есть возможность обрезать картинку.
   • Все на английском языке.
   • Присутствуют ошибки на сайте.
   • Неудобный интерфейс.

8. 
   

   • Можно выбрать размер иконки 16×16, 32×32, 48×48 и 64×64.
   • Все на английском языке.

9. 
   

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

Я вас познакомил только с 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, адаптация размера, модные стили и встроенный векторный редактор. К тому же это единственный бесплатный редактор иконок на русском, если для вас это важно.

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

Фавикон – это небольшая картинка, которая отображается на вкладке браузера. Также фавиконы можно увидеть в браузерных закладках – это сделано для того, чтобы пользователь мог быстрее найти нужный сайт. Несмотря на свой маленький размер, фавикон хорошо различим и значительно ускоряет поиск сайта или веб-страницы. Впервые возможность разместить иконку рядом с названием сайта появилась в 1999 году в браузере Internet Explorer 5. Тогда же был определен минимальный размер фавикона – 16 на 16 пикселей. Со временем этот размер стал стандартом и сегодня трудно представить себе профессионально сделанный сайт, который бы не имел фавикона.

Для создания фавикона подойдет любое растровое изображение. Главное, чтобы оно было достаточно лаконичным, так как трудно разместить сложную картинку со множеством деталей в квадратике 16 на 16 пикселей. После того, как изображение выбрано, можно воспользоваться одним из многочисленных генераторов фавиконов и в результате получить пиктограмму в формате ISO. Данный формат является стандартом, хотя практически все популярные браузеры поддерживают форматы PNG, JPEG и GIF. сайт предлагает вашему вниманию 10 лучших генераторов фавиконов.

Очень простой в использовании фавикон-генератор. Пользователю достаточно выбрать нужную картинку и нажать кнопку Generate Favicon. Размер изображения при этом не должен превышать 150 килобайт. После этого фавикон необходимо поместить в корневой каталог сайта и поместить сгенерированную строку кода в любом месте между и . С помощью данного генератора можно создавать иконки в форматах JPG, GIF и PNG.

Данный онлайн-генератор преобразовывает изображения в форматах JPG, GIF и PNG в формат ISO. Каких-либо ограничений на размер загружаемого файла не указано. Можно создавать фавиконы размером 16 на 16 и 32 на 32 пикселя.

Фавикон-генератор Faviconmatic создает пиктограммы самых разных размеров. Если вдруг потребуется сгенерировать большую иконку, к примеру, 64х64 пикселя – такая возможность есть. Но лучше, конечно, придерживаться стандартов. Как утверждают создатели сайта, генератор очень хорошо преобразовывает картинки, которые замечательно отображаются на всех браузерах. Пользоваться сайтом очень просто – нужно кликнуть по кнопке загрузки изображения и выбрать нужный файл. Минимальный размер загружаемой картинки – 32 на 32 пикселя.

С помощью этого генератора можно создавать фавиконы, загружая картинки с компьютера или из интернета. Также у пользователей есть возможность самим нарисовать иконку – на сайте имеется онлайн-редактор. Чтобы начать работу, нужно выбрать фоновый цвет и затем редактировать пиксели, закрашивая их контрастными по отношению к фону цветами. После того, как иконка будет создана, можно посмотреть, как она будет смотреться на вкладке. Если результат устроит, то пользователю остается выбрать только размер фавикона (16х16 или 32х32 пикселя) и нажать кнопку Download. Генератор создаст фавикон в формате ICO.

Бесплатный онлайн-генератор Freefavicon создает фавиконы из растровых изображений в формате GIF, PNG и JPEG. Создатели этого инструмента рекомендуют использовать для создания иконки простые изображения, так как комплексные логотипы и графика отображаются не очень хорошо. Также рекомендуется использовать квадратные изображения, так как при масштабировании картинки изображение искажается. После выбора нужного файла нужно нажать кнопку Favicon Go! и скачать zip-архив с фавиконом. Дальше все как обычно – картинку в корень, а строчку кода между и .

Генератор Favicon.pro преобразовывает в ICO файлы в форматах JPG, PNG и GIF. Пользователь может создавать иконки размером 16х16, 32х32, 48х48, 64х64 и 128х128 пикселей.

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

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

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

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

Сейчас тяжело представить сайт, у которого нет фавиконки. Фавикон - это иконка, которая располагается в адресной строке браузера или в заголовке окна (в зависимости от браузера), и которая выделяет открытый сайт/вкладку из множества других. Изначально, эти иконки разрабатывались в IE для того, чтобы выделять сайт в списке закладок браузера (в IE эти закладки назывались Favorites (избранные), и отсюда пошло название Favicon - иконка избранного.

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

Существует множество сервисов, которые позволяют генерировать favicon из картинок (это может быть логотип, или специально разработанная иллюстрация). Но у большинства из них проблемы с прозрачностью.

Проблемы с прозрачностью у сервиса генератор фавикон

Для наглядности приводим иллюстрацию «Как обрабатывают прозрачность и уменьшение размера изображения разные генераторы фавикон».

В этом сравнении мы использовали результаты, полученные на сервисах favicon.cc и favicon-generator.org. Честно говоря, до недавного времени, сами пользовались сервисом favicon.cc, но с недавних пор нашелся отличный заменитель - генератор фавикон №1.

Лучший генератор фавикон - www.xiconeditor.com

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

Вполне очевидно, что есть разница в качестве передачи прозрачности (видимо разница в качестве изменения размера загруженной картинки).

Кроме того у xiconeditor.com есть ещё одно преимущество - отличная система превью фавиконки, которая позволяет просмотреть результат в разных ипостасях без загрузки сгенерированного фавикон. У них превью намного более информативное, чем у favicon.cc.

Здравствуйте, уважаемые друзья! Сегодня я напишу о том, как сделать фавикон для сайта или блога. Причем, я рассмотрю 2 способа создания фавикона. Вы узнаете, как сделать favicon ico в фотошопе и при помощи онлайн сервиса;-).

Перед тем, как перейти к прочтению этой статьи, я советую также ознакомиться с другими полезными постами, которые позволят улучшить ваш ресурс: « », ?», « ».

А теперь вернемся к теме поста. Если на сайте нет фавикона, то он теряет многое. Во-первых, фавикон способен увеличить посещаемость с Яндекса. Спросите как? Очень просто. Дело в том, что Яндекс рядом с заголовком Title показывает еще и фавикон сайта. И если заголовки и описания двоих ресурсов примерно одинаковые, но на одном будет фавикон, а на другом нет, то посетитель, скорее всего, перейдет на ресурс с фавиконом.

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

Как сделать favicon для сайта с нуля

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

После того, как вы выбрали цвет, начинаем рисовать фавикон. Если вы нарисовали что-то неверно, то это можно удалить. Для этого поставьте галочку возле инструмента «прозрачный».
Вот я на за несколько минут сделал такой фавикон;-).

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

Как сделать фавикон для сайта с готового изображения

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

Потом нужно обрезать изображения так, чтобы оно стало квадратным. Для этого я выбираю инструмент «Кадрирования» обвожу часть , которую я хочу оставить и нажимаю «Enter».

Потом нужно уменьшить изображения до 16 рх. Для этого выбираем на панели инструментов Изображения – Размер изображения.

Указываем ширину и высоту 16 рх и нажимаем «Ок».

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

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

• www.audit4web.ru/info/favicon
• www.favicon.cc — уже знакомый сервис
• www.iconj.com
• www.favicon.co.uk/gallery.php
• thefavicongallery.com
• favicon-gallery.ru/gallery

Как сделать favicon для wordpress

После того, как вы сделали или скачали фавиконку, ее нужно как-то прикрутить до сайта. Я сейчас покажу, как это сделать на движке wordpress.

Сначала нужно закачать иконку на хостин по такому адресу: wp-content/themes/названия темы/images/

После этого зайдите в Панель управления – Внешний вид – Редактор, откройте файл header.php и пропишите там вод такой код, перед тегом «/head»:

В этом коде нужно изменить:

• сайт – укажите свой домен;
• BusinessBlog – укажите названия своей темы;
• favicon.ico – укажите названия своей иконки, которую вы загрузили на хостинг.

Теперь сохраните изменения и смотрите, что у вас получилось:

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

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

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

Ну, а теперь все, что касается вопроса, как сделать favicon ico для сайта. Всем пока.