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

Обновлено в августе 2026.

Шаги: 1) PNG/SVG 32–48 px · 2) link rel="icon" в <head> · 3) проверка /favicon.ico в браузере.

Дальше по теме (2026): структура · контент · курс.

Favicon — мелочь, но помогает узнавать сайт в вкладках и выдаче. SVG/PNG 32–48 px, правильный link в <head>.

Что нужно в 2026

Favicon — иконка во вкладке и иногда в выдаче. Для SEO это не «фактор ранжирования», а узнаваемость и аккуратность сайта: 404 на /favicon.ico — лишний шум в логах.

Формат и размер

PNG или SVG 32–48 px (можно несколько размеров).
ICO в корне — для старых клиентов; не обязательно, если есть корректный link.
Без мелкого текста на иконке — на 16 px его не прочесть.

Как подключить

В <head>: <link rel="icon" href="/favicon.svg" type="image/svg+xml"> и/или PNG. Проверьте в браузере и в логах, что файл отдаётся с 200.

Сделайте сегодня

Откройте /favicon.ico и /favicon.svg на своём сайте. Если 404 — положите файл или исправьте link. Затем вернитесь к структуре страниц.

Структура · скорость · 404 и логи.

Примечание (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-ть, а пользы от этого будет очень даже немало. Как уже было сказано в самом начале,

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

См. также раздел: контент сайта.