Создаём фавикон для сайта

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

Для добавления фавикона на веб-страницу в начало HTML-документа потребуется вписать всего одну строку с тегом <link>, в котором нужно указать атрибут rel, указывающий браузеру что мы добавляем иконку, атрибут href, содержащий адрес нашего изображения, и атрибут type, показывающий какой формат изображения мы используем:

<html>
  <head>

    <link rel="icon" href="путь_к_иконке/favicon.ico" type="image/x-icon">

  </head>
  <body>
  </body>
</html>

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

В таблице показаны различные варианты добавления фавикона и приведена поддержка браузеров:

Google Chrome Internet Explorer Firefox Opera Safari
<link rel=»shortcut icon» href=»httр://mysite.ru/myicon.ico»> Да Да Да Да Да
<link rel=»icon» href=»httр://mysite.ru/image.ico»> Да Да (с IE 11) Да Да Да
<link rel=»icon» type=»image/vnd.microsoft.icon» href=»httр://mysite.ru/image.ico»> Да Да (с IE 9) Да Да Да
<link rel=»icon» type=»image/png» href=»httр://mysite.ru/image.png»> Да Да (с IE 11) Да Да Да
<link rel=»icon» type=»image/gif» href=»httр://mysite.ru/image.gif»> Да Да (с IE 11) Да Да Да
<link rel=»icon» type=»image/x-icon» href=»httр://mysite.ru/image.ico»> Да Да (с IE 9) Да Да Да

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

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

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

В вашем распоряжении поле 16х16, так что можно нарисовать какую-то простенькую картинку, например, букву, или фигурку. Для рисования есть инструменты:

  • Карандаш;
  • Пипетка для копирования цвета;
  • Ластик;
  • Заливка.

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

Там же на сайте, можно заказать фавиконку, или взять готовую в коллекции.

Стоит отметить, что фавикон, т. е. графический файл, может быть с расширением GIF, PNG, BMP или GPEG, но лучше, если он будет иметь расширение ICO. Для удобства, переименуйте файл в favicon. Теперь этот файл нужно закинуть в корневую папку сайта.

Далее найдите файл header.php в теме вашего сайта, а затем между тегами <head> и </head> вставьте код ниже:

PHP

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

1 &lt;link rel=»shortcut icon»href=»/favicon.ico»type=»image/x-icon»&gt;

или этот

PHP

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

1 &lt;link rel=»icon»href=»/favicon.ico»type=»image/x-icon»&gt;

Тема сайта находится по следующему пути: domen.ru/wp-content/themes.

Если вы загрузили фавикон в другую папку, тогда нужно указать полный путь к этой папке. Укажите его в коде href=»/. Если фавикон не ICO, тогда надо указать это и в коде type и x-icon, например:

PHP

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

1 &lt;link rel=»shortcut icon»href=»/favicon.png»type=»image/x-png»&gt;

Советую вставлять в файл первый код.

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

Как сделать фавикон для сайта с помощью плагина Favicon Rotator

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

Особенности:

  • Фавикон будет отображаться на компьютерах и всех мобильных устройствах;
  • Настройка в пару кликов мышки;
  • Можно добавить несколько значков, и тогда они будут отображаться каждый раз в случайном порядке;
  • Автоматическая конвертация больших графических файлов в фавикон.

Установка и настройка:

1. Предварительно создайте, или скачайте фавикон на свой компьютер, чтобы его можно было загрузить на сайт.
2. Установите и активируйте плагин;
2. В панели администратора, перейдите «Внешний вид» -> «Favicon»

3. Нажмите кнопку «Add Icon», чтобы загрузить картинку с компьютера.

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

4. Жмите «Save changes», чтобы сохранить изменения, и на этом все.

Если фавикон на сайте не отображается, значит в теме сайта не прописан тег wp_head()

Как сделать фавикон онлайн с плагином HFG

А с помощью этого плагина, еще легче сделать фавикон онлайн. Итак, перейдем сразу к делу. Установите и активируйте этот плагин прямо с панели администратора. Потом переходите в левой колонке «Настройки» -> «Heroic Favicon Generator Settings», а затем жмите «Select Favicon».

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

Плагин Genie WP Favicon

Установите этот плагин и активируйте его. Далее перейдите «Внешний вид» -> «Genie WP Favicon». Жмите «Выбрать файл» и загрузите иконку со своего компьютера. Далее клика «Update favicon» и на этом все.

При загрузке изображения на сайт с помощью этого плагина, оно сохраняется в исходном размере, т. е. оно не конвертируется под размер фавикона, поэтому вам надо заранее подготовить картинку нужного размера. Размеры изображения могут быть 16х16 или 32х32, максимум 128х128. Поддерживаются файлы .ico, .png, .gif , размером до 100 kb.

Как подключить фавикон для сайта?

Хорошо, значок готов, как теперь сделать, чтобы браузеры начали показывать favicon для сайта?

После использования сервиса, скачайте готовую иконку для своего блога на компьютер. И загрузите картинку, с помощью ftp-клиента в корневую папку блога (public_html/site/ваш_файл_в_формате_ico) или в любую другую. Но лучше всего в корневую папку, просто так проще, при составлении пути к файлу.

Итак, файл загружен, что дальше? Теперь, можно проверить, если вы сомневаетесь, что файл загружен в корневую папку: ваш_site/favicon.ico. Если файл загружен в корневую папку, то он отобразиться по этому адресу. Дальше нужно прописать для каждой страницы ресурса между тегами <head> и </head> следующий код:

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

А если значок в другой папке, то должно быть так:

<link rel="icon" href="http://ваш-ресурс/путь_к_файлу/favicon.ico" type="image/x-icon">

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

<link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory'); ?>/favicon.ico" />

Только, в этом варианте значок должен находиться в папке с шаблоном. Например (public_html/site/wp-content/themes/ваша-тема/favicon.ico).

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

На этом все. Если, что не понятно — спрашивайте — разберемся. До новых встреч!

Что такое Фавикон и зачем он нужен для сайта

По сути Favicon — это обычный значок (изображение небольшого размера 16 на 16 пикселей, иконка). Но для владельца сайта он может очень много значить. Однако, обо всем по порядку.

Само по себе название «фавикон» произошло от английского словосочетания FAVorites ICON, означающего — иконка для «Избранного» (так называются закладки в браузере Internet Explorer). Зачем она нужна? Очевидно, что так гораздо проще отыскивать взглядом нужную вам закладку, ибо легче искать знакомый значок, чем читать названия сайтов.

Раньше картинку Favicon вы могли видеть в адресной строке браузеров, перед URL-адресом открытой страницы (в моем IE9 так до сих пор и осталось), но после того, как все браузеры стали поддерживать вкладки, то данный значок мигрировал как раз на эти самые вкладки. Зато, когда их открыто очень много, именно фавиконы позволяют понять какая вкладка какому сайту соответствует:

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

А также, что немаловажно, поисковая система Яндекс отображает Favicon в своей выдаче (результатах поиска) для каждого ресурса, если у него этот значок будет иметься (был добавлен и правильно настроен владельцем сайта, а робот Яндекса успел уже его проиндексировать)

У Яндекса имеется специальный бот для индексации фавиконов под названием YandexFavicons (у них даже апдейты бывают, после которых и имеет смысл проверять наличие нового и обновленного Favicon.ico рядом с вашим сайтом в выдаче), в задачу которого входит сбор и обновление иконок для всех сайтов. Робот Яндекса, специализирующийся на их индексации, посещает сайты с периодичностью от нескольких дней до одного месяца (апы, соответственно, очень редкие получаются).

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

http://favicon.yandex.net/favicon/ktonanovenkogo.ru

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

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

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

В общем, выгода создания яркого и запоминающегося значка (мини-логотипа) для своего сайта очевидна (прежде всего это узнаваемость «бренда» и все хорошее, что из этого следует). Осталось только понять, как его создать и поставить на свой сайт, а также, что из себя должен представлять этот графический файл? На второй вопрос ответить проще — по определению Favicon должен быть сохранен в формате ICO, размещен в корне сайта (хотя, можно и другом месте), а его размер при этом должен составлять 16 на 16 .

В принципе, чтобы создать favicon, вовсе не обязательно использовать какие-либо специальные онлайн генераторы, хотя это довольно удобно и просто. Можно попытаться сделать его в Photoshop, но он по умолчанию, к сожалению, не умеет сохранять изображения в формате ICO. Поэтому для того, чтобы научить Фотошоп работать с ICO, нужно будет установить специальный плагин.

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

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

Зачем же нужен favicon для сайта

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

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

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

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

  • Вы набираете адрес своего блога в поисковом окне и смотрите, находится ли favicon около адреса сайта.
  • Можно пройти по ссылочке http://favicon.yandex.net/favicon/great-world.ru и за место «great-world.ru» написать URL своего ресурса. Если фавикон проиндексирован, то он появится рядом с URL.
  • Зайдите на Вебмастер Яндекса и посмотрите, есть ли там ваш фавикон.

Как установить «favicon» на сайт

