Что такое фавикон, как его создать и добавить на сайт

Каким должен быть favicon

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


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

  • freshfavicon.com;
  • thefavicongallery.com;
  • faviconka.ru.

Идеальный фавикон обладает такими свойствами:

  • ассоциативность;
  • простота;
  • понятность для аудитории;
  • оригинальность.

Эти критерии относятся к внешнему виду графического идентификатора. Фавикон отличается от обычных изображений, имея свои стандарты оформления. Если отклониться от требуемых форматов, favicon может не отображаться или отображаться некорректно. Заменить иконку ресурса возможно оперативно, но в поисковой системе Яндекса смена (и появление) фавикона происходит в течение 3-4 недель. Все это время изменить значок в поисковой выдаче невозможно – обращение в службу поддержки не поможет, процесс осуществляется автоматически.

Стандарты оформления для favicon:

  1. Разрешение изображения – квадрат с размером сторон, кратных 8. Рекомендуемое разрешение для десктопной версии 16х16, но присутствует возможность использования и других размеров: 24х24, 32х32 и так далее. Для удобства использования иконки в качестве приложения на мобильных платформах рекомендуемое разрешение значка 120х120 и 180х180.
  2. Стандартное расширение для файла favicon – ICO. Кроме этого варианта допускается использование других графических форматов: PNG, GIF, JPEG, SVG. В некоторых ситуациях целесообразно создавать иконку в формате PNG вместо классического ICO, что объясняется возможными проблемами с масштабированием.
  3. Картинка должна быть четкой и без размытых участков.
  4. Иконка должна быть уникальной – это одно из условий добавления значка в поисковую систему Яндекса.

Оригинальный фавикон Яндекса

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

Favicon генераторы

Favicon.ru

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

Сделать favicon.ico на этом сервисе можно указав путь к картинке на компьютере или в интернете, для создания ярлыков можно включить два дополнительных размера 32х32 и 48х48, также на favicon.ru можно обрезать картинку, в случае если размеры её не пропорциональны.

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

Favicon.cc

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

Справа расположилась палитра цветов (оттенков) и несколько инструментов, а именно инструмент прозрачности, пипетка, для определения цвета на холсте и инструмент перетаскивания, которым можно таскать по холсту Ваше что-то там нарисованное:).

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

Рисовать иконку в графическом онлайн редакторе? Мазахизм, не мой метод, потому слева от холста в основном меню кликаю на пункт «Import image»:

Здесь всё довольно просто, указываем путь к изображению (нажатием кнопки «Обзор») и выбираем один из двух имеющихся вариантов обработки загружаемой картинки. Первый подходит к картинке с пропорциональными размерами всех сторон, моя 50х50, второй больше подходит к картинке с разными размерами, при этом варианте изображение сплюснет. Нажимаю кнопку «Upload» и вновь попадаю в редактор, но на холсте уже моя картинка, так сказать попиксельно. Если Вас устраивает конечный результат, можно скачивать иконку, мне не понравилась:

FavIcon from Pics

На очереди FavIcon from Pics, тупой такой, лёгкий до безобразия, ничего лишнего, но на нём я сделал свою фавиконку, которая сейчас стоит на pervushin.com, лучше чем здесь, мне не удалось сделать больше нигде. Самое удивительное, что из картинки которую загружаю (здесь тоже есть такая возможность) на сервис получается такая же шняга, как и у остальных, но этот сервис пошёл дальше, он делает favicon из аватарки твиттера! Кстати, если у кого нет твиттера, рекомендую завести, и

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

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

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

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

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

Поэтому смело экспериментируйте, придумывайте что-то новое, старайтесь — и все получится!

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

Начну с определения, вдруг кто не знает, favicon — это иконка, значок сайта (блога) или отдельной веб-страницы, которая отображается в адресной строке браузера, в закладках, в журнале, во вкладках и т.д. Стандартный, минимальный размер иконки 16×16, этот размер необходим для вышеуказанных мест, но есть пользователи, которые сохраняют адреса веб-страниц в виде ярлыков на рабочем столе или где-то в папках, в общем для таких целей предусмотрены размеры 24х24, 32х32, 48х48 и 64х64, все эти размеры включаются в один favicon.ico, но главное помнить, что размер файла от этого увеличивается, имею ввиду байты, что затрудняет загрузку сайта.

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

