Фавикон для сайта: что это такое, как его сделать и оптимизировать самостоятельно

Что такое фавикон и зачем он нужен

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

Иконки сайтов во вкладках браузера
Иконка сайта в поисковой выдаче Яндекса

В Google, когда мы ищем что-то с компьютера (рабочего стола), избранные значки не появляются в результатах поиска. Но в мобильном поиске они видны:

Иконки в Google SERP с мобильного

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

Автоматические решения

WordPress — самая популярная система управления контентом в мире, и было бы странно, если бы не существовало плагина, упрощающего эту процедуру. Он действительно существует, и не один.

Из списка самых популярных могу выделить Favicon от RealFaviconGenerator, All In One Favicon и многие другие.

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

Есть действительно полезные решения, такие как Yoast или All-In-One-Seo, и я думаю, что любой может потратить минуту на внесение таких простых изменений, независимо от уровня навыков.

Требования к фавикону

Конкретные технические требования описаны в справке Яндекса и Google.

В Яндексе

• квадратная форма;
• размер файла 120х120, 32х32 или 16х16 пикселей;
• формат SVG, ICO, GIF, JPEG, PNG, BMP;
• без анимации.

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

В Google

• квадратная форма;
• размер, кратный 48 пикселям: 48х48, 96х96, 144х144;
• не используйте размер 16×16;
• поддерживаются все допустимые форматы, но SVG предпочтительнее.

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

Не используйте текст или мелкие элементы дизайна — их не будет видно.

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

Сервисы для генерации фавикона

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

Realfavicongenerator

https://realfavicongenerator.net/

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

В результате любимая иконка будет представлена ​​в виде HTML-кода. Обратите внимание, что код представляет разные форматы.

Favic‑o‑matic

https://favicomatic.com/

Он позволяет генерировать как простые классические избранные размером 16х16 и 32х32 в формате ICO, так и одним кликом сразу все возможные варианты — всего 20 вариантов.

Favicon.ico & App Icon Generator

https://www.favicon‑generator.org/

Создает иконки в формате ICO, умеет конвертировать изображения из PNG, JPG и GIF в ICO. Вы можете генерировать изображение 16×16 или все форматы одновременно для веб-приложений, приложений Android, Microsoft и iOS (iPhone и iPad).

Faviconit

http://faviconit.com/en

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

Как добавить фавикон на сайт

Шаг 1

Создайте образ, в соответствии с требованиями, которые мы указали выше.

Шаг 2

Поместите изображение в корневую папку сайта. Убедитесь, что он доступен по прямой ссылке и возвращает ответ сервера 200 OK.

Шаг 3

Создайте HTML-код для вставки любимого значка, он может выглядеть так:

Href — это путь к файлу. Оно может быть относительным или абсолютным.

В отношении укажите одно из правильных значений:

• иконка — для большинства браузеров;
• ярлык — для браузера Internet Explorer;.
• значок Apple Touch — для устройств iOS*.

*apple‑touch‑icon означает значки для устройств iOS. И Яндекс, и Google говорят, что могут вытащить изображение из значка Apple Touch. Это значение имеет свою спецификацию, которая указана в официальной справке Apple. Файл должен быть в формате PNG.

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

В общем, нет необходимости создавать разные значки Apple Touch для разных разрешений экрана. Разрешается создавать фавикон только размером 180×180, который также будет подстраиваться под размеры для других устройств.

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

• image/svg+xml — для формата SVG;
• image/x-icon или image/vnd.microsoft.icon — для формата ICO;
• image/gif — для формата GIF;
• image/jpeg — для формата JPEG;
• image/png — для формата PNG;
• image/bmp — для формата BMP.

Шаг 4

Добавьте код между тегами

главная страница веб-сайта, чтобы указать браузеру и PS, где взять изображение.

Подождите, пока роботы проиндексируют изображение, и проверьте, появляется ли значок в результатах поиска.

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

