Favicon — что это такое, как создать иконку фавикон в онлайн генераторе и установить ее на свой сайт

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

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

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

Что такое фавикон и для чего он необходим?

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

Что же такое фавикон и в чем его преимущество? Это небольшая картинка размером 16 на 16 пикселей, которая появляется рядом с тайтлом вашего ресурса после загрузки соответствующего графического файла с расширением ico в корневую директорию сайта (подробности установки ждут вас ниже по тексту этой публикации).

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

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

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

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

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

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

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

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

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

Кстати, у Яндекса даже имеется специальный бот, который занимается индексированием иконок сайта. Так что даже после установки фавикона он не сразу может появится. Придется подождать очередного апдейта (неделю, иногда чуть больше), чтобы он отобразился на странице поиска. Иконку своего сайта в закромах «зеркала рунета» можно найти по совершенно конкретному адресу. Моя, например, находится здесь:

http://favicon.yandex.net/favicon/goldbusinessnet.com

Итак, мы уяснили, что установка favicon вполне полезная вещь. Главное, сделать этот значок максимально уникальным, чтобы он в выгодном свете отличался от значков других вебсайтов. Создать иконку можно в том же Фотошопе или в его упрощенной online версии, что является самым оптимальным вариантом, хотя задача эта непростая.

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

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

Как сделать favicon для сайта в online generator и бесплатно скачать коллекции иконок

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

Перед созданием фавикона, вам необходимо создать логотип, но его создание проходит всего в 4 шага, поэтому вы в считанные минуты сможете подобрать логотип, а затем на его основании создать фавикон. На странице логотипа необходимо нажать треугольник и выбрать строчку — «Создать фавиконку с этим логотипом»:

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

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

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

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

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

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

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

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

Если передвинуть горизонтальный ползунок «Transparency» вправо-влево, добьемся изменения прозрачности пиксела. Показатель 0% дает полностью непрозрачный фон, 100% — наоборот, прозрачный. В процессе рисования поставьте галочку напротив «transparent» при желании полностью удалить не понравившийся цвет с изображения в том или ином месте:

А теперь попробуем настроить полупрозрачный фон необходимых нам участков или всего рисунка в целом, сдвинув ползунок «Transparency» на отметку «50%»:

При нежелании каждый раз возвращаться к палитре для выбора оттенка отметьте опцию «pick existing color», после которого курсор примет форму пипетки, с помощью которой можно копировать цвет уже закрашенных областей:

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

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

Что еще мне нравиться в этом сервисе, так это то, что одновременно с манипуляциями на «холсте» на вкладке открытой в браузере вебстраницы Favicon.cc, а также в разделе предварительного просмотра «Preview», который находится чуть ниже, появляется изображение будущей фавиконки в реальном размере, которое меняется в такт всем действиям:

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

Далее продемонстрирую, как сделать фавикон в данном online генераторе из уже существующей картинки. Для этого воспользуйтесь кнопочкой «Import Image» в упомянутом уже блоке, после чего выбираете графический файлик на жестком диске ПК и загружаете его на сервис («Upload»):

Здесь следует обратить внимание на то, что поддерживаются графические файлы в форматах jpg, jpeg, gif, png, bmp, ico, cur. Это уже можно считать широким выбором. Максимальный размер загружаемого файла не должен превышать 5 Мб, что более, чем достаточно.

Также имейте ввиду, что для сохранения пропорций изображения (которое не является квадратным, где ширина и высота равны) оставляете включенной опцию «Keep demensions».

Ежели примените «Shrink to square icon», то иконка примет форму квадрата, но будет деформирована по одной из сторон, что, по моему мнению в стандартном варианте не является лучшим решением. Впрочем, в каждом конкретном случае могут быть свои предпочтения. После загрузки картинки она займет свое место в редакторе генератора Favicon.cc:

Далее вы можете отредактировать ее как вашей душе угодно, используя описанные выше инструменты. Хочу отметить следующее. Я специально взял для примера изображение с расширением jpg, которое, как известно, не поддерживает прозрачный фон. Обратите внимание, что и в редакторском окошке фоновые пикселы непрозрачные (белого цвета).

Казалось бы, какая разница? Но посмотрим, как будет выглядеть подобный значок на фоне, отличном от белого (например, неактивные вкладки браузера Google Chrome серого цвета):

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

После выполнения этих действий фавиконка на серой вкладке браузера становится гораздо более симпатичной:

Не рассмотренным остался один инструмент. Это опция «move» которая позволяет при необходимости переместить всю картинку на нужное расстояние (вправо-влево, вверх-вниз):

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

Делаем анимированный фавикон в онлайн генераторе

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

Если вы решили, что подобная favicon-ка будет для вашего сайта полезной, то нажимайте на опцию «Use Animation» в самом низу окна редактора. Чтобы сделать просто моргающую иконку, достаточно щелкнуть по «Append New Frame», создав пустой фрейм (без изображения) и выбрать из выпадающего меню желаемую периодичность (на скриншоте 1 сек.):

Чтобы анимация просматривалась в предпросмотре ниже, отметьте чекбокс «animate preview». Для данного примера фавиконка будет моргать с периодичностью в одну секунду. Исчезать она будет потому, что второй фрейм, как я уже отметил, будет пустым:

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

С этой целью надо просто скопировать исходное изображение, кликнув по кнопочке «Copy Previous Frame» и средствами генератора изменить некоторым образом цветовую гамму. Для образца в дополнение к исходнику я соорудил нечто вроде рамочки:

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

Кроме скорости чередования кадров можно настроить также количество повторений (итераций). К слову, «loop forever» означает «бесконечный цикл»:

Ежели в процессе творческой работы вам что-то не понравилось, то опции «Clear Frame» и «Delete Frame» позволят соответственно полностью очистить или удалить ненужный фрейм.

Список онлайн генераторов и галерей с коллекциями фавиконов

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

• Favicon.ru — почти полный аналог очень подробно описанного мною выше онлайн сервиса Favicon.cc, поэтому создавать здесь значок будет проще простого, тем более, что интерфейс полностью на русском. Единственный недостаток Фавикон.ру, если его можно считать таковым — отсутствие возможности генерировать анимированную иконку;
• Favicon.by — ресурс с аналогичным выше приведенным генераторам набором инструментов. Для получения значка сайта вы можете импортировать не только изображение с компьютера, но и уже готовую фавиконку абсолютно с любого сайта, просто введя URL-адрес веб-ресурса, а затем отредактировать ее по своему желанию;
• PR-CY.ru — простенький generator без опций редактирования, где в три шага делаете favicon.ico и скачиваете на компьютер;
• CY-PR.com — загруженную картинку просто преобразовывает в формат ico. Для скачивания подведите курсор к полученной фавиконке, вызовите контекстное меню правой кнопкой мыши и выберите из него пункт «Сохранить картинку как»;

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

• Favicon-Generator — генерирует значок на основе загруженного изображения формата png, jpg или gif. Здесь вы можете добавить созданную иконку в публичную галерею;
• DeGraeve — этот сервис позволяет сделать фавиконку как на основе готовой картинки, так и самостоятельно, используя свои художественные навыки;
• Iconj — генерация favicon.ico из загруженной картинки;
• FaviconGenerator — сервис с простой опцией преобразования изображения с расширением png, jpg, jpeg или gif в графический файл формата ico;
• DynamicDrive — поддерживаются графические форматы gif, jpg, png и bmp, максимальный размер файла 150 kB.

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

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

• Коллекция от Favicon.сс — одна из самых больших, включает более 450 000 различных фавиконок. На первой странице они ранжированы по рейтингу (в начале самые топовые), а на этой страничке по дате их размещения (вверху самые свежие). В числе прочих присутствуют и анимированные;
• От Favicon.by — очень приличная галерея иконок, выложенных для свободного скачивания;
• От Iconj — более 18 000 фавиконок на самую разнообразную тематику, отдельно представлены анимированные, что создает дополнительный комфорт при отборе;
• Audit4web — этот каталог содержит свыше 15 000 самых разных вариантов значков.

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

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

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

Прежде всего, необходимо подсоединиться к серверу хостинга по протоколу ФТП при помощи той же программы Файлзилла (тут вся информация об этом незаменимом менеджере для вебмастеров) и загрузить favicon.ico с компьютера в корневую папку сайта:

А вот далее необходимо указать путь до фавикона браузерам и поисковым роботам Яндекса в виде служебных ссылок HTML, образованных с помощью тега link:

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

Если будете копировать, не забудьте заменить «http://goldbusinessnet.com» на URL вашего сайта. Эти строчки необходимо разместить в любом месте между открывающим и закрывающим тегом head. А вот куда их прописать, зависит как раз от движка, который вы используете.

Если ваш веб-сайт работает на WordPress, то нужно открыть папку с текущей темой WP (в этом материале все о файловой структуре шаблонов и их роли), найти там файл header.php, который отвечает за вывод служебной информации, и вставить туда эти строчки (лучше для этой цели использовать еще один полезный софт Notepad plus plus):

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

<link rel="shortcut icon" href="http://ваш_сайт/wp-content/themes/ваша_тема/images/favicon.ico" type="image/x-icon" />
<link rel="icon" href="http://ваш_сайт/wp-content/themes/ваша_тема/images/favicon.ico" type="image/x-icon" />

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

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

<link rel="shortcut icon" href="//goldbusinessnet.com/favicon.gif" type="image/gif" />
<link rel="icon" href="//goldbusinessnet.com/favicon.gif" type="image/gif" />

Но надо иметь ввиду, что анимация работает не во всех браузерах (на данный момент только в Mozilla Firefox), хотя, возможно, в будущем положение изменится. В остальных обозревателях, как, впрочем, и в поиске Yandex, иконка будет статичной.

После того, как вы произвели подключение фавиконки, самое время проверить, появился ли значок на вкладке браузера. Лучше, если проверка будет проведена во всех продвинутых веб-обозревателях: Opera (тут о том, как скачать бесплатно новейшую версию, установить и настроить Оперу), IE (а здесь — все об Интернет Эксплорере), Мазиле и Хроме.

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