Создание иконки сайта (favicon)
Обновлено в августе 2026.
Дальше по теме (2026): структура · контент · курс.
Favicon — мелочь, но помогает узнавать сайт в вкладках и выдаче. SVG/PNG 32–48 px, правильный link в <head>.
Примечание (2026): ниже — база. Сервисы сверяйте.
Примечание (2026): часть фактов и сервисов ниже относится к более раннему периоду. Базовые идеи сохраняют смысл; конкретные URL, цены и названия инструментов сверяйте с актуальными источниками.
Favicon (от англ. Favorites Icon) - это тот самый значок сайта, который отображается браузером в адресной строке, в титуле сайта, в папке Избранное, а также в поисковых системах.Favicon, надо заметить, весьма полезная вещь, особенно, если сайт продвигается под Яндекс - в результатах поиска иконка находится слева от позиции сайта и весьма эффективно может мотивировать переход юзверя.
Более того, сайт добавленный в Избранное браузера, становится более заметен среди множества ярлыков уже там имеющихся. Ну и, конечно же, Favicon вполне неплохо поддерживает брэндовую составляющую ресурса и прочно ассоциируется с вашим бизнесом.
По-видимому, можно найти и еще какие-нибудь плюсы от использования фавиконов, но, думается, перечисленных пунктов вполне достаточно, что бы задуматься над реализацией этой полезной вещицы.
Сначала, парочка слов касательно того, где брать фавиконки.
В принципе, проблем тут возникнуть не должно, т.к. существует немалое количество всеразличных сервисов, которые позволяют лепить иконки практически из любых изображений. Допустим, сходу можно привести известный ресурс favicongenerator - система очень проста, функционирует уже более ста лет и нареканий быть не должно. Как вариант, можно прогуглить "генератор иконок" - вылезет туча сервисов.
Еще один способ - скрутить иконку самостоятельно.
Для этого можно использовать Фотошоп или что-то вроде него - рисуем, сохраняем в формате ico и радуемся своим креативным способностям. Как альтернативу оффлайновому методу можно смело протестировать онлайновые сервисы - к примеру, очень классные иконки можно делать на Favicon.cs
Третий вариант - отыскать среди миллиардов иконок одну единственную, которая придется по вкусу (кстати, в большинстве случаев так именно и поступают). Забираемся в такие базы, как favicon.cc, iconj.com, favicon.co.uk и ковыряемся.
Короче говоря, проблем с поиском подходящей иконки возникнуть не должно, т.к. на сегодняшний день их как грязи. Единственное что следует помнить, так это то, что анимированные фавиконы лучше не использовать - они реально раздражают юзверя, когда у него открыто с десяток вкладок, да и к тому же, в результатах поиска анимация не работает, т.к. фавиконы из индекса Яндекса уже переформатированы в png.
Ну и в заключении о том, как прикрутить favicon к сайту.
Первым делом следует обозвать иконку именем favicon.ico и после этого забросить ее в корень сайта. Затем в коде, между тегами и прописываем следующую информацию:
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="http://ваш сайт/favicon.ico" type="image/x-icon">
Это самый стандартный способ, используемый уже не одним поколением веб-мастеров.
Теперь о небольших нюансах - дело в том, что некоторые CMS имеют специальные места для размещения фавиконок. Допустим, если вы используете Joomla, то иконку следует загружать в папку с шаблоном:
/templates/папка с шаблоном/favicon.ico
Вариант с Вордпрессом - иконка базируется там, где лежит тема оформления:
/wp-content/themes/папка с темой оформления/favicon.ico
Вот в принципе и все.
Реализовать фавикон с нуля можно за минут 10-15-ть, а пользы от этого будет очень даже немало. Как уже было сказано в самом начале, главный положительный момент - это позиционирование сайта в выдаче. Красивая фавикона действительно привлекает народ, который скролит серп и весьма мотивирует совершить переход.
См. также раздел: контент сайта.