Как запросить новое сканирование в Google
Как запросить новый скан в Яндексе

Как проверить фавикон

После добавления:

1. Проверьте, появляется ли изображение во вкладке браузера при просмотре страниц сайта.
2. Убедитесь, что файл доступен для поисковых роботов — инструкция в Яндекс.Помощи.
3. Проверьте, как поисковые системы «видят» вашу иконку. Для этого введите в строке браузера:

https://favicon.yandex.net/favicon/site.ru — для Яндекса;

https://www.google.com/s2/favicons?domain=site.ru — для Google.

Например, для Топвизора мы бы ввели:

https://favicon.yandex.net/favicon/topvisor.com

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

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

Если значок не появился, проверьте, выполнили ли вы все требования Яндекса и Google и правильно ли установили файл.

Читайте также: Как точно выбрать правильную нишу для информационного сайта

Советы по внешнему виду фавикона

А теперь я хочу поделиться с вами своим мнением о том, как должен выглядеть фавикон, а чего на нем быть не должно:

● Не пытайтесь втиснуть в него название вашего бренда или логотип, если он, например, состоит из длинного слова. Это все равно не сработает. Изображение должно быть квадратным или круглым, т.е иметь примерно одинаковую ширину и высоту.

● Лучший цвет — красный. Если он присутствует в вашей цветовой гамме — хорошо, если нет — думаю, специально добавлять его не стоит. Хотя помню, как-то читал, что вебмастер значительно повысил кликабельность ссылок в результатах после того, как добавил очень простенькую любимую иконку — красный квадрат. Потом пошел дальше: сделал красную стрелку, указывающую на заголовок.

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

● Экспериментируйте с любимыми значками: удаляйте старые, добавляйте новые. Помните, что если вы только что внесли изменения, они будут учтены и отображены для пользователей поисковых систем только тогда, когда они будут вносить изменения в свои базы данных. Это может занять от нескольких минут (если у вас большая распродажа новостей) до недель или даже месяцев (если у вас заброшенный сайт).

Значки сайта для мобильных устройств

Устройства Apple и многие устройства Android поддерживают специальные большие значки, которые можно использовать в качестве значков веб-приложений.

Пример ярлыка на смартфоне при добавлении сайта на главный экран. Веб-сайт может предоставить такую ​​иконку, указав в заголовке Рекомендуемый размер иконки для iPhone и 120×120 пикселей. Для iPad — 152×152 пикселя. Для планшетов Android с браузером Chrome предпочтительным значком является формат PNG и размер 192×192.

Как сделать иконку для сайта HTML?

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

Рисуем Favicon в Sketch или Photoshop

Иконка может быть нарисована там же, где нарисованы другие части интерфейса. Например Фотошоп или Скетч. Позвольте мне показать вам, как это работает, на примере Sketch:

1. откройте редактор и нарисуйте иконку.
2. Затем выберите нарисованный элемент и измените разрешение в боковом меню.
3. Затем одновременно нажмите Shift + Cmd + E.
4. Затем нажмите «Экспортировать выбранное…

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

Большинство редакторов по умолчанию не экспортируют в .ico. Вам нужно скачать сторонний плагин для Photoshop или шаблон для Sketch.

Преобразуем готовое изображение в фавиконку

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

1. открывает будущую иконку.
2. Изменяем размер.
3. Введите нужный размер и формат. Мы экономим.
4. откройте меню «Файл» и нажмите на пункт «Экспорт…».
5. Установите расширение файла на .png.

Прозрачный!

Рисуем значок в браузере

Если у вас нет Photoshop или вам просто не нужен какой-то сложный дизайн, вы можете создать свой логотип на сайте Favicon.cc. В этом случае все предельно просто:

1. Рисуем любое изображение во встроенном редакторе.
2. А затем нажмите кнопку «Загрузить» ниже.

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

В Favicon.cc вы можете сохранять изображения только с расширением .ico. Имейте это в виду.

Конвертируем текст или эмоджи в значок

