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

Честно, я очень люблю фавикон. Я питаю к нему сколь глубокую, столь же и целомудренную платоническую любовь. Это не значит, что я рассказываю знакомым вебмастерам байки о том, как я сменил фавикон и трафик вырос на 10% (хотя постойте… может такое и было), но значит, что когда фавикон моего нового сайта появляется в индексе Яндекса, то сам сайт начинает казаться мне чуть более СДЛьным.

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

Фавикон (Favicon – сокращение от «favorite icon») — это изображение, которое отображается в адресной строке браузера перед адресом, во вкладке, соответствующей окну с открытой страницей сайта, а также при добавлении ресурса во вкладки с избранным. Эти изображения могут помочь пользователю лучше запомнить бренд или компанию, повысят узнаваемость сайта. Часто в качестве фавикона используют уменьшенное или немного переделанное в соответствии с форматом изображение логотипа компании или бренда.

Преимущества использования фавикона

Использование favicon приносит пользу со временем. Вот например зацените такие варианты:

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

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

Особенности работы Яндекса с фавиконками

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

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

Чтобы проверить, отображает ли Яндекс favicon, можно найти свой портал в списке выдачи и посмотреть, видна ли иконка слева от него. Также можно вписать в адресную строку следующую конструкцию: для Яндекса - http://favicon.yandex.net/favicon/www.site.ru (где вместо www.site.ru нужно напечатать домен своего сайта). Правильно созданный Фавикон отобразится на черном фоне, и это значит, что Яндекс его видит.

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

• Размер изображения не соответствует требуемому: 16х16 пикселей;
• Формат изображения не тот – должен быть ico, jpeg или png (первый вариант – более предпочтительный для Яндекса);
• Картинка размытая или не уникальная – иногда по этим причинам поисковик блокирует иконки;
• У Яндекса происходит обновление системы – тогда спустя какое-то время все должно исправиться само;
• Сайт находится далее сотой позиции в выдаче – в этом случае фавикон тоже может не отображаться.

Проверив картинку по этим критериям, нужно исправить недостатки. Если и после этого не отображается иконка, можно обратиться в поддержку Яндекса.

Чтобы фавикон отображался в Яндекс.Директе, он должен быть правильно оформлен и находиться в нужном месте на сайте. Тогда поисковой робот Яндекса проиндексирует его и начнет показывать в выдаче. Происходит это обычно через 2-4 недели после публикации сайта с изменениями. Уведомлять или просить Яндекс о публикации фавиконки не нужно, это произойдет автоматически по прошествии определенного времени после ее появления на портале.

Как создать фавикон

Если вы хотите создать из большого изображения в формате, например, png, ico-файл, то вам не помешало бы поставить Adobe Photoshop для начала. Затем устанавливается плагин ICO для Фотошопа (поищите в поисковике плагин для вашей версии ФШ). Когда он установлен, мы копируем нужный файл ICOFormat.8bi (для 32-бит) или ICOFormat64.8bi (для 64-бит) по одному из следующих путей:

C:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Plug-ins\File Formats
C:\Program Files (x86)\Adobe\Adobe Photoshop CS6\Plug-ins\File Formats

Если папки «Plug-ins» или «File Formats» нет, то ее необходимо создать. Теперь при диалоге сохранения можно выбрать ico формат. Размеры создаваемых значков могут быть кратны 8 (16×16, 24×24, 32×32 и так далее, но надежнее всего выбрать именно 16×16).

Затем изображение, которое должно стать фавиконом, открывается в Фотошопе. Жмется “Image – Image Size” и размер изображения меняется на 16х16 пикселей. Затем жмется “File – Save as” и выбирается формат ICO (название файла нужно сделать favicon.ico).

Сам я в последнее время перевожу изображения в ico формат без фотошопа. С помощью сервиса https://realfavicongenerator.net/ .

< link rel = ”shortcut icon ”href = ”/ favicon . ico ”type = ”image / x - icon ”/ > < link rel = ”icon ”href = ”/ favicon . ico ”type = ”image / x - icon ”/ >

Через некоторое время фавикон появится на сайте.

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

Яндекс пугает фавиконных очкошников

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

Сервисы

Для создания иконок также существуют специальные программы и ресурсы, среди которых популярностью пользуются:

• favicon.cc – простейший редактор позволит создать несложное изображение, принцип работы немного напоминает Paint. Также выбираются цвета, и выполняется рисунок нажатием на пиксельные квадраты, которые нужно закрасить. Есть инструмент для исправления. Созданную картинку здесь же можно сохранить на компьютер в качестве готового изображения favicon. В процессе работы внизу экрана можно наблюдать предварительный результат в том виде, в каком он будет отображаться в браузере. Ресурс также предлагает большой выбор готовых иконок;
• favicon.ru – здесь лучше создавать фавиконы из уже готовых изображений. Картинка загружается с компьютера, обрабатывается системой и преобразуется в файл favicon.ico, который затем можно скачать;
• iconj и audit4web – базы, в которых можно найти готовые фавиконы.

Есть и такой сервис:

Можно обратиться за разработкой изображения и к дизайнеру, но это обойдется существенно дороже.

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

Сегодня хочу познакомить вас с сервисами по созданию фавикона для вашего сайта . Favicon – это сокращения английских слов favorite и icon. Это картинка размером 16 на 16 пикселей, которая носит название favicon и имеет расширение ico . Она помещается в корневую папку вашего сайта на хостинге. При загрузке сайта браузер автоматически ищет этот файл, затем добавляет его в адресную строку перед URL страницы и в закладки, присваивая его вашему сайту. Никакой практической пользы иконка веб-сайта не несёт и служит только его узнавания.

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

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

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

Нужно создать favicon для сайта? Рассмотрим сервисы для создания фавикон онлайн

Самый популярный сервис для создания иконки для сайта . Работать в нём достаточно просто и с этим справиться даже начинающий пользователь. Мы загружаем картинку, которую хотим видеть в качестве иконки сайта. Он её обрабатывает. Смотрим получившееся изображение и если оно нам подходит, то нажимаем Скачать . Автоматически сохраняется файл с название . Можно и самостоятельно попиксельно порисовать и если понравится, то тоже сохранить как иконку. Важно, чтобы для создания фавикона использовался простой рисунок. Если будет много всего разноцветного, то получиться невзрачное пятно.

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

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

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

Можно было бы конечно использовать для создания иконки всеми любимый Фотошоп. Но он не сохраняет картинки с расширением ico . Вернее сохраняет, но для этого необходимо распаковать специальный плагин – icoformat.8bi установить его в папку Plug-Ins\File Formats в папке Фотошоп. Это позволит сохранять файлы с нашим нужным расширением. По мне, так это достаточно хлопотно.

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

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

Как же сделать так, чтобы иконка стала фавиконом для сайта?

Необходимы следующие шаги:

1 Убедиться, что файл называется .

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

3 Для этого берём файл нашей темы header.php (можно его редактировать в администраторской панели непосредственно в WordPress, а можно скачать его с сервера), открываем его и прописываем перед закрывающим тегом следующий код:

/favicon.ico"/>

/favicon.ico"/>

4 Сохраняем файл и переносим обратно на хостинг.

5 Чистим кэш текущего браузера и всё. Получили искомый результат.

Кстати, не обязательно, чтобы фавикон располагался в корне. Атрибут href задаёт непосредственно путь к нему. Получается так:

Так же не обязательно, чтобы значок был с расширение ico . Можно использовать также расширения png и gif . Для этого в коде меняется тип выводимого файла.

То есть меняем type с image/x-icon на image/png или gif .

Кстати, можно добавит ещё кое-что. Мы создали и поставили фавикончик для сайта, а в администраторской панели WordPress, остался стоять по умолчанию стандартный фавикончик. Чтобы он изменился вообще везде, нужно в файл нашей темы function.php , вставить следующий php -код:

function sp_set_favicon() { echo " "; } add_action("admin_head", "sp_set_favicon"); add_action("login_head", "sp_set_favicon"); add_action("wp_head", "sp_set_favicon");

function sp_set_favicon() { echo ".get_bloginfo ("template_url" ) /> " ; add_action ("admin_head" , "sp_set_favicon" ) ; add_action ("login_head" , "sp_set_favicon" ) ; add_action ("wp_head" , "sp_set_favicon" ) ;

Теперь он отразится во всех заголовках.

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

Смотрите видео, как создать favicon.ico и разместить его на хостинге:

Очень важным элементом дизайна блога является фавикон – небольшое изображение (16х16 пикселей). Маленькие размеры – но огромный эффект! Эта статья посвящена тому, как создать фавикон (favicon.ico) для сайта онлайн, с помощью специальных сервисов. Вы подробнее ознакомитесь с тем, что это за иконка фавикон, для чего она используется, какие у нее функции, как ее добавить на блог и создать в режиме online. Также вы узнаете, где скачать коллекцию готовых favicon ico для сайта .

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

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

Favicon – сокращение из двух слов (англ. FAVorites ICON), что переводится, как иконка (очень маленькое изображение) для «Избранного». Избранное – так называются закладки в браузере Internet Explorer. Внешний вид favicon примерно такой:

Сделать фавикон для сайта стало очень просто, поэтому этот мини- приобрел широкую популярность. Кроме того, можно скачать для сайта готовую иконку favicon ico, которую останется только добавить. Выбрав из галереи подходящую, вы сможете украсить ею свой сайт и любоваться ей в браузере (вот как выглядит эта мини-картинка в Хроме):

Итак, favicon – это маленькое изображение размером 16×16 px, с расширением.ico (расширение иконок). Т.к. иконка приобрела широкую популярность, она имеется практически у каждого сайта, а это еще один повод, чтобы создать фавикон для сайта онлайн. При этом не важно, что за хостинг вы используете, на каком движке работает ваш блог – в любом случае вы сможете создать в режиме online, а затем установить favicon или же скачать готовый фавикон для сайта. Благодаря современным генераторам иконок, их создание не занимает много времени – одна-две минуты, и все готов.

У вас все еще нет фавиконки? Исправляйтесь скорее!

Для чего же используется эта мини-картинка. Во-первых фавикон для сайта – как логотип для торговой компании, это способ выделиться из общей массы. Посетители будут узнавать ваш сайт, взглянув на изображение favicon. Во-вторых, Яндекс тоже использует изображения фавикон, показывает их рядом с результатами выдачи, что позволяет сайтам с favicon лучше выглядеть на фоне других. А это значит, что пользователи будут чаще переходить на ваш сайт, ведь иконка будет «заманивать» их. Другими словами, это мини-изображение поможет вам . Вот как все выглядит:

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

Кстати, у поисковой системы Яндекс даже имеется специальный робот, который индексирует эти иконки и загружает их в базу данных поисковика. После того как вы создадите фавикон и установите его на сайт, яндекс через какое-то время (обычно не более месяца) проиндексирует его и начнет показывать в результатах выдачи. Вы в любой момент можете проверить, есть ли уже в базе поисковой системы ваш мини-логотип. Сделать это можно одним из 3-х способов:

• Наберите ваш сайт в окне поиска Яндекс, и вы увидите, есть ли рядом с ним favicon.
• Наберите в браузере ссылку http://favicon.yandex.net/favicon/site.ru , где замените site.ru на адрес вашего сайта. Если фава проиндексирована, вы сможете ее увидеть.
• Зайдите в панель Яндекс.Вебмастер, там тоже отражается фавикона.

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

2. Online генераторы и коллекции favicon

Теперь мы знаем, что такое фавикон, и зачем она нужна сайту. Запомнили, что ее размер в пикселях должен быть строго равным 16 на 16, а расширение – только.ico. Теперь узнаем, как сделать такое мини-лого:

1. Скачать уже готовую фаву из галереи.
2. Создать самому с помощью генератора фавикон.
3. Сделать из готового изображения (опять же с помощью favicon generator’а)

2.1 Коллекции и галереи фавикон

1. http://www.thefavicongallery.com/ — хоть и небольшая коллекция, но полезная. Здесь вы найдете иконки на самые разные тематики. Всего их около 300 штук. Для того, чтобы скачать понравившуюся favicon ico для сайта, нажмите на нее правой кнопкой мыши и сохраните на свой компьютер.
2. http://www.iconj.com/favicon-gallery-page1.html — еще одна коллекция favicon для сайта, которая содержит более 3 тысяч мини-картинок. Сохранить понравившуюся можно в двух форматах (ico или gif). Но есть и недостаток: вы можете просматривать за раз только 30 иконок, чтобы увидеть следующие, нужно перейти на новую страницу.
3. http://www.favicon.cc/?action=icon_list&order_by_rating=1 – благодаря этой галереи, вам не придется самому онлайн создавать фавикон. Просто выберите и скачайте понравишуюся картинку. Опять же, за раз можно просматривать 20 фавикон, что замедляет процесс выбора.
4. http://www.favicon.co.uk/gallery.php — этот сайт позволяет не только делать фавикон для сайта, но и скачивать готовые варианты. За раз вы можете проглядывать по 144 иконки, что намного удобнее, чем в двух предыдущих вариантов. Фавы на самые разные темы.
5. http://favicon-generator.org/gallery/ — хоть и маленькая, но полезная коллекция из 84 штук фавиконок. Выбирайте любую!

2.2 Как сделать Фавикон для сайта с нуля

Конечно, вы можете скачать для своего сайта и готовую фаву, но намного лучше – сделать собственную своими руками. В этом деле нам помогут так называемые Favicon Generators (генераторы фав), которые позволяют в режиме онлайн создавать красивые мини-картинки.

2.2.1 Logaster.ru

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

Скачать файлы фавикона можно в форматах ICO или PNG.
Более подробно, как создать фавикон с помощью Логастер можно прочитать

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

2.2.2 Favicon.cc – генератор фавиконок

Этот незамысловатый генератор – один из самых простых и популярных, используемых для online создания favicon для сайта. Вы сможете нарисовать каждый пиксель будущей фавы (всего их 256). Перейдя на сайт, вам станет доступно рабочее окно, в котором вы можете экспериментировать.

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

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

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

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

Чтобы скачать получившийся фавикон, который вы делали для сайта, нажмите на ссылку Download Favicon (выделена красным).

2.2.3. Генератор Amichurin.Appspot.com

Еще один Generator красивых favicon, в котором в режиме online можно создать красивую картинку. Весь генератор на русском, но его функционал будет попроще, чем в предыдущем случае. Кстати, подписи, сделанные бардовым цветом, – не мои.

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

2.2.4 Генератор Favicon-Generator.org

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

2.3 Favicon из готового изображения

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

Заранее подготовьте картинку, которую вы хотите взять как основу.

2.3.1 Сервис Favicon.ru

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

Добавить картинку или фотку (основу) вы можете так:

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

После того как картинка добавится, нажмите «Создать favicon. ico!» и немного подождите, генератор сформирует иконку. После этого скачайте изображение на свой компьютер. Кстати помимо генератора на этом сайте есть и большая коллекция favicon ico для вашего сайта.

2.3.2 Сервис Favicon.cc

Похожий генератор, но с более мощным функционалом. Чтобы создать фаву из готовой картинки, сначала перейдите во вкладку «Import Image».

Теперь нажмите «Выберите файл» и добавьте загружаемый файл. На его основе и будет создана favicon ico для вашего сайта. Кстати, вам может понадобиться функция растяжения изображения:

• Keep dimensions – при уменьшении соотношения сторон картинки останутся такими же
• Shrink to square icon – стороны изображения будут приведены к квадратному виду (картинка может исказиться).

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

3. Как добавить favicon на блог WordPress

С тем, откуда скачать готовый favicon для сайта или как сделать свой собственный – мы разобрались. Теперь давайте обсудим, как добавить фаву на блог Вордпресс.

Как правило, фавикона расположена в корне сайта (в корневой папке) – на это мы и будем ориентироваться. Если ваша фава лежит не в корне, просто перенесите ее туда.

Добавляется favicon.ico в два шага.

ШАГ ПЕРВЫЙ

Первым делом вам нужно найти в вашей теме ту строчку кода, которая отвечает за вывод фавикона. Откройте для редактирования файл Заголовок (header.php) и найдите такую (или похожую) строчку:

Если вообще нет ничего похожего и содержащего слово favicon.ico, тогда просто добавьте эти две строчки куда-нибудь между тегами и .

ШАГ ВТОРОЙ

Теперь нужно добавить саму фавикону на ваш хостинг, именно в корневую папку сайта (в противном случае, она не будет отображаться). Заходите на хостинг и закачивайте фаву в корень сайта (имя файла обязательно favicon.ico , размеры обязательно 16×16 пикселей ).
Вот и все, скоро фавиконку проиндексируют поисковики и она будет красоваться в результатах выдачи Яндекса. А ваш сайт будет иметь собственную favicon.

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

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

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

• легко и быстро создавать новые материалы;
• придать существующим наработкам завершенный вид;
• сохранять результат в разных форматах (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, адаптация размера, модные стили и встроенный векторный редактор. К тому же это единственный бесплатный редактор иконок на русском, если для вас это важно.

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

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

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

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

Что такое фавикон и зачем он нужен

Несмотря на то, что фавикон – это очень маленький графический объект, он крайне важен в дизайне сайта и в целом.

Кликните , чтобы увеличить картинку.

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

Во-вторых , фавикон выделяет ваш сайт среди прочих веб-ресурсов в списке поисковой выдачи. Сайт без этой мини-иконки будет блекло смотреться и проигрывать конкурентам. Одним словом, фавикон — это просто “must have” для сайтов.

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

Создание дизайна фавикона

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

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

Не используйте текст

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

Пикселизация фавикона

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

Это фрагмент полноразмерного логотипа Facebook после его уменьшения до размера 32×32. Легко заметить, что по краям изображение «плывет». Чтобы избежать такого дефекта, следует провести редактирование на пиксельном уровне.
При работе с иконками я предпочитают использовать программы для редактирования растровых изображений (например, Photoshop или Pixelmator). Сначала я уменьшаю полноразмерный логотип до размера 64×64 пикселя, поскольку это самый большой фавикон, который мне понадобится. Труд очень кропотливый, может занять целый час, а то и два, но зато результат получается просто отличный.
Если у вас нет времени и навыков в подобных операциях, лучше использовать онлайн сервисы, такие как Logotizer.ru

Размер фавикона

Получив иконку размером 64×64, я точно так же создаю иконки размером 32×32, 24×24 и 16×16 пикселей. У каждой из них свое предназначение:

— 64×64 – “Список для чтения” в Safari и Windows
— 24×24 – Закрепленные сайты в IE9.
— 32×32 – Для экранов с высоким разрешением.
— 16×16 – Обычно используется в таких браузерах, как IE, Safari, Chrome и т.д.

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

Форматы фавикона

Раньше, когда поддерживались только файлы формата Windows ICO, мы могли сэкономить время, сохранив фавикон размером 16×16 в формате GIF и дав ему расширение.ico. Такой прием работал безотказно! Но теперь в этом методе нет необходимости, поскольку инструменты для создания файлов ICO можно легко найти в Интернете. Более того, сейчас для фавиконов используются и , но самыми распространенными все же являются только следующие два.

ICO

Пальма первенства принадлежит формату ICO. В отличие от файлов PNG, файлы ICO могут иметь разное разрешение и битовую глубину (что отлично подходит для Windows). Браузер Internet Explorer использует фавиконы различных размеров (например, 32-пиксельные иконки для панели задач Windows 7), и поэтому в данном случае формат ICO является единственным вариантом.

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

Есть и другие варианты:

— Форматы GIF и анимированный GIF не имеют никаких преимуществ, кроме совместимости с очень старыми браузерами.
— Формат JPG использовать не рекомендуется, даже если изображение представлено в виде фотографии. Этому формату недостает четкости PNG, а единственное достоинство заключается в более плавных переходах между цветами – нюанс, который на очень маленьком изображении совершенно незаметен.
— SVG мог бы стать отличным вариантом, если бы больше браузеров поддерживали фавиконы этого формата. Пока же имеется совместимость только с Opera.
— Также существует так называемый “подформат” PNG – APNG (анимированный PNG), который поддерживается в Firefox и Opera. Однако целесообразность его использования остается под вопросом. Анимированный фавикон может отвлекать внимание и даже раздражать пользователя.

Создать фавикон онлайн — инструменты и онлайн сервисы

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

Logotizer

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

Как создать фавикон с помощью онлайн генератора Logotizer

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

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

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

Ниже блока “Форма” расположена коллекция фигур (символов). Их не так много, жаль, что нельзя загружать свои варианты; но выбор все равно достаточно интересный.

Меняйте цвет, размер, расположение фигур! Одним словом, экспериментируйте, благо, сервис позволяет это сделать.

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

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

Если вы решили, что какой-то слой фавикона вам временно мешает или совсем не нужен, вы можете просто его скрыть.

После создания фавикона сервис предложит сохранить его. Зарегистрируйте аккаунт (в 2017 году без регистрации никак), и после этого вы сможете скачать файлы при небольшой оплате — 199 рублей.

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

После оплаты пользователь получает сразу 10 фавиконок разных размеров под все необходимые на сегодняшний день устройства (Аpple touch icon, Microsoft Application Icons и другие).

Сам файл favicon.ico является мультиразмерным и содержит в себе иконки 4 размеров в 1 файле (16px, 24px, 32px, 64px). Соответственно, если добавить сайт в закладки браузера или открыть историю — можно будет наблюдать иконки разного размера, но отображаться они будут четко и без размытия.

В целом сервис хороший. Простой, удобный, ничего лишнего.

RealFaviconGenerator.net

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

Favicon.by

Favicon.by – еще один бесплатный и простой в использовании генератор фавиконов, который конвертирует файлы PNG, JPG и GIF в формат.ico. Загрузите изображение с вашего компьютера, выберите размер (16x16px или 32x32px) и нажмите на кнопку “Создать”. Чтобы сохранить полученный фавикон на своем сайте, следуйте указаниям.

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

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

Добавить фавикон на сайт можно, сделав несколько правок в HTML – коде страницы сайта.

Шаг 1: Загрузите файл “favicon.ico” на свой хостинговый сервер.

Для этого зайдите в свой FTP-сервер по этой ссылке:
ftp://[email protected]
Введите свои имя пользователя и пароль. Их можно получить в панели администратора вашей хостинговой компании.
Загрузите файлы с фавиконами в корневой каталог. Корневой каталог обычно называется “public_html” или “www”.

Шаг 2: Добавьте фавикон в HTML.

Держа окно FTP-сервера открытым, скачайте файл “index.html” или “header.php”.
Затем вам нужно загрузить код. Загружаемый код зависит от вашего веб-сайта.
Если ваш сайт на HTML, найдите область HEAD в файле index.html и вставьте следующий код:

Если ваш сайт на WordPress, найдите область HEAD в файле header.php и вставьте следующий код:

/favicon.ico» />

При помощи этих кодов браузеры смогут найти ваши фавиконы.
Итак, вы установили свой фавикон!

Как добавить фавикон на WordPress и другие платформы

Если ваш ресурс базируется на WordPress или другой CMS, то добавить фавикон на сайт очень просто. В целом алгоритм добавления фавикона для разных платформ будет одинаковым.
1. Вам нужно зайти в консоль сайта.
2. Найти раздел “Дизайн” или “Внешний вид”.

3. Зайти в раздел “Настройки темы” и найти там “Фавикон”.

4. Загрузить фавикон из вашего компьютера.

5. Сохранить и обновить страницу.

Как создать более сложные фавиконы

В этой статье рассмотрены простые и быстрые способы создания фавиконов, совместимых с практическим любыми браузерами и операционными системами. Но когда дело касается веб-дизайна и разработки, предела совершенству нет. Если вы хотите научиться делать более сложные фавиконы, тач-иконки для главных экранов iOS, иконки для интерфейса Metro в Windows, иконки для Google TV и многое другое, я рекомендую вам ознакомиться с этими материалами: favicon cheat sheet . Там собрана полная информация по теме и приведены хорошие источники. Это отличный вариант для тех дизайнеров и разработчиков (включая меня), кто постоянно стремятся расширять свои знания.

При помощи Favico.js вы можете создавать динамические фавиконы с цифрами.

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

Если вы хотите пополнить эту статью еще одним советом или задать вопрос, оставляйте комментарии ниже!

Как создать фавикон для веб-сайта — советы и сервисы обновлено: Февраль 7, 2018 автором: admin