У яндекса для это есть специальный робот, который ищет на сайтах фавикон, мой фавикон находится здесь http://favicon.yandex.net/favicon/сайт, понимаете да, чтобы проверить свой фавикон, поменяйте адрес сайта на свой. Так вот если Вы сменили иконку, то на яндексе она сразу не появится, ну максимум через месяц.

Создать favicon можно с помощью настольных программ, например Favicon Create или Icon Cool Studio, последняя кстати очень мощная, но лучше использовать онлайн сервисы:).

Прозрачность и размер иконки

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

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


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

Так в мобильном Google Chrome, вместо иконки 16х16, можно увидеть цветной квадрат с первой буквой из названия сайта по середине. Другие браузеры могут растягивать маленькую иконку, что выглядит визуально не очень красиво. Доля мобильного трафика сегодня высока, и может достигать 20-25%. И с каждым годом только растет, поэтому, подумать о нем на будущее будет не лишним.

favicon.ico

Although all desktop browsers can deal with this icon, it is primarily for older version of IE.

The ICO format is different of the PNG format. This point is tricky because some browsers are smart enough to process a PNG picture correctly, even when it was wrongly renamed with an ICO extension.

An ICO file can contain several pictures and Microsoft recommends to put 16×16, 32×32 and 48×48 versions of the icon in . For example, IE will use the 16×16 version for the address bar, and the 32×32 for a task bar shortcut.

Declare the favicon with:

However, it is recommended to and to and let the modern browsers pick the PNG icons.

Добавление фавикона

Для добавления фавикона на веб-страницу в начало HTML-документа потребуется вписать всего одну строку с тегом <link>, в котором нужно указать атрибут rel, указывающий браузеру что мы добавляем иконку, атрибут href, содержащий адрес нашего изображения, и атрибут type, показывающий какой формат изображения мы используем:

<html>
  <head>

    <link rel="icon" href="путь_к_иконке/favicon.ico" type="image/x-icon">

  </head>
  <body>
  </body>
</html>

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

В таблице показаны различные варианты добавления фавикона и приведена поддержка браузеров:

Google Chrome Internet Explorer Firefox Opera Safari
<link rel=»shortcut icon» href=»httр://mysite.ru/myicon.ico»> Да Да Да Да Да
<link rel=»icon» href=»httр://mysite.ru/image.ico»> Да Да (с IE 11) Да Да Да
<link rel=»icon» type=»image/vnd.microsoft.icon» href=»httр://mysite.ru/image.ico»> Да Да (с IE 9) Да Да Да
<link rel=»icon» type=»image/png» href=»httр://mysite.ru/image.png»> Да Да (с IE 11) Да Да Да
<link rel=»icon» type=»image/gif» href=»httр://mysite.ru/image.gif»> Да Да (с IE 11) Да Да Да
<link rel=»icon» type=»image/x-icon» href=»httр://mysite.ru/image.ico»> Да Да (с IE 9) Да Да Да

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

Это фавикон

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

Место размещения фавиконов – адресная строка веб-ресурса на вкладке браузера или список избранных закладок. В некоторых поисковых системах фавиконы располагаются возле ресурсов на страницах поиска. Например, в «Яндексе». Стоит также отметить, что алгоритмы поиска этой системы при поисковой выдаче сначала отдают предпочтение ресурсам, у которых есть иконка сайта.

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

Favicon для мобильных устройств Apple

Как и в андроид, устройства Apple имеют различный PPI для разных устройств, в том числе так называемые Retina-экраны. Для разных версий разрешений экрана и версий ОС так же существует ряд различных вариантов иконок:

  • 57×57 – для iPhone с не ретина дисплеем и iOS версии 6.0 и ниже
  • 60×60 – для iPhone с не ретина дисплеем и iOS версии 7.0
  • 72×72 – для iPad с не ретина дисплеем и iOS версии 6.0 и ниже
  • 76×76 – для iPad с не ретина дисплеем и iOS версии 7.0
  • 114×144 – для iPhone с ретина дисплеем и iOS версии 6.0 и ниже
  • 120×120 – для iPhone с ретина дисплеем и iOS версии 7.0
  • 144×144 – для iPad с ретина дисплеем и iOS версии 6.0 и ниже
  • 152×152 – для iPad с ретина дисплеем и iOS версии 7.0
  • 180×180 – для iPhone 6 Plus c iOS версии 8.0

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

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

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

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

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

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

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

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

Фавикон под микроскопом

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

Со слов Яндекса, размер фавикона должен составлять 16х16, 32х32 или 120х120 пикселей. К слову, чаще всего применяется изображения размера 16х16 пикселей. Рекомендованный формат ICO. К допустимым форматам относятся: GIF, JPEG, PNG и BMP.

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

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

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

Стоит обратить внимание, что индексация осуществляется периодически (несколько дней, месяц). Т

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

Когда поисковик найдет Favicon.ico на вашем сервере, он изменит его графический формат ICO в PNG, после чего ваш фавикон можно будет найти по следующему адресу:


https://favicon.yandex.net/favicon/stimylrosta.com.ua

При проверке не забудьте подставить поле последнего слеша URL-адрес своего блога.

Создание фавикона — важный этап в продвижении проекта. К преимуществам использования фавиконов можно отнести:

  • узнаваемость бренда;
  • доверие посетителей;
  • повторные посещения;
  • экономия времени пользователей.

Основная выгода с этого — узнаваемость бренда. С помощью «мини-логотипа» можно привлечь большее количество посетителей из поисковой выдачи (в частности со страниц Яндекса), поскольку возле адреса вашего веб-ресурса будет миловаться знакомая иконка. Она то и будет побуждать пользователей отдавать предпочтение вам, а не конкуренту (соседу по выдаче)

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

Осталось разобраться, как создать и как создать и установить фавикон на сайт?

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

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

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

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

Индексация фавикон сайта поисковыми системами

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

С помощью следующих URL можно проверить, как поисковые роботы видят иконку фавикон у сайта:

  • Яндекс — https://favicon.yandex.net/favicon/имя_домена
  • Google — https://www.google.com/s2/favicons?domain=имя_домена

Вместо имя_домена необходимо указать имя домена (например, itchief.ru).

Примечание: использование в качестве favicon анимированных изображений (gif) поддерживаются только некоторыми браузерами (Firefox). В других браузерах в качестве favicon будет использоваться статичное изображение.

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

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

Если вы хотите разместить favicon.ico в какой-либо другой папке, вам следует прописать путь к этому файлу внутри контейнера <head>:

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

Тип (type) прописывать необязательно, но в дальнейшем эта информация понадобится для настройки кэширования.

Если вы используете CMS WordPress: вы можете сделать так, как написано выше, либо использовать специальный плагин Favicon by RealFaviconGenerator

Еще обратите внимание на официальную документацию WordPress, касающуюся favicon: https://codex.wordpress.org/Creating_a_Favicon. Если вы используете CMS Joomla: вам нужно загрузить файл в директорию /joomla/templates/

Официальную документацию вы можете найти в этом разделе: https://docs.joomla.org/Changing_the_site_favicon

Если вы используете CMS Joomla: вам нужно загрузить файл в директорию /joomla/templates/<ваш шаблон>. Официальную документацию вы можете найти в этом разделе: https://docs.joomla.org/Changing_the_site_favicon

Создание favicon.ico

Самые распространенные способы – это с помощью онлайн сервисов или знаменитого растрового редактора – Adobe Photoshop.

Онлайн-сервисы

Интерфейс сервиса состоит из следующих разделов:

  1. Нарисовать самостоятельно – в этом разделе есть все что необходимо для самостоятельно рисования фавиконки (карандаш, ластик, пипетка, заливка, переместить).
  2. Импорт из файла – выбираете любой рисунок и сервис сам создает фавикон.
  3. Импорт с сайта – создаст favicon.ico на основе импорта фавиконки с сайта.
  4. Область для рисования.
  5. Готовый результат – сразу можете оценить, как будет выглядеть favicon.
  6. Скачать готовую фавиконку.

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

