WordPress фавикон: Как установить favicon в WordPress.Как поставить иконку на сайт? – Creating a Favicon | WordPress.org

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

(Последнее обновление: 29.08.2017)

Доброго времени суток, дамы и господа! Наша сегодня полезная тема - как создать фавикон (favicon) для сайта. Если хотите выделить свой проект среди прочих веб-ресурсов, то вам следует, даже необходимо создать и установить иконку favicon на свой сайт или блог. Favicon (фавикон) - значок веб-сайта или веб-страницы. Фавикон важный элемент современного веб-дизайна, позволяет сайту быть заметным и отличаться от массы ему подобных.

favicon для сайтаfavicon для сайта

Значки для сайта

Favicon – это небольшой, как правило, 16 х 16 значок (имеющее расширение .ico) отображающийся рядом с названием сайта в окне браузера или в выдаче поисковика (Яндекс), а также, в закладках браузера и в "Избранном".

Иконка рядом с названием сайта:

Favicon - значок веб-сайта
Favicon - значок веб-сайта

Favicon - значок веб-сайта рядом с названием

Фавикон в выдаче Яндекс:

Иконка сайта в выдачеИконка сайта в выдаче

Иконка сайта в выдаче поисковой системы Яндекс

Иконки сайта (фавикон) в закладках браузера:

Фавикон сайтаФавикон сайта

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

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

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

Предлагаю вашему вниманию два онлайн сервиса для создания иконки для сайта favicon из любой картинки (изображения, фото). Первый, это очень простой сервис http://pr-cy.ru/favicon/, заходите на сайт, нажимаете кнопку "Выбрать изображение с компьютера", загружаете, а затем "Создать Favicon". Смотрите предварительно, что получилось и спокойно скачиваете иконку на свой комп:

Создать faviconСоздать favicon

Создать favicon для сайта

Следующий очень сервис http://favicon.ru/, всегда им пользуюсь, он мне больше нравится. Здесь, можно нарисовать самому иконку или также, сделать фавикон из картинки:

Favicon онлайнFavicon онлайн

Рисуем или создаём фавикон из изображения

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

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

Установка фавиконки на сайт WP предусмотрено во многих темах/шаблонах, в настройках вашей темы, а если нет, тогда в новой версии WordPress установить иконку на сайт очень легко, нажимаете на панели управления ссылку "Настроить". Затем, кликаете "Свойства сайта" и выбираете скачанный файл иконки на компьютере или любое изображение (рекомендуемые размеры изображения: 512 × 512):

ФавиконФавикон

Установка значка для сайта

Загружаете, обрезаете (если загрузили изображение большое) и сохраняете. Всё, готово.

Установка Favicon на Blogger

Заходите в панель управления Blogger, дизайн. По умолчанию в Blogger установлена блоггеровская иконка, если вам нужно её сменить, тогда нажимаем "Изменить":

Favicon BloggerFavicon Blogger

Favicon на Blogger

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

Загрузка значка BloggerЗагрузка значка Blogger

Загрузка персонализированного значка на Blogger

Обратите внимание, что сразу иконка может и не появится. Подождите какое то время. Вот, пожалуй и всё о чём я хотел вам рассказать. Да, если вы создали новый сайт или блог, не забудьте его сразу добавить во все поисковые системы - читать, здесь. Надеюсь новичкам пригодится. Удачи и до новых встреч.


Поделиться в социальных сетях

WordPress: favicon для сайта - как нарисовать и вставить

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

В этой статье я в двух словах расскажу как создать для сайта на wordpress favicon, более подробное внимание этой теме я уделил в предыдущей своей публикации, а также объясню как установить его на сайт. Будет интересно, увлекательно и просто.

Создание и поиск картинки

Я уже подготовил три картинки для своего тестового сайта при помощи сервиса

icoconverter.com. Здесь вы можете создать фавикон разного диаметра от 16 до 256 пикселей менее насыщенный (8 бит) или поярче 256, как сделал я.

Для иконки вам понадобится формат ICO. Его чаще всего используют, хотя некоторые способы предполагают PNG и даже JPG. Чуть позже вы увидите, что для одного из методов ico не подойдет. Не буду сейчас вдаваться в подробности.

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

Нарисовать свою иконку с нуля и в восьмибитном формате можно на сайте [urlspan]favicon.ru[/urlspan].

Теперь, когда вы знаете где искать фавиконы, давайте займемся установкой.

Установка

Существует три метода установки иконки на сайт – при помощи стандартного меню вордпресс, плагина для этой же CMS и кода. Третий метод подойдет вне зависимости от того, какой движок вы используете.

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

Стандартное меню

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

Далее переходим в раздел «Свойства сайта».

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

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

Видите, вордпресс не понимает что это такое, миниатюра не отображается.

