Как сделать и установить фавикон на сайт

ЧЕК-ЛИСТ: ТЕХНИЧЕСКАЯ ЧАСТЬ — ИСПРАВЛЕНИЕ

Секрет успешного сайта — в мелочах, которые владельцы часто упускают. Для эффективного продвижения недостаточно одного SEO: сейчас все больше внимания уделяется тонкостям — элементам дизайна, которые ненавязчиво попадают во внимание читателя и быстро запоминаются. Один из таких элементов — favicon. В статье рассмотрим создание favicon различными способами.

Что такое фавикон для сайта

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

А также в истории просмотров:

Фавиконы сайтов в истории браузера

В некоторых версиях браузера фавикон также появляется в адресной строке перед URL сайта. В выдаче Яндекса также отображаются фавиконы:

Фавиконы сайтов в Яндексе

Кроме логотипа, в фавикон для сайта иногда вставляют значок, символизирующий тематику ресурса, связанный с названием сайта, первую букву названия компании и т.п. Размер фавикона обычно составляет 32х32 или 16х16 пикселей.

Иконка сайта играет важную роль в брендинге сайта. Лаконичная картинка помогает пользователю запомнить ресурс и обеспечивает его оригинальность.Сайт без фавикона выглядит, как минимум, серо по сравнению с другими: вместо запоминающейся иконки стоит стандартный значок Windows, который использовался еще до изобретения плоского экрана.

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

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

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

Узнаваемость. Favicon — это удобный поиск. Когда пользователь ищет нужную ему вкладку в браузере, страницу из закладок браузера или истории, первое, что бросается в глаза, — это иконка. Никто не обращает внимания на текст. Представим, что вы что-то ищите, когда в браузере открыто 20 вкладок: кроме иконки не будет видно практически ничего.

Фавиконы сайтов во вкладках браузера

Продвижение. Это преимущество применимо только к поисковику Яндекс. Страница без фавикона в поисковой выдаче просто сливается с белым фоном и никак не выделяется среди остальных. В топе выдачи редко можно встретить страницу без иконки.

Сайт без фавикона в выдаче Яндекса

Проверка фавикона в аудите Serpstat

Хотите узнать, как найти и обезвредить ошибки на сайте с помощью Serpstat?Заказывайте бесплатную персональную демонстрацию сервиса, и наши специалисты вам все расскажут! 😉

Технические требования к фавиконам

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

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

• для устаревших браузеров: favicon.ico такого размера:16х16, 32×32;
• для современных браузеров: один фавикон SVG формата для светлой и темной версии. Большинство браузеров поддерживают SVG формат, который более эффективен для больших изображений;
• для устройств Apple: фавикон размера 180×180 в формате PNG;
• для устройств Android: фавикон 192×192 в формате PNG, используемый на главной странице сайта и 512×512 — для загрузки прогрессивных WEB-приложений.

Узнать, какие именно браузеры поддерживают современные форматы фавиконов можно с помощью сервиса Caniuse:

Сервис Can I Use для проверки поддержки различных фавиконов браузерами

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

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

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

Простой и понятный генератор: фавикон создается в два шага.

Выбираем картинку на компьютере и превращаем ее в мини-логотип.

Есть возможность задать разрешение картинки (16х16 или 32х32 пикселя). Просто выберите картинку и нажмите «Конвертировать».

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

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

Генератор фавикона Pr-Cy.ru

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

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

Для этого картинку нужно загрузить в формате 16х16. С автоматическим выводом формата 32х32 могут возникнуть трудности.

Однако для надежности при любом разрешении картинки рекомендуется вручную прописать вывод фавикона в HTML-коде страницы. Для этого:

Добавьте файл favicon.ico в корневую папку — каталог сайта.

Пропишите в коде HTML favicon в формате ico. Он выводится строкой shortcut icon:

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

Здесь значение v = 2 обозначает версию иконки. Увеличивайте его на единицу каждый раз, когда меняете картинку (v = 3, v = 4 и т.д.). Тогда браузер будет сразу отображать последнюю версию. После того, как вы определились с окончательным вариантом иконки, этот параметр можно смело удалять из кода.

