Favicon (сокр. от англ. FAVorites ICON - "значок для избранного", от названия папки с закладками в MSIE) - значок веб-сайта или веб-страницы. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, в вкладках и в других элементах интерфейса.

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

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

Большинство версий основных браузеров поддерживают фавиконки. Например Internet Explorer 5/6/7+, Firefox 1/2 +, Mozilla 1/2+, Netscape 7+, Opera 7+, Avant 1.1, Konqueror 3 +, Safari и другие.

Favicon – лицо вашего ресурса в браузере

Очень часто, открывая сайт в браузере, пользователи видят небольшой значок рядом с URL ресурса - favicon (фавикон, фавинконка), который, по сути, является лицом интернет-проекта. Favicon – это сокращение от английского словосочетания "favorites ICON", обозначающего "значок для избранного". Если вы "укомплектовали" свой ресурс фавиконкой, то он сможет выгодно выделиться на фоне остальных сайтов, открытых пользователем во вкладках браузера. Очень часто фавикон является уменьшенной копией логотипа интернет-проекта или компании (например, как у Википедии, Google или Facebook), но можно увидеть и специально созданные значки, просто отображающие суть или тематику проекта. Первый значок favicon появился в 1999 году, когда поисковая корпорация Microsoft представила свой веб-обозреватель Internet Explorer 5: именно в этой версии браузера началась поддержка миниатюрных значков для сайтов. А в 2003 году формат favicon был официально зарегистрирован в Internet Assigned Numbers Authority (IANA). Сейчас Microsoft утратила монополию в этой нише, и все современные браузеры (как десктопные, так и мобильные) поддерживают фавиконки. Для чего предназначен инструмент "Генератор Favicon"? С помощью инструмента "Генератор Favicon" вы сможете создать уникальную фавиконку для своего сайта. Для этого необходимо лишь загрузить в специальном поле исходное изображение, размер которого не должен превышать 150 Кб, выбрать необходимый размер будущей иконки (16х16 или 32х32 пикселей) и нажать кнопку "Конвертировать". Полученный значок в формате ICO можно использовать для размещения в Сети: он будет совместим с большинством современных браузеров. Примите к сведению, что многие современные веб-обозреватели осуществляют автоматическую загрузку favicon.ico из корня ресурса, не требуя указания в кодах страниц. Однако, если веб-мастер хочет использовать отдельный фавикон для каждой страницы сайта, то он должен указать его положение внутри секции в HTML-коде ресурса. Также учтите, что значок не отобразится в браузере, если его Content-type в ответе веб-сервера не совпадет с указанным полем заголовка в коде страницы. Как должен выглядеть хороший фавикон? Несмотря на то, что размер фавикона очень мал (16х16 или 32х32 пикселей), этот значок несет в себе очень большую смысловую нагрузку, и его создание является достаточно сложным процессом, который занимает у веб-дизайнеров столько же времени, сколько и разработка полноценного логотипа. Очень часто бывает так, что логотип компании абсолютно не подходит на роль фавикона. В таком случае, вам придется пустить в ход все свое мастерство и фантазию. Будущий favicon должен врезаться в память пользователя так сильно, чтобы в будущем этот значок ассоциировался у него исключительно с вашим ресурсом. При создании фавикона у вас не будет возможности "разбрасываться" пикселями: каждый из 256 (или 1024) пикселей имеет значение. Подкорректируйте заранее вручную пиксели, которые имеют "туманный" цвет, потому как при сжатии рисунка значок может получиться размытым и потребует корректировки в графическом редакторе. Учтите, что фоторедактор Adobe Photoshop не сохраняет изображения в формате ICO, поэтому конвертировать изображение в этот формат вы сможете с помощью нашего сервиса "Генератор 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/ .

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

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

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

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

Сервисы

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

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

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

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

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

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

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

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

Способ 1: Favicon.by

Русскоязычный онлайн-генератор фавиконок: простой и наглядный. Позволяет нарисовать значок самостоятельно, пользуясь встроенным холстом 16×16 и минимальным перечнем инструментов, таких как карандаш, ластик, пипетка и заливка. Имеется палитра со всеми RGB-цветами и поддержкой прозрачности.

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