Есть еще более простой вариант — сервис Favicon.io. В нем есть три конвертера: из изображения, из текста или из эмодзи в иконку.

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

Но я попробую скачать иконку эмодзи:

1. Я нажимаю на правильный конвертер.
2. Я нажимаю на название понравившегося смайлика.
3. И затем я нажимаю кнопку «Загрузить.

Вот и все.

Единая инструкция для всех веб-сайтов

Неважно, какой движок использует ваш сайт — Joomla, Bitrix, Opencart или что-то самописное на html или php, вы можете сделать все самостоятельно и без каких-либо сторонних плагинов или скриптов.

Есть два варианта. Они зависят от формата, в котором вы сохранили изображение. Например, если это .ICO, методология следующая:

● Поместите значок избранного в корень сайта. Корень — это место, где находятся все файлы. Например, для WordPress это папка, содержащая папки wp-admin, wp-content, wp-themes и множество файлов, таких как wp.config.php. В этом случае веб-сайт поймет, что это любимый значок, и передаст его браузеру для использования перед заголовками в поисковой выдаче.

Если вы сохранили изображение в формате .PNG, то схема немного сложнее:

● Поместите значок избранного в корень сайта.

● Теперь на странице должно быть ясно, что это конкретное изображение является любимым значком. Итак, перейдите к файлам вашей темы и найдите тег head.

В зависимости от используемого вами движка это может быть index.php, index.html, нижний колонтитул, php и другие. Между тегами head необходимо вставить следующую строку:

А если, например, вы сохранили этот файл не в корень сайта, а в папку img, то адрес будет другим:

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

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

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

Не рисуйте слишком много деталей. Иконка очень маленькая (32х32 пикселя), поэтому мелкие нюансы будут совершенно незаметны для читателей.

Вот хорошие примеры фаворитов. Все контрастные, используйте логотип или условное обозначение, обозначающее тематику ресурса.

Самостоятельно создать мини-логотип

откройте любую программу редактирования графики, например Photoshop, и создайте. Если на иконке есть текст, размер шрифта должен быть 8-10 пикселей. В Photoshop есть специальный плагин для создания иконок — «Favicon.ico».

Здоровый! Если вы не можете сохранить файл в формате .ico. Затем вы можете сохранить его в PNG или JPEG, а затем найти любое преобразование изображения в Интернете. В поиске пишем «конвертировать из PNG в ICO».

Создать значок с помощью онлайн-сервиса

Заходим в поисковик и пишем запрос «создать фавикон онлайн», выбираем один из множества сервисов. Ниже приведены некоторые из самых популярных.

Рисуем фавинкон: Favicon.by

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

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

Добиваемся отличного результата и нажимаем «Скачать». Файл будет сохранен в нужном формате с правильным именем.

Сервисы для создания фавиконки без программиста

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

Давайте узнаем, как мы работаем в самом крутом на мой взгляд генераторе: realfavicongenerator.net. Заходим на сайт, в правом верхнем углу нажимаем на кнопку «Выбрать понравившееся изображение» и выбираем изображение в формате svg, png или jpg.

Затем откроется страница настроек — настройте цвета по своему вкусу (все изменения будут отображаться сразу) и нажмите кнопку «Создать избранные значки и HTML-код

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

Затем realfavicongenerator сгенерирует все необходимые иконки и код для их установки на сайт.

Скачайте архив иконок на свой ПК, нажав кнопку «Favicon Pack», затем распакуйте архив и закачайте из него все файлы либо в корень (если ничего не менялось), либо в указанную выше папку.

И скопируйте сгенерированный код сайта в раздел head.

Примечание! Если вы не выбрали корень сайта, лучше добавить адрес сайта в сгенерированные пути, например: было href=»icons/apple-touch-icon.png» стало href=»https:/ / веб-доход .ru/icons/apple-touch-icon.png»

Альтернативы: favicomatic.com, favicon-generator.org, faviconit.com/ru.

Где достать картинку для создания иконок и какая нужна

Для создания (генерации) иконок нам потребуется готовое изображение в формате SVG или хотя бы PNG-изображение (с прозрачным фоном) размером не менее 260 x 260 пикселей (лучше всего 512 x 512 пикселей или больше). В принципе, вы также можете генерировать изображения из JPG.

Картинки можно найти:

• в Гугле;
  
• специализированные сайты, такие как freepik.com, icon-icons.com, icons8.ru;
• заказ у дизайнера;
• нарисуй себя.

Как создать Favicon онлайн и где можно скачать их коллекцию

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

1. Favicon.cc — довольно удобный онлайн-генератор фавиконок. С его помощью, например, можно создать свою иконку с нуля (полностью эксклюзив), рисуя ее попиксельно. Для этого нужно нажать на кнопку «Создать новый фаворит» в левой части окна сервиса».

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

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

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

   

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

   Чтобы загрузить в онлайн-генератор и преобразовать изображение, нажмите кнопку «Загрузить». Созданный из него favicon.ico можно будет редактировать так же, как и тот, который вы нарисовали. Когда вы закончите создавать шедевр, нажмите кнопку «Скачать», чтобы загрузить его на свой компьютер.

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

Logaster.ru — онлайн-генератор логотипов, но помимо логотипов он создает еще и фавикон. В отличие от всех других сервисов, вам не нужно рисовать дизайн фавикона или конвертировать его из логотипа.

Для создания любимого значка необходимо сначала ввести название сайта или компании и выбрать вид деятельности. Сервис предложит несколько десятков готовых шаблонов фавиконок. Вы можете прочитать больше о том, как создать любимую иконку здесь. После создания Favicon.ico вы можете скачать файл на свой компьютер в формате ICO или PNG.

После этого просто нажмите на кнопку «Создать». На открывшейся странице вы увидите ссылку на скачивание полученного фаворитного значка.

Подборка онлайн генераторов, коллекции и галереи фавиконов

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

1. FaviconGenerator — позволяет конвертировать любое изображение, загруженное с вашего компьютера, в нужный формат фавикона (вы можете загружать изображения в формате PNG, JPEG, JPG, GIF).
2. AntiFavicon — довольно интересный генератор фавиконок. На нем можно сделать любимый значок с надписью. Необходимо ввести текст надписи в поля «Текст сверху» и «Текст снизу», а цветовую схему настроить в области «Цвета».
3. FavIcon от Pics — еще один простой онлайн-сервис — вы указываете путь к изображению на своем компьютере, конвертируете и скачиваете полученный файл в формате ICO и GIF.
4. DeGraeve — довольно мощный генератор Favicon, по функциональности аналогичный ранее упомянутому Favicon.cc. Здесь тоже можно все сделать либо с нуля, либо загрузить изображение, которое потом можно подправить и скачать уже в формате ICO подходящего размера.
5. Генератор — позволяет как сгенерировать понравившуюся иконку из загруженного изображения, так и создать ее с нуля в специальном редакторе.
6. Онлайн-редактор иконок Favicon.ico — ну с ним все — и создание фавиконов с нуля, и доработка уже имеющегося изображения.
7. Online Favicon — многофункциональный инструмент для создания и редактирования мини-логотипов
8. Бесплатный генератор фавиконок — если вам не подходит ни один из приведенных выше списков.
9. Генератор фавиконок — просто и со вкусом…

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

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

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

1. Favicon.cc — 55 тысяч разных вариантов на все случаи жизни. Есть также анимированные значки избранного, которые будут видны только в браузере Firefox

Если вы знаете другие подобные ресурсы, я добавлю ваши ссылки в этот список.

Сервисы для создания пиктограмм + готовые фавиконы для сайта

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

, и на открывшейся странице нажмите кнопку «Скачать фавикон», чтобы скачать его:

Альтернативы: onlinefavicon.com, xiconeditor.com.