Подготовив фавиконку, остаётся дело за его размещением. Процедура по сути проста и может иметь несколько вариантов исполнения:

  1. При помощи панели администрирования. Очень удобная функция, которая присутствует на большинстве известных систем. В подавляющем большинстве даже не требуется производить конвертацию в формат «.ico» – систем делает за вас все сама. Один из ярких примеров: «WordPress». Заходим в панель, выбираем «Внешний вид», далее «Настроить».

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

  2. Если вышеперечисленный функционал не предусмотрен. Довольно часто такую ситуацию можно наблюдать на страницах типа «лендинг». Через ftp-доступ или, находясь на самом хостинге внутри области тега «head» прописываем следующий строку:

    В разделе «href» прописывается путь, который ведет к загруженной нами фавиконке, которую мы не забываем загрузить на сервер. Стандартное место, где ее размещают – папка «images». Название файла стандартное – «favicon.ico».

Как установить Favicon на сайт и прописать путь до него

Ваш браузер и поисковый робот Яндекса будут искать фавикон прежде всего в корневой папке вашего сайта. Поэтому можно просто подключиться к сайту по FTP и загрузить в его корневую директорию (обычно это папки или ) ваш файлик Favicon.ico (лучше его название писать с маленькой буквы). Откройте теперь ваш ресурс в каком-нибудь браузере и посмотрите, не поменялась ли пиктограмма на вкладке. Поменялась? Нет? Ну, ничего страшного.

Если поставить фавикон таким образом у вас не получилось, то возможно вам придется очистить кэш вашего браузера, т.к. часто бывает, что из кэша загружается старая версия. Можете попробовать открыть ваш сайт в FireFox, у меня он лучше всего реагирует на проводимые изменения без очистки кэша. Если дело не в кэше браузера, то это значит, что для вашего сайта задано другое место для favicon, отличное от корневой папки. Как это проверить?

Откройте исходный код любой страницы вашего сайта. Чтобы посмотреть ее исходный код, достаточно будет щелкнуть по странице правой кнопкой мыши и выбрать соответствующий пункт контекстного меню (например, «Исходный код» в старой Opera, либо «Исходный код страницы» в Мазила Фаерфокс, либо «Просмотр кода страницы» в Google Chrome, либо «Просмотр HTML-кода» в IE) или нажать сочетание клавиш Ctrl+U. Теперь поищите в верхней части кода страницы строку, задающую путь до favicon.ico.

Она может выглядеть примерно так:

<link rel="shortcut icon" type="image/ico" href="http:путь_до_вашей_иконки/favicon.ico" />

Также возможен и такой вариант :

<link rel="icon" href="http:путь_до_вашей_иконки/favicon.ico" type="image/x-icon">

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

В Joomla Favicon обычно живет в папке с используемым вами шаблоном (путь до нее в Joomla 1.5 прописывался в файле index.php из каталога этого же шаблона,а вот в Joomla 3 все стало несколько сложнее). Т.е. для смены фавикона в Джумле достаточно будет пройти по этому пути и залить туда свой файлик favicon.ico, а на вопрос о замене ответить утвердительно:

/templates/папка_с_используемым_шаблоном_оформления/favicon.ico

Файлик favicon в WordPress по умолчанию тоже может лежать в папке с используемой вами темой (там же и задается путь до него):

/wp-content/themes/Папка_с_используемой_вами_темой_оформления/favicon.ico

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

<link rel="shortcut icon" href="http:путь_до_вашей_иконки/favicon.ico" type="image/x-icon" />
<link rel="icon" href="http:путь_до_вашей_иконки/favicon.ico" type="image/x-icon" />

В каком именно файле шаблона нужно прописать эти строки, зависит от движка вашего сайта. Например, в в WordPress вам нужно открыть на редактирование файл header.php из папки с используемой вами темой оформления: . Открываете в редакторе и в самом его начале находите открывающий Html тег HEAD. В любом месте за ним, но до закрывающего HEAD прописываете одну из приведенных выше строчек кода с указанием пути до вашего графического файла мини-логотипа.

Как установить анимированный фавикон? В принципе, точно так же, как и обычный. Будет отличаться только код, вставляемый в шаблон вашего сайта, с помощью которого вы указываете браузерам и поисковому роботу Яндекса путь до нужного графического файла. Дело в том, что анимированный Favicon будет иметь расширение GIF, и, следовательно, в строках кода нужно будет прописать примерно так:

   <link rel="shortcut icon" href="/img/favicon.gif" type="image/gif" >
    <link rel="icon" href="/img/favicon.gif" type="image/gif" >

Вот и вся разница между анимированными favicon и обычными. Но следует учесть, что будет работать анимированная иконка только в FireFox, в остальных же браузерах она будет статичной. Яндекс же, при загрузке вашего анимированного фавикона, преобразует его в статичный формат PNG. Но, по-моему, овчинка выделки не стоит — устанавливать вместо обычного мини-логотипа для сайта анимированный не имеет особого смысла. Но это только мое ИМХО.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Использую для заработка

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