На выходе вы получаете графический ICO-файл с названием favicon и разрешением 16×16 пикселей. Этот значок уже готов для использования в качестве иконки вашего сайта.

Способ 2: X-Icon Editor

Браузерное HTML5-приложение, позволяющее создавать детализированные значки размером вплоть до 64×64 пикселей. В отличие от предыдущего сервиса, X-Icon Editor имеет больше инструментов для рисования и каждый из них может быть гибко настроен.

Как и в Favicon.by, здесь вы можете загрузить готовую картинку на сайт и конвертировать ее в фавиконку, при необходимости должным образом отредактировав.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кроме этого мы рассмотрим процесс создания и добавления Favicon для сайта.

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

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

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

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

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

#3. Старайтесь при создании значка использовать более яркие и светлые цвета, как правило, они привлекают больше внимания.

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

Теперь рассмотрим непосредственно сам процесс создания Favicon. Для этого существует множество сервисов. Однако они больше подходят для тех у кого уже есть готовая иконка которую они где нибудь содрали или взяли из какой-то коллекции. Но как я уже говорил выше, иконка должна быть уникальной, поэтому здесь я рассмотрю процесс ее создания при помощи программы Photoshop, на примере сайта сайт.

Создание заготовки Favicon в Photoshop

#1. Создайте новый документ в Photoshop размером 64*64px , для этого пройдите в меню "Файл" >> "Новый..." или нажмите сочетание клавиш Ctrl+N. Вообще сам значок должен быть 16*16px , но лучше вначале создавать его таки размером, а потом уменьшить до необходимого.

#2. В моем случае у меня нет какого либо логотипа для сайта поэтому я решил использовать символ "W" с которого начинается адрес сайта, а также те цвета которые преобладают в верхней части сайта это синий и желтый. Поэтому я установил значение цвета #6A91D0 и при помощи инструмента "Заливка" (G) задал синий цвет ранее созданному документу.

#3. После этого я выбрал инструмент "Текст" (Т) добавил символ "W" и задал ему следующее значение цвета #FAC31D.

Для того чтобы символ более выделялся на синем фоне я добавил ему обводку черным цветом и размером 2px. Для этого необходимо пройти в пункт меню "Слой" >> "Стиль слоя" >> "Обводка" , выбрать цвет и размер обводки.

После этого необходимо объединить слои, для этого необходимо пройти в пункт меню "Слой" >> "Объединить видимые" или нажать сочетание клавиш Shift + Ctrl + E.

Для того чтобы линии были плавные без засечек я добавил размытие. Для этого необходимо пройти в пункт меню "Фильтр" >> "Размытие" >> "Размытие по Гауссу..." и установить радиус 0,3 пикселя.

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

#4. Теперь необходимо изменить размер значка. Для этого нужно пройти в меню "Изображение" >> "Размер изображения" и установить размер 16*16px.

#5. Осталось сохранить значок. Иконка Favicon должна иметь имя favicon и расширение.ico. Все дело в том что по умолчанию Photoshop не сохраняет изображения в формате.ico. Поэтому сохраните его в формате.png, для этого пройдите в пункт меню "Файл" >> "Сохранить как..." и из раскрывающегося списка выберите пункт PNG.

Конвертирование изображение в формат.ICO

После этого мы конвертируем его в формат.ico при помощи сервиса . Зайдите на данный сервис и при помощи кнопки "Обзор" выберите ранее сохраненный файл в формате PNG после чего нажмите на кнопку "Создать favicon.ico".

После этого на загрузившейся странице появится ссылка "Скачать favicon.ico!" кликнув по которой можно сохранить готовую иконку Favicon на компьютер.

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

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

Если вы используете WordPress то пройдите в папку wp-content/themes/папка-с-вашей-темой/ найдите в ней и откройте файл header.php, а заетм вставьте необходимы строки и сохраните файл.

Если вы используете Joomla то пройдите в папку templates/папка-с-вашей-темой/ и откройте файл index.php вставьте необходимые строки и сохраните.

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

Если вы используете, какую либо другую CMS то все делайте по аналогии.

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

Материал подготовлен проектом: