Как сделать favicon и с помощью его увеличить посещаемость сайта?

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

как сделать favicon

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

Что за зверь – Фавикон?

Давайте-ка разберемся, что такое favicon и с чем его едят.

Favicon (Favorites Icon представляет собой небольшой значок веб-страницы (веб-сайта), который отображается в адресной строке вашего браузера непосредственно перед URL-адресом загруженной страницы.

Впервые, фавикон появился с выходом в 1999 году браузера  Internet Explorer 5, который начал поддерживать отображение значка favicon.ico помещенного в корневую папку веб-сайта. Минус состоял в том, что изначально значок отображался лишь для тех страниц, которые находились в закладках браузера. По происшествию какого-то времени все стало гораздо проще и увидеть значок можно было в любом браузере, независимо от того, есть ли страничка в закладках или нет как это было реализовано в IE.


Favicon.ico имеется у львиной доли веб-сайтов, в том числе и работающих на таких движках, как Smf, Joomla и WordPress – это особой роли не играет. Стоит задуматься о создании фавиконки, если у вашего сайта ее все еще нет, поскольку она позволяет привлечь гораздо большее число посетителей со стартовой  страницы поисковой системы Yandex. Вполне ясно, что ссылки, возле которых пестрят красивые значки (фавиконы) имеют больше шансов быть замеченными и посещенными, более того если ваш favicon имеет ярко выраженную окраску как к примеру у меня, то в таком случае у вас увеличивается ctr страниц, что несет за собой  рост  позиций в яндексе.

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

http://favicon.yandex.net/favicon/jonyit.ru

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

как выглядят фавиконы в выдаче яндекса

Как создать favicon с помощью онлайн-генератора Favicon.cc

Итак, вашему внимаю, хотелось бы предложить довольно интересный онлайн-генератор, с помощью которого вы с легкостью сможете нарисовать желаемую иконку практически с нуля, составив ее попиксельно.  Прежде всего, вам необходимо зайти на страницу Favicon.cc, после чего найти в левой области окна веб-сервиса кнопочку “Сreate New Favcon”.

как создать favicon

Возможно, вы уже заметили, что в самом центре страницы вышеупомянутого онлайн-генератора находится область, разделенная на квадратики, каждый из которых – пиксель вашей будущего фавикона. Собственно, ваша задача состоит лишь в закрашивании этих самых пикселей. Итак, сперва вам необходимо поставить галочку в поле «pick existing color» в правой части окна, после чего выбрать необходимый цвет на палитре, которая расположена в той же области, таким образом, закрасив первый квадратик. Если же вы случайно ошиблись, то для того, чтобы удалить неправильную закраску, необходимо его обесцветить, поставив галочку в поле “transparent” и щелкнув по нужному квадрату, после чего он станет прозрачным (бесцветным).


Если вы захотите переместить только что нарисованную favicon по холсту онлайн-генератора Favicon.cc, просто поставьте галочку в поле «move». Далее, вы сможете лицезреть плод собственного труда в специальной области генератора, находящейся под холстом, именуемой «Preview». Предположим, что вас все устраивает, фавикон получилась, как и планировалось. В таком случае нужно всего лишь нажать на кнопочку загрузки результата «Download Favicon».  Готово! Созданная вами иконка моментально очутится на жестком диске вашего компьютера, после чего можно немедленно установить ее для своего веб-сайта.

Ну что ж, теперь вы определенно знаете все о процессе самостоятельного создания фавикона для своего веб-сайта практически с нуля. В случае, если вы не хотите себя утруждать самостоятельным рисованием иконки с помощью способа, описанного выше, можете просто загрузить на сервер онлай-генератора фавиконов готовое изображение, которое хотите использовать в качестве иконки для своего веб-сайта. Что касается формата и размеров загружаемой картинки, не беспокойтесь, они могут быть совершенно любыми. Итак, для того, чтобы импортировать желаемую картинку на сервер онлайн-генератора Favicon.cc, вы должны будете нажать находящуюся в левой части окна вышеупомянутого сервиса кнопку «Import Image».

загружаем картинку

Открывшееся окошко позволит с помощью кнопки «Обзор» отыскать на своем компьютере нужное вам изображение, из которого вы собираетесь сделать фавикон. Следующим, что вы должны будете сделать, будет выбор того, что необходимо сделает с соотношением сторон вашей картинки. Этот вопрос актуален, если изображение, которое вы желаете преобразовать в фавикон,  имеет форму, отличную от квадратной (фавикон, как правило имеет квадратную форму и размер 16х16 пикселей). Выбор у вас таков: можете сохранить соотношение сторон неизменным, выбрав пункт «Keep dimensions» или же автоматически выполнить подгонку соотношения сторон изображения, после чего оно станет квадратным, выбрав «Shrink to square icon». В последнем случае произойдет искажения картинки по одной из осей.

Нажимаем кнопку «Upload», закачиваем изображение на сервер и редактируем, если нужно. Если результат вас устроил, просто нажмите на кнопку «Download».

Как превратить любую картинку в favicon с помощью онлайн-генератора Favicon.ru

Cразу стоит сказать, что сервис Favicon.ru значительно проще своего зарубежного аналога. Никаких изменений подобно Favicon.cc, в этом генераторе сделать будет нельзя. Вы просто-напросто загружаете свое изображение на сайт и получаете на выходе фавиконку, которую нужно будет только скачать. Если изображение находится не на компьютере, вы можете указать его  URL. Вам осталось лишь нажать на кнопку «Cоздать favicon.ico!», после чего скачать ее по сгенерированной ссылке.

создание фавикона

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

favicon.co.uk – поистине огромное собрание различных фавикон.

favicon.cc – внушительная коллекция, состоящая из 55 000 фавикон. Кроме обычных есть и анимированные фавиконы в gif-формате.

audit4web.ru  – 15-тысячная галерея фавиконок на любой вкус.

Как сделать favicon – Альтернативны online генераторов


Не подошли все вышеупомянутые варианты? Что ж, держите на десерт:

webscriptlab.com – простой в освоении онлайн-генератор фавиконок.

favicon-generator.org – еще одна минималистичная альтернатива.

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

iconj.com очередной онлайн-генератор, позволяющий не только скачать готовый результат, а и получить на него гиперссылку.

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

favicongenerator.com – внешне достаточно схож с favicon.ru

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

Разработка сайта
Мы не используем платные CMS и за счет этого мы привлекаем низкой ценой клиентов. Не используем шаблоны у нас только уникальный дизайн. В подарок мы делаем SEO оптимизацию сайта и настройку контекстной рекламы.
Заказать
Продвижение сайта
Частный оптимизатор выходит гораздо дешевле web-студии. Я помогу вам вывести cайт в ТОП-3 и настроить автоматические продажи. В стоимость услуг входит аудит, техническая и seo оптимизация сайта.
Заказать
БЛОГ под КЛЮЧ
Сэкономьте годы возни на созданием и продвижением своего блога. Отдайте это дело блоггеру с пятилетним стажем. В услугу уже входит SEO оптимизация блога. В подарок вы получаете видео-курс «Мой авторитетный блог»
Заказать




5 комментариев
  1. Андрей Бас 25 ноября, 2012 в 10:11

    Антон, есть ещё один хороший и простой сервис для создания фавиконов: favicon.htmlkit.com созданное изображение стабильное и без потерь + анимация…
    Кстати, Favicon.ru мне не понравился – изображение создаётся нечёткое – мой фав на выходе получался искажённый (неполный)

    Ответить на комментарий →
  2. Антон Краморов 25 ноября, 2012 в 03:52

    Андрей Бас, на самом деле сервисов для создания фавиконов очень много, но самый лучший сервис на мой взгляд это PHOTOSHOP [:-))]

    Ответить на комментарий →
  3. Спасибо, Антон! Похожие статьи этой тематики я видел на разных блогах, но у Вас самая полная и полезная.
    Для себя я фавикон сделал очень рано, на 2-м месяце моемго блога. И уже успел его поменять. А сейчас задумался над третьей версией оформления – мой блог растет. :)

    Ответить на комментарий →
  4. Антон Краморов 09 декабря, 2012 в 12:22

    Paladin, самые подробные статьи у Дмитрия Ктонановенького=)

    Ответить на комментарий →
  5. Онлайн генератор Фавикона generator-favicon.ru

    Ответить на комментарий →
Оставь свой первый комментарий и получи:
:) :-D ;-) :-| [star] [good] [present] [flower] [:-))] [:))] [:--_)] [:-|]