Немного истории. Само слово «favicon» исходит из сочетания двух английских слов: «favorite» и «icon». В дословном переводе – «избранная картинка». Сейчас более известен, как «значок интернет-сайта». Изначально подразумевал свое отображение только на различных страницах-вкладках или в закладках интернет-браузера, имел стандартный размер 16х16 пикселей и расширение «.ico». Впервые «фавикон» заявил о себе в марте 1999 года, когда набирающая стремительно обороты компания «Microsoft» выпустила на мировой рынок новый и современный по тем меркам браузер «Internet Explorer 5.0». Именно с этих пор данное мини-изображение стало применяться априори и приобрело значение того элемента, без которого можно считать SEO-оптимизацию не завершенной.

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

Для большей наглядности и понятия представим скриншот.

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

Favicon для Android

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

  • 36×36 – для экранов с коэффициентом плотности 0.75
  • 48×48 – для экранов с коэффициентом плотности 1
  • 72×72 – для экранов с коэффициентом плотности 1.5
  • 96×96 – для экранов с коэффициентом плотности 2
  • 144×144 – для экранов с коэффициентом плотности 3
  • 192×192 – для экранов с коэффициентом плотности 4

Андроид воспринимает иконки в формате .png, а так же опирается на файл manifest.json который может содержать в себе ряд различных косметических параметров. В случае отсутствия возможных вариантов иконки под андроид, система опирается на иконки apple-touch-icon.

Что такое favicon и для чего он нужен?

Установить favicon на WP с помощью плагина

Единственный вменяемый плагин это “Favicon by RealFaviconGenerator”, особенность заключается в том, что он проставляет фото для всех устройств:

  • Mac
  • Iphone
  • Android
  • IOS
  • Surface

Устанавливаем стандартно и переходим к работе, в панели заходим Внешний вид > Favicon. В открывшемся окошке находим “Выберите из библиотеки мультимедиа”.

Выбор изображения для плагина

Откроется форма с выбором картинки, можете загрузить собственное или воспользоваться ранее сохраненными в WordPress. Не забудьте заранее оптимизировать фото под WP.

Библиотека медиафайлов

Далее нажимаем кнопку Генерировать.

Генерация

Перекинет на официальный ресурс realfavicongenerator, если изображение выбрано правильно то нажимаем синюю кнопку “Continue with this picture”.

Подтверждение и продолжение процесса

Смотрим, как будет отображение на разных устройствах и браузерах, если все нормально, то перелистываем страницу вниз и нажимаем Generate your favicon and HTML code.

отображение на разных устройствах

Ждем пока сервис обработает запрос и автоматически перебросит обратно в админку WordPress. Для надежности обновляем Ctrl+F5 и любуемся на установленный значок, который корректно отображается на всех устройствах.

Проверка работы плагина

Создание иконки в Photoshop

Основная проблема в том, что Photoshop не поддерживает файлы формата «.ico». Поэтому необходимо загрузить и установить его плагин из Telegraphics.

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

После этого выберите папку IMAGE, перейдите к IMAGE SIZE и измените его на 16 × 16 пикселей. Не забудьте удостовериться, что вы не размываете его, нажав кнопку RESAMPLE IMAGE и BICUBIC SHARPER. Если вы удовлетворены результатами, откройте папку FILE и нажмите SAVE AS.

Индексация фавикон сайта поисковыми системами

Процесс индексации иконки у разных поисковых систем занимает разное время. Например, у Яндекса данный процесс может осуществляться несколько месяцев.

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

  • Яндекс — https://favicon.yandex.net/favicon/имя_домена
  • Google — https://www.google.com/s2/favicons?domain=имя_домена

Вместо имя_домена необходимо указать имя домена (например, itchief.ru).

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

Как поменять иконку кодом

Ввиду разнообразия тем, бывает что способы описанные выше не срабатывают. Тогда прибегнем к методу, прописываем favicon напрямую в тему.

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

favicon.png в корне сайта

Даю код, который нужно добавить в раздел head в активной теме.

Идем в админпанели Внешний вид > Редактор и выбираем файл header.php то есть заголовок, и перед закрывающим тегом /head вставляем данный код.

Правильно устанавливаем фавикон в раздел head

  1. Редактор тем
  2. Заголовок header.php
  3. Закрывающий тег
  4. Код для вставки
  5. Обновляем файл

В примере разобран файл в формате png, но если в другом, например, jpg, то в код меняем таким образом.

Видим что изменился атрибут type он стал со значением jpg, а так же расширение картинки изменилось на другое. Обновляем и смотрим на работу кода.

Favicon в браузере

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector