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

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

Это маленькая картинка, размером 16 х 16 px, в формате ico.

Универсальным форматом фавикона для сайта, является формат .ico, так как именно его поддерживают все самые популярные браузеры: Google Chrome, Internet Explorer, Firefox, Opera и Safari.

Следующие по универсальности форматы иконки для webсайта – PNG, JPEG, и GIF. Их поддерживают все браузеры, кроме Internet Ex. 

А вот анимированные иконки для сайта GIF-формата поддерживают только Firefox и Opera. 

Существует несколько способов, как сделать иконку для сайта. 

Самым простым вариантом является создание иконки для сайта с помощью специальных онлайн генераторов.

На выбор, за основу можно взять любую картинку или нарисовать её самому. Из этого изображение, система автоматически сформирует картинку в нужном размере и формате.

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

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

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

Когда картинка создана и сохранена (скачена) в нужном формате на компьютере, можно переходить к тому, как установить иконку на сайт.

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

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

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

 Откройте на хостинге панель управления сайтом и загрузите файл с фавиконом — favicon.ico в корневую папку (public_html).

Далее, нужно прописать между тегами <head></head>  код в файл шаблона index.php.

Код:

<link href=»favicon.ico» rel=»shortcut icon» type=»image/x-icon» />

 

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

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

В панели управления хостинга идём в папку: domen/public_html/templaters/шаблон сайта/ —  и загружаем  файл favicon.ico.

Далее откроем файл index.php: domen/public_html/templaters/шаблон сайта/index.php/ и после тега <head> вставляем код.

 

Если нужна  иконка сайта на WordPress, то после загрузки файла. ico в директорию

/domains/Сайт.ru/public_html/wp-content/themes/шаблон/

необходимо открыть файл header. php, в который после \<head>\также вставляется  код.

 

В Drupal 7 фавикон устанавливается через админ.

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

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

Как заменить фавикон сайта

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

Удалите старый файл favicon.ico и загрузите свой.

***

  • < Назад
  • Вперёд >

Как установить фавикон на WordPress сайт и правильно подключить

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

Что такое favicon и зачем нужно устанавливать на сайт

Это маленькая картинка, которая видна слева во вкладке браузера на открытой странице сайта. Также отображается в поисковой выдаче Яндекс. Размер изображения рекомендуется создавать небольшой — от 120 до 512 пикселей. Если меньше, то может нечетко выглядеть, будет менее заметным среди сохраненных избранных закладок.

Какой лучше формат иконки сделать

Это могут быть типы файлов: SVG, PNG, ICO, GIF, JPEG, BMP. Чаще всего используют первые три. А вообще алгоритм такой — четче иконка и меньший размер файла.

Как создать фавиконку бесплатно

Можете скачать уже готовую (с бесплатных ресурсов типа freepik.com, iconsdb.com и других, которые отлично ищутся в интернете) или создать свою с помощью сервиса favicon.io. Последний позволит сгенерировать Favicon из загруженного фото, текста или смайлика Emoji, скачать в форматах ICO/PNG и в разных размерах.

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

Разберем 2 варианта.

С помощью Настройщика темы

Обычно в любом WP-шаблоне пользователь сможет задать фавиконку для своего сайта — в админ-разделе Внешний вид > Настроить > Свойства сайта.

В других темах расположение опции добавления фавикона может отличаться. Например, для Astra нужно в Кастомайзере перейти в секцию Шапка > Айдентика сайта.

Прописать код вручную

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

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

Добавить информацию о фавиконе и его формате можно несколькими способами. Например, в плагинах Clearfy Pro, Code Snippets или через файл functions. php.

Какой вариант вы бы не выбрали, в HTML-раздел <head> ВордПресс-сайта нужно добавить код

<link rel="icon" href="URL-ссылка на картинку фавиконки" type="image/jpeg">

Значение атрибута type зависит от типа картинки:

  • .ico — «image/x-icon»,
  • .jpeg — «image/jpeg»,
  • .png — «image/png»,
  • .bmp — «image/bmp»,
  • .gif — «image/gif».

Фавиконку на хостинг можете загрузить с помощью встроенных средств CMS — через админ-меню Медиафайлы > Добавить новый.

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

html — Как добавить значок на мой сайт?

спросил

Изменено 7 лет, 1 месяц назад

Просмотрено 13 тысяч раз

Я хочу добавить фавиконку на свой веб-сайт ASP, например,

Согласно этим темам: Значок изображения рядом с URL-адресом сайта Как поставить изображение на панель вкладок рядом с заголовком страницы в браузере? я добавила свои ссылка вот так:

 
       <ссылка rel="icon" href="/favicon-32x32. png"/>

Но ничего не показывает? Что случилось?

Я только что снова попробовал свой код в notepad++, и он отлично работает, почему тогда он не работает на моем веб-сайте ASP.NET?!

  • HTML
  • asp.net

2

В некоторых старых браузерах (например, Internet Explorer 5) этого достаточно. Однако для последних версий Firefox, Internet Explorer и Chrome вам необходимо добавить две ссылки на ваш значок в заголовок вашего HTML. Если вы используете главную страницу, те же самые две ссылки будут идти в заголовке главной страницы.:

 
                Мой сайт

Причина, по которой у вас есть две ссылки на один и тот же значок, заключается в том, чтобы убедиться, что ваш значок работает с большинством браузеров. Некоторые, такие как Firefox, будут работать с любой ссылкой. Internet Explorer версий 6 и 7 особенно требователен. Однако, если вы используете обе ссылки, одна из них будет работать практически в любом браузере.

вы можете использовать различные типы favicon ниже:

 
 

<ссылка rel="icon" type="image/png" href="http://example.com/favicon.png" />
<ссылка rel="icon" type="image/gif" href="http://example.com/favicon.gif" />

в зависимости от того, какой файл вы хотите использовать в качестве значка вашего сайта.

Другие форматы фавиконки можно найти на этом сайте

Единственное, что я мог придумать, это попытаться добавить type="image/png" к элементу ссылки. Убедитесь, что изображение находится в том же каталоге, что и файл, на который вы ссылаетесь.

Создайте свой собственный значок 16×16

 
 
 png"/>

В идеале вам нужна любимая иконка с именем favicon.ico (расширение ico) и поместите ее в корневую папку.

Если не в корневой папке, вам необходимо явно создать тег ссылки . Например,

К вашему сведению, вы не можете просто переименовать расширение файла png в ico. Вместо этого вы хотите преобразовать его в правильный формат.

Обычно я использую этот сайт для преобразования png в ico — http://convertico.com/

Совет: добавление фавикона на ваш сайт

Натан Ролер

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

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

Вот пример меню закладок:

Но это еще не все. Некоторые веб-сервисы и поисковые системы (например, DuckDuckGo) даже используют фавикон:

Есть ли на вашем сайте фавикон?

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

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

Фавиконы добавляют изюминку, которую ценят посетители (и клиенты).

Технические детали

Размер

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

Что показывать

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

  • Используйте свой логотип (или его часть)
  • Если ваш логотип плохо отображается при таком маленьком размере, используйте стилизованную версию первой буквы (или букв) вашего сайта или названия компании
  • Используйте значок, который сообщает, что ваш сайт делает или представляет (например, Google Analytics использует крошечную диаграмму для своего значка)

Формат изображения

Как следует из названия, фавиконы должны использовать формат файла значка ( . ico ). Раньше конвертировать в этот формат было проблематично. Однако благодаря простым бесплатным услугам это уже не так. Все, что вам нужно сделать, это создать изображение размером 16×16. Формат .ico поддерживает прозрачность, поэтому вы не ограничены созданием квадратного значка. Если вы хотите воспользоваться преимуществами прозрачности, используйте формат .gif или .png при создании изображения.

Получив изображение размером 16×16, воспользуйтесь бесплатным сервисом, таким как favicon.cc, для преобразования изображения. Используйте параметр «Импорт изображения», чтобы загрузить исходное изображение:

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

Сохраните файл на своем сайте (подробнее об этом ниже).

Где это происходит

Первоначально фавиконы должны были называться точно favicon.ico и размещаться в корне вашего домена (например, http://www. yourdomain.com/favicon.ico ). Это означало, что у вас мог быть только один фавикон на домен, и точка. Однако по мере того, как фавиконы стали стандартизированными, было добавлено больше гибкости. Теперь есть два подхода:

Один фавикон для всего домена

Если вам нужен только один фавикон для всего домена, просто сохраните файл favicon.ico в корневой папке вашего сайта. При загрузке он должен быть доступен с http://www.yourdomain.com/favicon.ico . Как только вы загрузите файл, ваш браузер должен начать отображать значок для всех страниц вашего сайта. Если нет, очистите кеш браузера и перезагрузите страницу.

Фавиконы для конкретных страниц

Если вам нужен больший контроль (и немного большее соответствие стандартам), вы можете указать значки на странице за страницей. Чтобы использовать этот подход, сохраните файл .ico в любом месте вашего сайта, например, в папке images/. Затем добавьте на свою страницу следующий код:

Обновите выделенный путь, чтобы он ссылался на ваш новый файл значка. Обратите внимание, что мы используем относительный путь к сайту (начинающийся с косой черты), так что это будет действующая ссылка независимо от пути к текущей странице.

При использовании этого подхода вам все равно потребуется загрузить запасной значок на адрес http://www.yourdomain.com/favicon.ico для ситуаций, когда кто-то просматривает или добавляет в закладки не-HTML-контент (например, PDF-файл). ).

Давайте рассмотрим: как это сделать, простой способ

  1. Создайте изображение 16×16. Если вам нужна прозрачность, используйте формат PNG или GIF.
  2. Преобразуйте свое изображение в формат .ico с помощью бесплатного сервиса, такого как favicon.cc.
  3. Загрузить новый значок в http://www.yourdomain.