Проблемы в отображении фавикона могут быть связаны с такими причинами:1. Отсутствует изображение фавикона в правильном формате в корневой папке сайта. 2. Неправильно прописан код фавикона на страницах ресурса. 3. Фавикон размыт или неуникален. 4. Файл с иконкой закрыт для сканирования поисковиками. 5. Сайт находится ниже 15 позиции в Яндекске — в этом случае фавикон не отображается. 6. Фавикон был загружен недавно — иногда на его отображение в выдаче может потребоваться несколько недель.

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

Стандартный размер фавикона 16×16 и 32×32. Для современных браузеров и мобильных устройств используются более крупные изображения:180×180, 192×192, 512X512.

Favicon — это важный элемент любого сайта. Качественная, оригинальная картинка становится практически вторым лицом бренда. Фавиконы повышают узнаваемость сайта и ненавязчиво помогают пользователю запомнить ресурс, найти его среди множества других. Чтобы создать иконку для сайта и установить ее, вам потребуется не более 10 минут. В сети достаточно много бесплатных онлайн сервисов с разным функционалом и выбором картинок, некоторые предлагают создать логотип самостоятельно. Эта статья — часть модуля «Список задач» в Serpstat

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

Начать работу со «Списком задач»

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами 😉

3 простых способа добавить фавикон в WordPress

Доброго здравия!

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

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

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

И теперь это рекомендуемый способ сделать это. Но есть и несколько других способов, которые могут удовлетворить ваши потребности.

Понимание favicon в WordPress

Что такое фавикон

Favicon (термин «значок для избранного») — это маленькая иконка, используемая веб-браузерами для добавления дополнительного элемента брендинга, чтобы пользователи могли узнавать ваш сайт/компанию.

Если favicon установлен на вашем сайте правильно, браузеры будут использовать его в разных местах по мере необходимости.

Эти местоположения включают вкладки браузера (рядом с заголовком страницы), адресные строки (рядом с URL-адресом), закладки и другие.

В WordPress значки избранного называются «site Icons», что является полезным описанием, информирующим пользователей о том, что этот значок будет использоваться для представления вашего сайта в различных случаях.

Важность фавиконок

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

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

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

Формат файла(ов)

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

Формат ico

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

Проблема с форматом ico состоит в том, что не многие люди знают, что это такое или как его создать.

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

К счастью, с выпуском WordPress 4.3 нам не нужно беспокоиться о создании значка в формате ico, чтобы добавить его на ваш сайт. У настройщика есть опция «Иконка сайта», которая принимает более популярные форматы, такие как png, gif и jpeg. Подробнее об этом позже.

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

Формат png

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

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

Однако, поскольку все браузеры (даже старые) поддерживают ICO, может быть лучше использовать версии png и ico, чтобы избежать нежелательных ошибок 404.

Размер favicon

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

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

• 32x32px favicon.
• Значок приложения 180x180px для iOS и iPhone 6+.
• 192x192px значок приложения для Android/Chrome.
• 270x270px плитка среднего размера для Windows.

Наименование и размещение

Возможно, вы помните дни, когда фавикон должен был иметь точное имя файла «favicon.ico». Затем вы добавили бы его в свой корневой каталог, и это было в основном так. Времена изменились, и, к счастью, WordPress тоже.

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

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

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

Создание вашего favicon

Фавикон — это изображение, поэтому разработка собственного фавикона не будет отличаться от разработки собственного логотипа. Вы можете использовать фоторедактор, такой как Gimp или Photoshop. Просто помните, что ваш фавикон должен быть идеальным квадратом (т.е. 512х512 для иконки вашего сайта WordPress).

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

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

Как добавить favicon на ваш сайт WordPress в 3 способа

1. Добавление favicon с настройщиком WordPress

Для большинства это единственный метод, который вы должны рассмотреть для WordPress. Все, что вам нужно, это файл изображения (png, gif, jpeg), а WordPress сделает все остальное.

Начиная с Wordrpess 4.3, вы можете легко добавить значок сайта (или иконку сайта) на свой сайт WordPress в настройщике. От панели управления WordPress перейдите к «Внешний вид — Настройка».

Затем выберите «Site Identity» (Идентичность сайта), и вы найдете возможность установить значок сайта (значок сайта — это еще один термин для favicon). Затем вы можете выбрать свое изображение из медиатеки или загрузить новое. Убедитесь, что размер файла не менее 512х512, чтобы обеспечить наилучшее качество рендеринга изображения для всех случаев использования.

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

Это оно! WordPress сделает все остальное. Как только изображение будет обрезано, WordPress сгенерирует необходимые размеры изображения, необходимые для всех вариантов использования favicon:

• 32 пикселя для браузера favicon
• 180 пикселей для приложения IOS
• 192 пикселя для Chrome App Icon
• 270 пикселей для плитки Windows

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

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

2. Добавление favicon с помощью плагина

Если вы хотите, чтобы с помощью плагина вы добавили иконку на ваш сайт WordPress, вам повезло. Простой поиск в репозитории WordPress даст вам несколько отличных бесплатных плагинов на выбор. Лично я бы посмотрел не дальше, чем Favicon by RealFaviconGenerator. Этот плагин обеспечит совместимость вашего favicon со всеми браузерами, разместив несколько изображений во всех нужных местах. Он даже позволяет настроить дизайн каждого изображения, что не так просто сделать самостоятельно.

Чтобы добавить и использовать значок с помощью плагина, сначала установите плагин и перейдите во вкладку «Внешний вид — Фавикон». Затем загрузите свое изображение. Убедитесь, что оно идеально квадратное и не менее 260х260 пикселей.

Плагин перенаправит вас в онлайн-генератор, чтобы завершить настройку вашего избранного для IOS, Android (Chrome), Windows и macOS (Safari).

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

Когда вы закончите, нажмите кнопку «Generate Your Favicons and HTML Code» (Создать свой favicon и код HTML) в нижней части страницы.

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

Вот такие вот дела!

3. Добавление favicon вручную (от WordPress 4.2 и старше)

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

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

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

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

Некоторые старые браузеры не смогут найти автоматически.

Ссылка на ваш значок требует использования HTML-тега ссылки в заголовочном файле вашей темы (или дочерней темы) (header.php) внутри тега «HEAD». Вот два примера.

Чтобы создать ссылку на значок (в формате ICO) в корневом каталоге вашей темы (или дочерней темы), вы можете добавить следующий код внутри тега «head».

Подробное руководство по фавикону для сайта

Содержание

Favicon (или «значок для избранного») – иконка страницы или сайта. Обычно фавикон для сайта содержит логотип, первую букву названия компании или же любое другое изображение, которое соответствует тематике бизнеса.

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

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

Зачем используются фавиконы

Файл favicon.ico нужен для решения имиджевых задач. На форумах новички обычно спрашивают о том, дает ли favicon.ico какие-то профиты при продвижении. Ответ на вопрос – нет, на ранжирование, оптимизацию фавикон влияния не оказывает, но у него есть свои плюсы:

• Выделяет сайт в выдаче. Favicon всегда привлекает внимание, без него сниппет не так заметен на фоне других, кажется, что чего-то не хватает.
• Запоминаемость. Иконка – элемент бренда. Пользователь быстрее запомнит вавилоны и свяжет его с определенным брендом, если будет видеть значок на разных площадках.
• Упрощает поиск нужного сайта. В истории или закладках проще искать сайт не по заголовкам, а ориентируясь на картинку.
• Избавляет от ошибки в лог-файлах. Браузеры запрашивают файл favicon.ico, если они не находят строку с указанным фавиконом, сервер в логах ставит 404-ошибку.

О выборе картинки

Изображения подбирать можно разные. Все зависит от личных предпочтений и ваших задач:

1. Контрастные. Если раньше любая иконка бросалась в глаза, поскольку мало какие сайты ее ставили, сейчас все иначе. Выделиться на фоне конкурентов непросто, приходится экспериментировать. Самый простой вариант привлечь внимание – установить контрастную яркую иконку. Это может быть даже указывающая на сайт стрелка.
2. Тематические. Представительский ресурс (корпоративный сайт компании, онлайн-магазин) лучше всего дополнит логотип бренда. Если лого целиком не влезает, используйте фрагмент, этот совет пригодится для вытянутых, детализированных, сложных изображений. Когда логотипа нет, стоит подыскать картинку, которая будет по цвету ассоциироваться с тематикой сайта.
3. Упрощенные. Favicon на вкладках и в выдаче очень маленький. Рассмотреть детально изображение не выйдет, так что можно подобрать картинку с минимумом деталей, состоящую из 2-3 оттенков. Главное в данном случае – лаконичность, соответствие тематике, однозначность прочтения.
4. Оригинальные. Иконка не будет выделять ваш ресурс в выдаче, если у конкурентов такие же картинки. Так что банальные и популярные картинки лучше не брать.

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

Рекомендуемые решения

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

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

Потратьте время и сделайте иконку в специальном сервисе. Популярные:

• Realfavicongenerator.net – генерирует фавиконки разных размеров онлайн. Подгружайте исходник 260*260 пикселей, лучше всего квадратной формы, но это не строгое ограничение. После выбирайте настройки для всех популярных операционных систем – Сафари, Windows Phone, Андроид, iOS. Запрограммируйте степень сжатия – варианты возможны разные. В итоге получится набор из иконок разных типов, код для вставки в адресную строку.
• Favicon.ru – тут удобнее всего рисовать иконки вручную, есть большой выбор готовых решений (используйте, как есть, либо редактируйте). В один клик можно преобразовать файл в заданный формат. Платно доступны профессиональные дизайнерские услуги.
• Pr-cy.ru – в сервисе много разделов, выбирайте фавиконы и обрабатывайте картинки под иконки сайтов. Указывайте формат, размер, сохраняйте результат.
• Favicon.cc – программка для создания favicon в формате ICO. Загружайте готовое изображение или делайте отрисовку самостоятельно с применением стандартного набора инструментов в графическом редакторе.

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

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

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

Онлайн генераторы favicon

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

Photoshop

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

Бесплатные готовые favicon

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

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

Рекомендуем его как временный – другой вебмастер может скачать аналогичную картинку (или это уже сделано, и не один раз).

Лучше потратить немного времени и создать уникальную favicon.

Правила установки иконки на сайт

Установить фавикон на сайт самостоятельно не трудно, в этом вам поможет наше руководство. Пропишите корректное имя – обычно это favicon.ico, но другие типы расширений тоже допустимы.

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

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

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

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

Отображаться он будет лучше, чем в случае с ресайзом, когда фавикон загружен только один, его нужно менять под заданные параметры. Рекомендуем сервис realfavicongenerator.net.

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

Браузер должен корректно отобразить иконку. Затем прописывайте адрес в коде главной страницы тега. Это требование желательное, но не обязательное – браузеры последних версий автоматом ищут фавиконы в корневом каталоге.

Тег head позволяет задавать собственные иконки с разных страниц сайта.

Примеры с тегами:

• Декстопная версия (расширение ico) –
• Декстопная версия (png расширение) –
• Эпл –
• Сафари –
• Андроид –

• В гаджетах бренда Apple иконки автоматом скругляются по углам, избежать этого поможет код apple-touch-icon-precomposed – вводите его вместо apple-touch-icon.
• Рекомендуемые решения
• Инструкция для wordpress

От WordPress 4.3 версии фавиконы можно добавлять из админки системы управления. Порядок действий:

1. Откройте админку.
2. Выберите пункт «Внешний вид» > «Настройки» > «Свойства вашего сайта».
3. Кликните по значку сайта, после задайте «Изменение изображения».
4. Загрузите подготовленный фавикон.
5. Нажмите «Опубликовать».
6. Через html подгрузите фавикон.

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

Инструкция для теста на локальном сайте:

1. Откройте файлы темы, там найдите FTP-клиент либо менеджер файлов.
2. Найдите папку под названием /wp-content/themes/your-theme и кликните по ней.
3. Загрузите иконку в любую подпапку (Assets либо другую).
4. Запомните путь к указанному файлу.
5. В function.php пропишите путь к фавикону.

Путь будет выглядеть примерно так:

function add_favicon() {echo ‘';} add_action(‘wp_head', ‘add_favicon'),

после href=«‘.get_template_directory_uri() в строке должен быть прописан путь к выбранному значку.

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

1. function add_favicon() {
2. echo ‘';
3. }
4. add_action(‘wp_head', ‘add_favicon');

Инструкция для Bitrix

Для Битрикс доступно несколько схем размещения. Первая – для одного шаблона. Если на сайте используется один шаблон, где нет собственного favicon.ico файла:

1. Подготовьте картинку, расширение которой составляет 16*16 пикселей, форма подойдет jpg либо png.
2. Переименуйте иконку в ico.
3. В корневой папке файловой структуры сайта (1) найдите ico (2) и замените его на свой файл.

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

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

Приоритет иконки из шаблона намного выше, чем приоритет favicon.ico файла в корне сайта. Сделано это для того, чтобы каждый шаблон можно было использовать с собственной иконкой.

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

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

1. Подготовьте картинку, она должна иметь размеры 16*16 пикселей, допустимые форматы – jpg, png (на ваше усмотрение).
2. Переименуйте текущий файл в ico.
3. Подгрузите файл в папку шаблона (схема выглядит так: контент—структура площадки—папки и файлы—bitrix—templates—имя шаблона—файл (2)).

4. Используйте права для редактирования файлов php-формата. Откройте для редактирования шаблон (общие настройки—настройки продуктов—сайты—шаблоны для сайтов—имена шаблонов). Посмотрите есть ли в коде шаблона в блоке строка

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

Приветствую вас на сайте Impuls-Web!

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

Навигация по статье:

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

Изображение для фавикона должно быть с расширением .ico или .png, и иметь разрешение 16х16, 32×32, или 64х64 пикселей. В случае, если изображение не будет соответствовать этим требованиям, то фавикон не будет отображаться ни в поиске, ни во вкладке браузера.

Почему так важно установить фавикон на сайт? Дело в том, что он дает вашему сайту некоторые преимущества:

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

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

Как сделать фавикон?

Перед тем, как установить фавикон на сайт, его нужно сделать. Это можно сделать несколькими способами:

1. 1.Вы можете нарисовать с нуля или преобразовать уже имеющееся изображение в фавикон, используя для этого любой удобный графический редактор, который позволяет сохранять любые изображения в формате .ico или .png. Например, Adobe Photoshop или GIMP.
2. 2.Можно воспользоваться специальные онлайн-сервисы для быстрого создания фавикон. Например, вы можете воспользоваться онлайн-сервисом Favicon.ru.
   1. 1.)Переходим на сайт сервиса для создания фавикона.

   

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

      

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

Если у вас сайт сделан без использования CMS, то что бы установить фавикон вам нужно:

1. 1.При помощи текстового редактора, например Notepad++, вставить приведённый ниже фрагмент кода между тегами в каждой странице сайта, предварительно вписав название вашей иконки.

   Если вы используете фавикон в формате .png, то вместо favicon.ico указываете свой формат
   favicon.png

2. 2.Сохранить файл редактируемой страницы и загрузить его на ваш хостинг с заменой существующего файла. В идеале редактировать файл прямо на хостинге, подключившись к нему при помощи какого-нибудь редактора кода по FTP. Например, Notepad++. В этой статье более подробно написано о том, как это сделать.
3. 3.Загрузить в корневую папку вашего сайта, или в папку с изображениями файл иконки. Для этой цели можно использовать FTP-клиент, или воспользоваться файловым менеджером в панели управления хостингом.

В случае, если ваш сайт сделан на CMS, например, WordPress, то вам нужно вставлять этот фрагмент кода в файл шаблона шапки сайта header.php, так же между тегами head.

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

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

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