Adobe Photoshop

Я выбираю именно фотошоп, потому что редактирую в нем все картинки для блога. Если у Вас нет опыта работы с Adobe Photoshop, не переживайте, я все подробно покажу.

Открывает программу, создаем документ с размером 32×32 пикселей.

Далее с помощью инструментов можно:

  1. сделать заливку;
  2. написать текст;
  3. создать фигуру.

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

  • Для этого открываем меню Файл -> Открыть, далее выбираем свою картинку и нажимаем кнопку Открыть.
  • После, инструментом выделение, отмечаем нужную часть логотипа, далее меню Редактирование -> Копировать.
  • Закрываем логотип, открываем документ с нашей будущей фавиконкой, нажимаем меню Редактирование -> Вставить.
  • Далее на клавиатуре нажимаем сочетание клавиш Ctrl+T (eng), подгоняем картинку под наши размеры. Готово.

Фавиконку сохраняем, выбрав меню Файл -> Сохранить как…, указываем имя favicon и выбираем расширение .png или .jpeg или .jpg.

После сохранения можно устанавливать, но рекомендуется файл с расширением .ico. Поэтому наш favicon.png конвертируем в favicon.ico.


Далее нажимаем кнопку Конвертировать, ждем и можем скачивать готовую фавиконку.

Вот теперь можно поставить фавикон на сайт.

Чтобы имидж не испортить

Как уже было сказано фавикон – это бренд, лицо сайта

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

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

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

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

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

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

Как получить favicon для сайта

Существует несколько вариантов сделать это:

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

Рассмотрим возможности каждого из методов.

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

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

Популярные сервисы для отрисовки фавиконов:

  • favicon.cc;
  • onlinefavicon.com;
  • favicon.by.

Функциональность предложенных редакторов схожа, а процесс рисования выглядит просто и понятно.

Отрисовка favicon в сервисе Favicon.cc

Онлайн-конвертеры для преобразования графики в favicon

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

Помимо предложенных ранее сервисов, для конвертации в форматы фавикона подходят:

  • image.online-convert.com;
  • icoconverter.com;
  • fconvert.ru;
  • инструмент от PR-CY.

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

Adobe PhotoShop

Конвертацию и/или отрисовку можно выполнить самостоятельно в графических редакторах, среди которых наиболее популярным является Фотошоп. Недостаток метода в том, что базовое приложение не имеет возможности сохранить картинку в формате ICO, но с другими расширениями проблем нет. Если возникла необходимость получения иконки именно в ICO, то необходимо установить отдельный плагин. Для установки выбранного плагина нужно перенести его файлы в директорию Фотошопа, в папку …\Plug-ins\File Formats. После этого появится возможность сохранять изображения в формате ICO.

Разработка и редактирование иконки в Adobe PhotoShop

Заказ услуги

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

Где можно заказать создание фавикона для сайта:

  1. Специализированные веб-студии. Самый дорогой и надежный вариант.
  2. Подключение дизайнер-фрилансера. Бюджетное решение, где качество результата зависит от навыков исполнителя.
  3. Биржи фрилансеров. Для составления заказа требуется ТЗ, иначе процесс разработки может затянуться надолго. Альтернативный вариант предложен на площадке FL.RU, где заказчик может организовать конкурс, получив сотни вариантов на выбор.

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

Посторонние редакторы

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

Электронная книга: эффективный онлайн-маркетинг

Готовая сетка: 8 пикселей с четырьмя подразделениями. В качестве основы для сложного дизайна мы определяем значок с длиной края 128 пикселей и определяем сетку из восьми пикселей, каждая с четырьмя подразделениями. Если было отображено 16 пикселей, каждая сетка будет соответствовать одному пикселю. Откройте для себя силу идеального онлайн-маркетинга для вашего сайта.

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

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

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

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


С этим читают