Проверка favicon у сайта

Проверка любимой иконки сайта осуществляется по ссылке в разделе 4 (проверить любимую иконку). Это действие также можно выполнить через главное меню Favicon -> Проверка фавиконки.

Чтобы начать проверку избранного значка веб-сайта, выберите протокол веб-сайта (http:// или https://) в представленной форме, введите доменное имя и нажмите кнопку «Проверить избранный значок».

Проверка фавиконки сайта

После этого убеждаемся, что фавикон сайта протестирован на сервисе realfavicongenerator.net и корректно отображается на всех платформах.

Favicon для Wix

Это такая растущая система управления контентом, как Wix. С ней не так просто. По умолчанию вам никто не дает доступ в корень сайта. Есть два варианта.

● Купите плагин премиум-класса. Их несколько, называются они по-разному.

● Подключите собственный домен к своему веб-сайту.

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

Рекомендации по формату и размеру фавиконки для поисковых систем

Яндекс рекомендует использовать иконки в размерах: 120×120, 32×32 или 16×16 пикселей, в формате: SVG (рекомендуется), ICO, GIF, JPEG, PNG, BMP. Анимация не поддерживается.

Совет от/для Яндекса. Используйте размер 120×120 пикселей или формат SVG — они позволяют более четко и заметно отображать логотип сайта на сервисах Яндекса. Раздел «Яндекс.Помощь» о любимых иконках.

Google рекомендует использовать значки с размером, кратным 48 пикселям, например 48 x 48, 96 x 96, 144 x 144 и т д. Изображения SVG не имеют фиксированного размера. Поддерживаются иконки всех допустимых форматов.

Раздел документации Google по значкам избранного.

Установка фавикона

Я покажу два способа установки, первый подходит для всего сайта, например для сайта HTML или WordPress, второй способ только для проектов WordPress.

Первый способ

Для начала нужно поместить созданный favicon.ico в корень сайта. Подключаемся к хостингу через FTP-соединение с помощью клиента FileZilla, перемещаем файл в корневую папку.

После этого открываем главную страницу сайта с помощью любого редактора кода, в WordPress это можно сделать, открыв меню Внешний вид -> Редактор тем, файл header.php и поместив в секцию следующий код

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

Второй способ

Как я уже говорил ранее, этот способ подходит только для установки на CMS WordPress.

откройте меню «Внешний вид», выберите шаблон, нажмите «Настроить», затем нажмите «Свойства сайта». Загружаем иконку и сразу видим результат.

Делаем фавикон

Чтобы что-то куда-то установить, нужно сначала это создать. Есть два разных способа:

● Вручную. В этом случае откройте Photoshop, Paint или другую программу редактирования графики и создайте изображение размером 16 x 16 пикселей. Да, это очень мало, поэтому нужно работать в увеличенном режиме и наблюдать за маршрутами. Эта процедура не требует особых навыков, ведь можно просто уменьшить имеющийся логотип, главное, чтобы он имел точную квадратную форму.

Если вы работаете с логотипом, постарайтесь, чтобы он занимал всю площадь, ведь если вы создадите рамку, то она съест 64 пикселя из 256!

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

Убедитесь, что изображение в формате .PNG, оно занимает больше места, чем .JPG, но позволяет сохранить качество. Другой вариант — сохранить изображение в формате .ICO, это специальный формат для файлов такого типа

Favicon для сайтов на Ucoz

Что с Укосом? Это правильный вопрос, потому что не у всех есть собственные сайты на WordPress. Многим нравится юкоз или викс, например.

В этом случае нужно выяснить, действительно ли вам отказывают в доступе к корню сайта. Например, смена фавикона по умолчанию на Юкозе делается через файловый менеджер. Он есть у каждого пользователя.

● Перейдите в панель управления веб-сайтом и выберите вкладку «Управление файлами».

● Вы увидите список корневых файлов. Поместите туда изображение .ico (просто загрузите через браузер).

Вот и все!