Public html favicon ico

Как установить favicon для сайта; что такое favicon.ico — полное руководство

Что такое favicon (фавикон) для сайта; как установить favicon, как настроить, как создать фавикон и пр. обо всех этих и иных вопросах, касаемых иконки сайта сегодня узнаем во всех подробностях. Иконка для сайта, это обычная небольшая картинка с определенным расширением — принято использовать по типу favicon.ico . Устанавливается в настройках темы Внешний вид/Настроить/Свойства сайта (либо кастомным вариантом) в wp_head . (вебмастере Яндекса есть четкие требования относительно организации фавиконки. Пройдите, прочтите…) Установить индивидуальные иконки возможно и для консоли (страницы настроек) и для фронтэнда (лицевой части сайта). Итак:

Что такое фавикон ( favicon.ico ) для сайта?

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

В Вордпресс имеется функция wp_site_icon() введена в WP 4.3.0 — хуки функции site_icon_meta_tags .

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

функция используется в фильтре: (ф. проверяет установлена ли иконка для сайта)

add_action( 'wp_head', 'wp_site_icon', 99 );

отображается в выдаче примерно так:

Чтобы установить для сайта favicon , в Вордпресс существует соответственный инструмент.

К настройкам проходим по такому пути:

Внешний вид/Настроить/Свойства сайта

Если загружаем фавикон через Настройки консоли (как описано выше) то в исходном коде будет такая картинка — выведет метатеги favicon для разных устройств:

Подробнее по функции wp_site_icon() ниже…

как установить favicon для сайта

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

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

как установить favicon для админ панели:

Чтобы установить для админки свою иконку, возможно поступить так: открываем файловый менеджер хостинга там, где расположен физически сайт (файлы сайта). Закачиваем в ядро сайта нужную вам иконку (в ту папку, в которой хранятся файлы .htaccess и robots.txt ).

примерно получается такой путь: имя-домена/public_html/favicon.ico

Далее, чтобы эта иконка не выводилась в окне браузера лицевой части сайта и в поисковом сниппете, нужно, скажем так, для «лицевого» фронтенда установить другую иконку, например, как предлагает Яндекс вебмастер, с расширением .cvg .

как установить favicon для сайта — фронтэнд:

Переходим в консоль настроек: либо по пути данному выше Внешний вид/Настроить/Свойства сайта , либо в настройки шаблона (изучите документацию темы).

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

кастомный вариант установки favicon:

В этом варианте прописываете метатег непосредственно а файле темы, который отвечает за формирование шапки сайта — обычно header.php :

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

add_action('wp_head', 'my_meta_robots'); function my_meta_robots() < echo "".''."\n"; >

Картинки, думаю, логичнее всего, чтобы не путаться, помещать в корневой каталог сайта имя_домена.ru/public_html/favimiha.svg и указывать до фоток путь.

фавикон с расширением .svg

Как и говорилось выше, с некоторых пор в вебмастере Яндекса предлагается установить для сайта фавикон с расширением .svg

по типу: имя.svg — конвертировать изображение можно на каком-то онлайн конвертере.

функция wp_site_icon()

Если загружаем фавикон через Внешний вид … свойства, то в этом случае строки в исходном коде будут выглядеть таким образом — три строки для разных устройств:

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

…если пытаться загрузить картинку favicon.svg через загрузчик медиафайлов Вордпресс, то этого у нас не получится — по соображениям безопасности WordPress!

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

как в WordPress загрузить SVG картинку

Чтобы загрузить .svg картинку через загрузчик вордпресс, можно, к примеру, использовать плагин Safe SVG.

либо — вариант 2 — включить SVG в список разрешенных для загрузки файлов, используя фильтры:

Рекомендую ознакомиться со статьёй по этой теме на сайте wp-kama.ru — автор: campusboy.

как отключить вывод иконки сайта, если она установлена

Чтобы деактивировать отработку функции Вордпресс wp_site_icon() никаких сложных манипуляций не требуется, всего-то воспользуемся фильтром: remove_action фильтр add_action показанный в старте статьи.

Итак, если кому-то требуется отключить функцию wp_site_icon() для того, чтобы сделать вывод иконки совершенно кастомно, — отключаем: записываем данную ниже сроку в файл темы functions.php :

remove_action('wp_head', 'wp_site_icon', 99 );

Либо просто напросто удаляем загруженные картинки (если использовали) в Внешний вид/Настроить/Свойства сайта

В этом случае в исходном коде никаких строк кода (три, как говорилось выше) для вывода фавиконки для разных расширений не появится!

На этом сегодня закругляюсь…

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

Как использовать условные теги: пример на странице пагинации — закрываем в noindex,follow

Михаил ATs — владелец блога запросто с Вордпресс — в сети нтернет давным-давно.

. веб разработчик студии ATs media: помогу в создании, раскрутке, развитии и целенаправленном сопровождении твоего ресурса в сети. — заказы, вопросы. разработка.

Источник

HTML Favicon

A favicon is a small image displayed next to the page title in the browser tab.

How To Add a Favicon in HTML

You can use any image you like as your favicon. You can also create your own favicon on sites like https://www.favicon.cc.

Tip: A favicon is a small image, so it should be a simple image with high contrast.

A favicon image is displayed to the left of the page title in the browser tab, like this:

To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder. A common name for a favicon image is «favicon.ico».

Next, add a element to your «index.html» file, after the element, like this:

Example

This is a Heading

This is a paragraph.

Now, save the «index.html» file and reload it in your browser. Your browser tab should now display your favicon image to the left of the page title.

Favicon File Format Support

The following table shows the file format support for a favicon image:

Browser	ICO	PNG	GIF	JPEG	SVG
Edge	Yes	Yes	Yes	Yes	Yes
Chrome	Yes	Yes	Yes	Yes	Yes
Firefox	Yes	Yes	Yes	Yes	Yes
Opera	Yes	Yes	Yes	Yes	Yes
Safari	Yes	Yes	Yes	Yes	Yes

Chapter Summary

HTML Link Tag

For a complete list of all available HTML tags, visit our HTML Tag Reference.

Источник

Урок 50 Как сделать иконку (фавикон, favicon) для блога

В сегодняшнем уроке я буду Вам рассказывать об иконках Favicon (фавикон). Я Вам покажу как сделать favicon.ico для сайта (или для блога, тут без разницы) и покажу как можно вставить фавикон. Наверняка, многие еще не знают о том, про какое “чудо” я говорю. Проще говоря, Favicon (фавикон) это картинка (иконка), которая стоит в браузере перед адресом сайта. Наглядно покажу Favicon моего блога: Эта иконка является своеобразным логотипом Вашего блога. Поэтому к созданию фавикона нужно отнестись со всей ответственностью. Помните, он может выделить Ваш блог среди других. План урока:

1. Создание Favicon с нуля.
2. Создание фавиконки из готового изображения.
3. Сервисы с готовыми иконками для сайта.
4. Прикрепление полученной иконки к сайту.

Как создать Favicon (фавикон) с нуля

Есть один очень удобный сервис. Он имеет адрес favicon.cc. Этот сервис по построению фавиконок выглядит так:

Чтобы нарисовать favicon достаточно выбрать цвет и просто рисовать. Если Вы нарисовали что-то, где-то не так, для удаления фрагмента рисунка выберите инструмент transparent (поставьте галочку) и “тыкайте” на пикселы (“квадратики”), которые нужно убрать:

Я нарисовал следующий фавиконку:

Больше всего в favicon.cc мне понравилось то, что можно мгновенно видеть результат своего труда в оригинальном размере. Для этого нужно немного спуститься вниз в раздел Previw:

Или же можно прямо в браузере (Opera, Firefox, Internet Explorer и т.п.) посмотреть итог работы:

Теперь нам нужно просто сохранить иконку сайта на свой компьютер. Для этого нужно нажать на кнопку “Download Favicon”:

Создание favicon (фавикон) из готового изображения

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

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

Список сервисов с готовыми favicon (фавикон)

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

1. iconj – Огромная база фавиконок;
2. favicon.cc – Да, в этом сервисе тоже есть уже готовые фавиконки.
3. Favicon.co.uk – Можете глянуть и сюда, вдруг найдете что-то подходящее.
4. audit4web – Большое количество иконок для сайта.

Как сделать Favicon (фавикон) для сайта

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

1. Полученный favicon.ico скопировать в корень блога (т.е. в папку, где находятся папки wp-content, wp-admin и т.п.). В моем случае эта папка называется public_html:
   
2. Далее открываете файл header.php (напомню, он находится в папке темы Вашего блога). И прописываете в этом файле следующий код (главное условие: код должен быть после тега и до ):

Естественно в 2 местах слова адрес_сайта меняете на адрес СВОЕГО блога.

У меня получилось следующее:

Теперь сохраняете файл header.php, обновляете на сервере и наблюдаете за результатом:

Как видите, все “встало” правильно. Надеюсь у Вас тоже проблем не возникло. Будут вопросы, пожалуйста, задавайте их в комментариях. А то мне на почту ссыпатся письма с вопросами технического характера, я не могу успевать отвечать на все.

P.s. Постоянные читатели, наверное, заметили, что я уроки WordPress стал давать немного реже. Возникла небольшая проблема со временем. До какого периода это продлиться? Честно, не знаю. Но минимум раз в неделю буду стараться писать уроки (по возможности – чаще). Поэтому лучше Вам, уважаемый читатель, для удобства подписаться на RSS блога Новичка.

P.s.s. Открыл новый раздел Ученики. Новички, которые создают блог с нуля, это отличная возможность “засветиться”!

Следующий урок: Урок 51 Регистрация в поисковиках.

Источник