Даже если вы, невзирая ни на что, щелкните «Обрезать» — панель управления выдаст ошибку.

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

Смотрите, сейчас я использовал PNG, размером 512х512, как рекомендует система.

В одно мгновение иконка загрузилась на сайт.

Можно использовать и jpeg большего формата. Просто выберите рисунок, посмотрите как это будет выглядеть в браузере, а затем нажмите «Обрезать».

Не забудьте сохранить изменения и опубликовать.

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

Плагин

Могу предложить вам плагин Insert Headers and Footers для решения той же задачи. Согласитесь, предыдущий вариант был не так уж сложен. Тот метод, о котором я сейчас буду рассказывать в разы труднее. И тем не менее давайте познакомимся со всеми вариантами.

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

 

В категории «Настройки» появилась новая функция, но для начала вам нужно зайти на хостинг и внести в корневую папку кое-какие изменения. Недавно я рассказывал о программе FileZilla. Она легкая, удобная, простая и бесплатная. Позволяет быстренько попадать в личный кабинет хостинга по FTP. Можно действовать через нее, или, воспользоваться стандартным методом.

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

Загружаю картинку. Будьте внимательны. Она должна быть не больше 12х12 пикселей, возможно придется подрезать в фотошопе. Там же можно поменять формат на ico, но можно использовать и PNG. Название должно быть обязательно именно favicon. Иначе возникнут трудности, код, который я для вас подготовил, не подойдет.

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

<link rel="icon" href="https://адрес-вашего-сайта.ru/favicon.ico" type="image/x-icon">

<link rel="icon" href="https://адрес-вашего-сайта.ru/favicon.ico" type="image/x-icon">

<link rel="shortcut icon" href="https://адрес-вашего-сайта.ru/favicon.ico" type="image/x-icon">

<link rel="shortcut icon" href="https://адрес-вашего-сайта.ru/favicon.ico" type="image/x-icon">

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

<link rel="icon" href="https://адрес-вашего-сайта.ru/favicon.png" type="image/png">

<link rel="icon" href="https://адрес-вашего-сайта.ru/favicon.png" type="image/png">

<link rel="shortcut icon" href="https://адрес-вашего-сайта.ru/favicon.png" type="image/png">

<link rel="shortcut icon" href="https://адрес-вашего-сайта.ru/favicon.png" type="image/png">

Сохраняем.

Готово.

Код

Следующий метод подойдет вне зависимости от того, какой движок вы используете. Итак, вам нужно найти файл header.php. Я работаю в вордпресс, поэтому мне легче всего сделать это через «Настройки» — «Редактор».

Вы можете отыскать нужный файл в папке сайта на хостинге. Он располагается в разделе Theme. Вот так документ выглядит на WordPress. Справа в редакторе он находится довольно быстро.

Теперь все тот же код, о котором я говорил ранее, вставляется в файл до закрывающегося тега head, как на картинке.

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

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

Ну вот и все. Хотите знать больше? Скачивайте бесплатный курс «[urlspan]Ядро интернет-бизнеса[/urlspan]» Сергея Садовникова и улучшайте показатели вашего сервиса. Он очень поможет, если вы только начинаете свой путь в этой сфере.

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

До новых встреч и удачи.

Загрузить favicon сайт WordPress плагин – INFO-EFFECT

На чтение 2 мин. Опубликовано

 Привет ! Мы продолжаем разбирать самые интересные и самые полезные плагины для сайта WordPress ! Сегодня вы узнаете как можно очень просто и быстро добавить на свой сайт значок favicon, который отображается вверху сайта, рядом с названием сайта или страницы. Вы сможете загрузить фавикон для админ-панели WordPress и для основного сайта. Можно загрузить фавикон в форматах – ico, gif и png. Можно загрузить Apple Touch Icon Frontend. Очень простой плагин.

Установить плагин All in one Favicon вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины – Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

 

All in one Favicon

 

Далее, после установки и активации плагина, перейдите на страницу: Настройки – All in one Favicon. Здесь вы сможете загрузить значок favicon в разных форматах.

 

Frontend Settings. Основной сайт.

– ICO Frontend, можно загрузить favicon в формате ico.

– GIF Frontend, можно загрузить favicon в формате gif.

– PNG Frontend, можно загрузить favicon в формате png.

– Apple Touch Icon Frontend, можно загрузить значок для устройства Apple с сенсорным интерфейсом.

Сохраните сделанные изменения.

 

Backend Settings. Всё тоже самое, только для админ-панели WordPress.

 

favicon загрузить настройки

 

Settings.

– Don’t add reflective shine to Apple Touch Icon, поставьте галочку, чтобы не отображать Apple Touch Icon.

– Remove link from Meta-box, удалить ссылку на сайт разработчиков WordPress в мета-поле.

Сохраните изменения.

 

Delete Settings, нажмите на данную кнопку, чтобы сбросить все настройки.

 

Всё готово ! После загрузки значка favicon он сразу же отобразится вверху страницы, рядом с названием страницы сайта.

 

favicon сайт загрузить плагин

 

Остались вопросы ? Напиши комментарий ! Удачи !

 

Не отображается favicon.ico | WordPress.org Русский

O

(@perdyllo)

Подскажите пжлст как это исправить.

Удалить всё что вы загрузили и прописали и впредь знать что фавикон на сайтах WP и в любой теме устанавливается вот так:

Час от часу не легче… Я поменял текст header.php на следующий:

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

— и сайт …перестал работать вообще. Удалил — то же самое. Что происходит?

Правда я еще пытался почистить кэш на последний час, но это было долго, и я закрыл страницу. Теперь мой сайт перестал открываться в Google Chrome и на ПК, и на смартфоне…

O

(@perdyllo)

Я поменял текст…..— и сайт …перестал работать вообще.Что происходит?

Горе от ума. Вот что происходит. Вам выше уже сказано как фавикон устанавливается.

Но раз уж погубили файл header.php — остается только одно — через ftp или менеджер файлов хостинга заменить его новым из архива со скачанной темой, установленной на сайте. Надеюсь тема у вас из оф.каталога? Тогда всё это очень просто.

O

(@perdyllo)

tuxfighter! Мы наверное видим кэшированные страницы:
<!-- Cache served by Simple Cache - Last modified: Mon, 06 May 2019 12:41:42 GMT -->

или видим попытку рекламировать сайт

Удалить всё что вы загрузили и прописали и впредь знать что фавикон на сайтах WP и в любой теме устанавливается вот так:

Это логотип — какое отношение он имеет к фавикону? Я про него знал, сейчас специально проверил — появился логотип из фавикона, а сам фавикон остался прежним.

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

  • Ответ изменён 10 месяцев, 2 недели назад пользователем Ar1ur.
  • Ответ изменён 10 месяцев, 2 недели назад пользователем Ar1ur.

Забыл вернуть ссылку на фавикон — сейчас обновляет сразу. Короче, словил какой-то адский баг.

O

(@perdyllo)

Это логотип — какое отношение он имеет к фавикону

То что вам нужно увидеть на скриншоте я обвел красным.

Вообще то мне казалось Вы более догадлив

появился логотип из фавикона,

Это что-то новое в WordPress!

Спасибо, теперь понял. Меня сбил с толку логотип наверху настроек — у меня это непосредственно в свойствах сайта.

Favicon by RealFaviconGenerator — Плагин для WordPress

Generate and setup a favicon for desktop browsers, iPhone/iPad, Android devices, Windows 8 tablets and more. In a matter of seconds, design an icon that looks great on all major platforms.

Favicon is not just a single favicon.ico file dropped in the middle of your site. Nowadays, with so many different platforms and devices, you need a bunch of pictures to get the job done. With RealFaviconGenerator, generate all the icons you need for desktop browsers, iPhone/iPad, Android devices, Windows 8 devices, and more.

iOS devices use a high resolution Apple touch icon to illustrate bookmarks and home screen shortcuts. A first generation iPhone needs a 57×57 picture, whereas a brand new iPad with Retina screen looks for a 152×152 picture. Android Chrome also use these pictures if it finds them. Windows 8 takes another route with a dedicated set of icons and HTML declarations.

Favicon is not only a matter of pictures with different resolutions. The various platforms coms with different UI guidelines. For example, the classic desktop favicons often use transparency. But iOS requires opaque icons. And Windows 8 has its own recommendations.

Save hours of research and image edition with RealFaviconGenerator and its companion plugin. In a matter of seconds, you setup a favicon compatible with:

  • Windows (IE, Chrome, Firefox, Opera, Safari)
  • Mac (Safari, Chrome, Firefox, Opera, Camino)
  • iOS (Safari, Chrome, Coast)
  • Android (Chrome, Firefox)
  • Surface (IE)
  • And more

We take compatibility very seriously. See http://realfavicongenerator.net/favicon_compatibility for the full list.

** Localization **

Using The WordPress Dashboard
  1. Navigate to the ‘Add New’ in the plugins dashboard
  2. Search for ‘Favicon by RealFaviconGenerator’
  3. Click ‘Install Now’
  4. Activate the plugin on the Plugin dashboard
  5. Navigate to the ‘Favicon’ entry in the Appearance menu
  6. Select a master picture from the Media Library (optional)
  7. Click the ‘Generate Favicon’ button and follow the instructions.
Using FTP
  1. Download favicon-by-realfavicongenerator.zip
  2. Extract the favicon-by-realfavicongenerator directory to your computer
  3. Upload the favicon-by-realfavicongenerator directory to the /wp-content/plugins/ directory
  4. Activate the plugin on the Plugin dashboard
  5. Navigate to the ‘Favicon’ entry in the Appearance menu
  6. Select a master picture from the Media Library (optional)
  7. Click the ‘Generate Favicon’ button and follow the instructions.

«Favicon by RealFaviconGenerator» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники
1.3.17
  • Changes to clear security warnings from CodeRisk
1.3.16
  • Plugin was tested up to WordPress 5.3.2
1.3.15
  • Plugin was tested up to WordPress 5.1
1.3.14
  • Plugin was tested up to WordPress 5.0-beta5
1.3.13
  • Plugin was tested up to WordPress 4.9.7
1.3.12

Never published, no change

1.3.11
  • id/ID translation added, thanks to Jordan Silaen
  • Plugin was tested up to WordPress 4.8.1
1.3.10
  • Always access RealFaviconGenerator via HTTPS
  • Clarification in local path separators for Windows
  • Plugin was tested up to WordPress 4.7.1
  • Notice to ask administrator to not deactivate the plugin
1.3.9
  • Plugin was tested up to WordPress 4.7
1.3.8
  • Plugin was tested up to WordPress 4.6
1.3.7
  • Fix: Plugin keywords rephrased (some were not taken into account).
1.3.6
  • Fix: the icons path was sometimes wrong when the upload directory was the root directory
1.3.5
  • pl/PL translation added, thanks to Maciej Gryniuk
  • ru/RU translation added, thanks to Natasha Diatko
1.3.4
  • Plugin was tested up to WordPress 4.5
1.3.3
1.3.2
  • Typos in French translations
  • Warning fix for PHP7
  • Tested up to WordPress 4.4.1
  • cs/CZ translation added, thanks to an anonymous translator
1.3.1
  • Hotfix in previous version.
1.3.0
  • The plugin takes advantage of RealFaviconGenerator’s non-interactive API to upgrade the favicon automatically whenever a new version is available.
1.2.15
  • Donation link added.
  • Plugin now works when access to file system is via FTP (not direct). See https://wordpress.org/support/topic/no-images-created
1.2.14
  • Security improvement.
  • Warning fix regarding NONCE_ACTION_NAME.
  • Useless PHP closing tags removed.
  • Error checking added to favicon package unzipping.
1.2.13
1.2.12
  • Performance improvements: favicon update checking is now done in the Admin section (not the Public section), locales are not loaded in the Public section anymore.
  • Take advantage of the Rewrite API (when available) to make the files appear to be in the root directory. So http://example.com/favicon.ico works (eg. when requested by Yandex).
  • nl/NL translation added, thanks to Axel Vanderhaeghen.
1.2.11
  • When the admin’s browser cannot get the picture selected from the Media Library, the UI fails gracefully.
  • Favicon package unzipping is more robust.
  • Notice to ask users to rank the plugin on WordPress.org.
1.2.10
  • Warning fix when used with BuddyPress (bp_setup_current_user). See https://wordpress.org/support/topic/wp_debug-notice-for-bp_setup_current_user.
1.2.9
  • When selected from the Media Library, the master picture is now retrieved by WP administrator’s browser to prevent several issues (locally hosted blogs, blogs protected in a way or another, etc.).
1.2.8
  • Plugin successfully tested against WordPress 4.1.
1.2.7
  • Fix for WordPress sites hosted on Windows.
1.2.6
  • The plugin is now compatible with multisite.
1.2.5
  • Fix for login page: favicon code was not injected in this particular page.
1.2.4
  • Remove debug messages to avoid false positives in error log.
1.2.3
  • Update notifications can be dismissed once for all.
  • New Settings page to enable/disable update notifications.
1.2.2
  • Fix for the 403 issue with HostGator hosting service (https://wordpress.org/support/topic/403-error-when-generating-favicon).
1.2.1
  • Fix in plugin removal and update checking.
1.2.0
  • The plugin now warns the user when RealFaviconGenerator was updated and the favicon should be generated again.
1.1.1
  • Rewrite API usage disabled. Favicon files do not appear to be in the root directory of the blog anymore.
1.1.0
  • Run RealFaviconGenerator’s favicon checker from the admin interface.
1.0.7
  • Deactivate default Genesis favicon when one is configured in FbRFG.
1.0.6
  • Error management improved during favicon install.
1.0.5
  • Do not try to rewrite the favicon files URL when .htaccess is not writable.
1.0.4
  • Option to not rewrite the favicon files URL, even when this is possible.
1.0.3
  • Plugin code syntax changed to fit older versions of PHP.
1.0.2
  • Callback URL was too long for some servers. It has been shorten.
1.0.1
  • Favicon admin settings are now in the Appearance menu.
  • Fix in favicon package download.
  • Fix in error management during favicon installation.
1.0

Initial version.

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

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