Как добавить favicon к своему WordPress сайту – Блог про WordPress
Favicon – небольшое изображение, которое отображается рядом с заголовком вашего веб-сайта в браузере. Оно помогает пользователям идентифицировать ваш ресурс. Постоянные посетители сайта запомнят это изображение – оно будет ассоциироваться с вашим вебсайтом. Соответственно, узнаваемость вашего бренда повысится, что повлияет на доверие со стороны вашей аудитории. Одной из достаточно популярных ошибок при запуске блога является именно отсутствие favicon. В этой статье мы покажем, как добавить favicon к сайту WordPress.
Зачем добавлять favicon к WordPress-сайту?
Как было отмечено ранее, favicon определяет индивидуальность вашего сайта. Также favicon улучшает юзабилити ресурса и повышает опыт взаимодействия. Взгляните на следующее изображение:
У большинства пользователей обычно открыто много вкладок в браузере. Чем больше вкладок, тем хуже виден заголовок вашего сайта. С помощью favicon пользователь может быстро опознать ваш сайт и перейти к соответствующей вкладке.
Как создать favicon
Favicon – это простое квадратное изображение. В идеале оно может иметь размеры либо 32×32 пикселей, либо 16×16 пикселей. Откройте Photoshop или любой другой графический редактор, создайте квадратное изображение 128х128 пикселей, чтобы можно было легко с ним работать. После создания нужного изображения вы можете затем изменить его размеры до 32×32 пикселей и сохранить его в формате PNG.
Даже учитывая тот факт, что большинство современных браузеров работает с favicon в формате PNG, старые версии IE этого не делают. Чтобы ваш favicon нормально отображался во всех современных браузерах, мы рекомендуем преобразовать его в 16×16 пикселей и сохранить в формате .ico. Чтобы преобразовать PNG-файл в .ico, вы можете использовать favicon generator от Dynamic Drive.
Добавление favicon к своему сайту
Загрузите свой favicon в корневой каталог вашего сайта с помощью FTP. После этого вы можете вставить следующий код в файл header.php темы:
<link rel="icon" href="http://www.wpbeginner.com/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="http://www.wpbeginner.com/favicon.ico" type="image/x-icon" />
Замените wpbeginner.com на URL вашего сайта. Если в вашей теме нет файла header.php или вы не можете найти его, не переживайте – для этого существует плагин. Установите и активируйте плагин Insert Headers and Footers. После активации плагина перейдите в раздел Параметры – Insert Headers and Footers и вставьте код, представленный выше, в секцию хэдера, после чего сохраните ваши настройки.
Если вы не хотите работать с FTP, то вы можете воспользоваться плагином All in One Favicon.
Также загрузить favicon можно и в разделе медиафайлов WordPress. Загружаете готовый favicon, получаем его URL, после чего вставляем этот URL вместо того, что указан в коде выше.
Источник: wpbeginner.com
Favicon WP | WordPress.org Русский
O(@perdyllo)
в чем может бить проблема
Для начала сбросить кэш браузера Во вторых и это главное картинка для фавикона должна быть не менее 512х512 а у вас она 70х75
- Ответ изменён 1 год, 10 месяцев назад пользователем O.
Нет не помогло 🙁
O(@perdyllo)
картинка для фавикона должна быть не менее 512х512 а у вас она 70х75
http://joxi.ru/Y2LB5b8tnBMzWr
http://joxi.ru/eAOGdb5U4B6VzA
Нет картинка 512х512
Здесь проблема в том что из под админки фавиконка есть, если зайти на главною страницу то нет
вероятно потому, что урл http://ivanhfull.dimtest.ru/favicon.ico отдает 200 код — то есть картинка якобы существует.
(@perdyllo)
http://joxi.ru/Y2LB5b8tnBMzWr
http://joxi.ru/eAOGdb5U4B6VzA
Что вы мозги морочите!? Вот ваш фавикон на вашем же скриншоте! http://joxi.ru/gmvpJMeTx4dgDA
я пишу что отражается он только из под админки, а.а.а.а
O(@perdyllo)
http://joxi.ru/nAyvElXiXEaLer У этой фавиконки размер 70х75
Как вариант — сгенерируйте нужный фавикон из своей картинки здесь http://www.favicon.by. Скачайте его и потом загрузите в корень сайта. Раньше так всегда делали и это всегда работало.
- Ответ изменён 1 год, 10 месяцев назад пользователем O.
- Ответ изменён 1 год, 10 месяцев назад пользователем O.
браузер сначала берет favicon.ico из корня сайта — только потом уже то, что прописано в head-секции.
а у вас есть favicon.ico в корне сайта — удалите его.
вон яндекс видит иконку — http://favicon.yandex.net/favicon/ivanhfull.dimtest.ru/
http://joxi.ru/1A5voMRTKMza0r — корень сайта
http://joxi.ru/brRGZBdUQ9LP8m — корень теми
Нету favicon
а сервер говорит, что есть:https://bertal.ru/index.php?a4949449/ivanhfull.dimtest.ru/favicon.ico#h
так что разбирайтесь с настройками хостинга.
(@perdyllo)
Нету favicon
Ну так загрузите его туда:
Как вариант — сгенерируйте нужный фавикон из своей картинки здесь http://www.favicon.by. Скачайте его и потом загрузите в корень сайта. Раньше так всегда делали и это всегда работало.
Вбил свой адрес сайта и мне не показывается что там есть Favicon в корне сайта
Фавиконка как добавить: для WordPress
Добавление Favicon на сайт является необходимым условием для поддержания его индивидуальности. Favicon сайта – это что-то вроде вашей фотографии в паспорте. Как фотография позволяет узнавать вас, так и favicon, если он уникален,позволяет вашим посетителям узнавать ваш сайт. В этой статье мы хотим рассказать, как добавить favicon в свой блог на WordPress.
Во-первых, для того, чтобы добавить favicon на свой сайт, вам нужно найти картинку, которую вы будете использовать как favicon. Если у вас есть дизайнер, который разрабатывал вам дизайн сайта, то вы можете попросить его об этом. Однако большинство опытных дизайнеров готовят ее без дополнительной просьбы, поскольку favicon обычно входит в стандартный пакет услуг по созданию дизайна сайта.
Тем, кто сам занимается дизайном, мы подскажем, как это можно легко сделать. Сначала выберите картинку со своего сайта – это может быть и ваш логотип – и поменяйте ее размеры на 16 x 16 пикселей. Сохраните файл в формате.png, чтобы потом можно было его конвертировать в формат .ico.
Примечание: Если вы пользуетесь Adobe Photoshop, то учтите, что он не позволит вам сохранить файл в формате .ico, поэтому предлагаем вам другой способ для этого.
Вы можете воспользоваться программой с открытым кодом под названием GIMP, которая является заменой Photoshop. Сохраните файл в Photoshop, затем откройте его в GIMP и пересохраните в формате .ico.
В Интернете также есть несколько конвертеров, которые позволят вам конвертировать свою картинку в формат .ico. Вы можете найти подходящий конвертер в нашей статье «онлайн генераторы фавиконок».
Как только вы получите файл в формате .ico, вы должны переименовать его в favicon.ico и загрузить в корневую директорию сайта, где расположены все его страницы и материалы.
Далее вам следует открыть файл header.php в папке со своим шаблоном. Вы можете сделать это в HTML-редакторе на компьютере или в панели администратора WP.
Перед тэгом вставьте следующий код:
<link rel="icon" href="http://web-profy.com/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="web-profy.com/favicon.ico" type="image/x-icon" />
Поменяйте Web-Profy.com на адрес своего сайта, и загрузите файл. Как видите, наш favicon – это в виде пазла как на логотипе в нашей шапке. Покажите нам свой favicon в комментариях.
Алексей Повловский
Как добавить favicon в свой блог WordPress
Favicon – это загадочный термин, который активно используют только продвинутые блогеры. Причина этому довольно проста. Новички просто пока что еще не разобрались с основными функциями блога WordPress, чтобы влезать в такие глубокие дебри. Но после того как все плагины вордпресс встали на свои места, и шаблоны WordPress уютно покоятся на сервере, можно приступить к созданию уникальной иконки. А что такое favicon для сайта, и как его устанавливать, мы и рассмотрим в настоящей статье.
Для начала, нужно пояснить, откуда пошло загадочное слово favicon. Итак, favicon – это сокращение двух слов – «favorite» и, собственно, «icon». Другими словами, при добавлении блога в закладки, рядом с названием сайта будет располагаться красивые маленькие иконки, коими не пренебрегают владельцы крупных сайтов рунета. При этом favicon будет располагаться не только в списке избранных сайтов, но и в самой адресной строке, непосредственно перед URL-ом открытого сайта. Да и в самой поисковой системе в большинстве случаев отображается иконка перед строчкой с найденным сайтом. Это очень удобно в том случае, если нужный результат поиска не находится на первых строчках поисковых запросов. Конечно, если вы только что создали favicon для сайта и прикрутили его к своему блогу WordPress, то не стоит ожидать, что он моментально появится в поисковых запросах. Как правило, индексация таких иконок проводится раз в несколько дней. В отдельных случаях, срок может увеличиться до одного месяца.
Каким должен быть favicon для сайта?
При создании или скачивании favicon для сайта вам нужно знать, что картинка иконки должна быть достаточно крупной, без мелких деталей, поскольку сам favicon имеет очень маленькие размеры. Кроме того, строго рекомендуется сделать иконку выделяющейся и яркой, чтобы пользователи могли ее заметить и выделить среди других поисковых запросов. Отсюда можно сделать вывод, что favicon – это своеобразный маячок, который будет светить в море поисковых запросов, привлекая посетителей, как мотыльков на свет.
Как сделать и где скачать favicon?
Для создания faivcon для сайта нужно обладать некоторыми дизайнерскими навыками, хотя с помощью современных сервисов этот процесс не составит особого труда даже для новичков. Получившаяся в результате иконка должна соответствовать определенным требованиям. Так, размеры графического файла не должны быть больше или меньше 16х16 пикселей. Сам файл должен иметь формат ico, что очень важно. Собственно, картинку 16х16 можно без проблем создать и собственными руками, с помощью того же Фотошопа. Вот только переименовывать получившийся файл в *.ico вам придется вручную, поскольку Фотошоп этому не обучен.
Если же вы не хотите работать с Фотошопом, можете использовать множество различных сервисов, в число которых входит знаменитый favicon.cc и не менее популярный favicon.ru. Здесь вам будет предоставлено удобное поле деятельности для создания иконок. Мало того, вы можете даже не рисовать вручную, а просто преобразовать любую картинку в иконку. Только помните, что картинка должна быть крупной и выразительной. Если же вам неудобны эти сайты, можете найти еще массу других. Благо, интернет просто переполнен подобными ресурсами, и навскидку можно назвать, как минимум десяток.
Если процесс создания favicon для сайта покажется вам сложным, вы всегда можете скачать готовую иконку с одного из вышеуказанных ресурсов. Особо крупной базой данных может похвастаться сайт favicon.cc, который включает в себя коллекцию из 55 000 разных иконок, разбитых по темам. Здесь можно даже скачать анимированный favicon, который добавит вашему сайту разнообразия. Правда сама анимация будет различима только лишь в Mozilla FireFox.
Как прикрутить favicon для сайта к блогу WordPress?
Рассмотрим процесс прикручивания иконки к вашему блогу WordPress. Собственно, сложностей здесь у вас возникнуть не должно. Ищете на сервере файл под названием header.php, который обычно находится в папке с использующимся шаблоном. После этого, вам нужно открыть его в текстовом редакторе с возможностью работы c HTML. В первой же строчке вы заметите открытый тег HEAD. Так вот, до его закрытия вам нужно написать две строчки, в которых будет прописан путь к нужному favicon. Первая строчка будет выглядеть так:
Разумеется, вместо слов «путь к favicon», вам нужно будет вставить сам путь. Вторая строчка выглядит так:
Вот и все! Осталось лишь сохранить файл на сервере, и вы сможете любоваться своей новой красивой иконкой, которая будет выгодно отличать ваш блог от конкурентов.
Что такое Favicon и как его установить на сайт WordPress
Вообще дорогие друзья, давайте определимся для начала, для чего вообще нужен Favicon и что это вообще такое. Хочу заметить, что Favicon особой роли на продвижение Вашего сайта не влияет. Это больше всего относиться к внешнему виду сайта и к его дизайну. Конечно без Favicon Ваш сайт будет процветать и продвигаться и далее, но я бы очень советовал бы его установить на Ваш сайт, так как он все-таки играет небольшую роль для вашего сайта или блога.
Что такое Favicon
Давайте теперь посмотрим, что такое Favicon – это миниатюрная иконка для Вашего сайта, которая отображается в браузере рядом с названием Вашего сайта. Но это еще не все, Favicon также отображается рядом с Вашим сайтов и в поисковой выдачи, давайте посмотрим на рисунке ниже, чтобы Вам было понятно, где отображается Favicon.
Здесь я выделил Favicon в красный прямоугольник. Здесь я показал, как он отображается при обычной поисковой выдачи. А вот как он отображается просто при загрузке Вашего сайта.
То есть я думаю понятно, где можно увидеть Favicon.
Для чего нужен собственно Favicon
В принципе большой роли Favicon не играет, он является как бы небольшим лицом вашего сайта, если сделать Favicon довольно удачно: оригинально, красиво, то он будет еще до того, как посетителей не зашел на Ваш сайт, уже привлекать потенциальный посетителей. Поэтому его надо сделать ярким, чтобы он отличался от других сайтов в поисковой выдачи.
Мы определились что такое Favicon и для чего он собственно нужен, а теперь давайте рассмотрим как можно создать его и установить на свой сайт WordPress. Для этих целей Вам необходимо в каком-нибудь графическом редакторе нарисовать картинку размером 16 на 16 пикселей (точек), хотя не обязательно именно такого размера, можно и больше, а можно и не рисовать, а уже взять готовую, например, у меня уже была нарисована, поэтому за основу возьму именно ее.
Далее, как у нас готова картина, переходим на сайт создания Favicon. Первым делом, на сайте нам необходимо загрузить нашу нарисованную картинку, для этого нажимаем на кнопку Import Image
Далее поочередно на следующей странице нажимаем на кнопки Выберите файл и затем Upload
После того, как файл будет успешно загружен, то он отобразиться в очень крупном размере и будет выглядеть не очень красиво, конечно же. На этой же странице, где у Вас показана ваша иконка в крупном размере спускаемся немного ниже и нажимаем на кнопку Download Favicon
В итоге, у Вас сохраниться файл favicon.ico на компьютере, размером 16 на 16 пикселей (точек). Конечно, можно в графическом редакторе сразу нарисовать картинку данного размера и сохранить его с расширением *.ico, но на мой взгляд, данный способ применять лучше всего для тех, кто не очень силен в графических редакторах.
Теперь давайте перейдем к установке Favicon на сайт WordPress. Для этого заходим в админскую часть и выбираем Внешний вид-Редактор, далее ищем файл Заголовок (header.php) и открываем его для редакторирования. В данном файле, в тег вставляем следующий код:
<linkrel="icon" href=" http://путь_к_иконке/favicon.ico" type="image/x-icon"> <linkrel="shortcut icon" href=" http:// путь_к_иконке /favicon.ico" type="image/x-icon">
Все, сохраняем данный файл (обновляем его) и переходим на страницу и видим, как у нас появилась своя иконка для сайта (лицо сайта).
Как видите ничего сложно, до встречи дорогие друзья!
Также советуем почитать на PressDev.RU
Как установить favicon —
Favicon (сокр. от англ.FAVorites ICON — «значок для избранного», от названия папки с закладками в MSIE) — значок веб-сайта или веб-страницы. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса.
Иконка нужна для того, чтобы сделать ваш сайт более привлекательным, запоминающимся, и чтобы пользователь среди кучи вкладок нашел именно тот сайт, который ему нужен.
Чтобы поставить фавиконку, ее сначала нужно где-то взять. Можно скачать просто из Интернета. Существует много сайтов на которых вы можете найти подходящую картинку. Также можно сделать иконку самому с помощью Adobe Photoshop или генераторов фавикон.
Например, с помощью сайта favicon.ru.
Заходим на сайт. Здесь мы видим, что можно создать фавиконку 3-мя способами:
- Заказать favicon у профессионалов
- Сделать favicon из изображения
- Нарисовать иконку
Давайте разберем каждый пункт.
Как сделать favicon из изображения
1. Для того чтобы сделать фавиконку из изображения нажимаем «Выберите файл».
2. Выбираем нужное изображение, которое сохранено на вашем компьютере и нажимаем «Открыть».
3. Я выбрала вот такую белочку:) Зеленый квадрат, который вы видите на изображении, можно перемещать, менять размер. Когда вы всё настроете, то нажимаете «Далее».
4. Вот что мы получили в итоге. Не пугайтесь того, что у вас получилось) Иконка всего лишь 16х16 и будет выглядеть хорошо. Результат вы видите ниже. Если вас всё устраивает, то нажимаем «Скачать Favicon» и готово!
2. Можно самим нарисовать фавиконку. Можно выбрать цвет и использовать разные инструменты. После того, как вы создадите favicon для сайта жмите «Скачать favicon».
Как сделать favicon для сайта мы разобрались, теперь давайте поставим иконку на сайт.
Установка favicon на сайт
Разместить favicon можно несколькими способами, которые мы сейчас рассмотрим.
Вставляем фавикон с помощью настроек темы WordPress
Многие шаблоны WordPress в своих настройках предлагают поставить favicon. В зависимости от темы детали вставки могут меняться. Сейчас я покажу как это делается с моим шаблоном на WordPress.
1. Находим вкладку «Внешний вид», затем «Настроить».
2. Появляются настройки темы. Здесь находим то, что связано с Favicon. В вашем шаблоне может быть всё по-другому.
3. Выбираем нужное изображение.
4. Нажимаем «Сохранить и опубликовать».
5. Смотрим результат.
Установка иконки через корневой каталог
1. Заходим в панель управления и в «Диспетчер файлов».
2. Если у вас один сайт, то иконку нужно поместить в public_html, если у вас несколько сайтов, которые разбросаны по папкам, то сначала открываем папку с нужным сайтом и туда помещаем favicon.
3. Затем нажимаем «Загрузить».
4. Готово! Наша favicon установлена!
Установка с помощью плагина favicon для WordPress
Для того, чтобы использовать этот метод, вам нужно скачать плагин Favicons для WordPress (щелкните по ссылке). После этого вам нужно его установить.
- Иконкой можно сделать граватар.
- Если вы хотите использовать свой значок, то нужно указать путь к файлу.
- Можно использовать иконки из набора значков.
Все методы разные, но работают одинаково. Надеюсь, что теперь поставить favicon на сайт для вас не составит никакого труда. Выбирайте самый понятный для вас путь и действуйте!
Как добавить фавикон на сайт WordPress
Фавикон или иконка — это крохотная картинка, которая появляется в заголовке сайта браузера. Он помогает посетителям узнать ваш сайт и таким образом может повлиять на то, что посетители будут чаще его посещать, так как они будут его проще узнавать. Таким образом фавикон является брендом сайта, и помогает выстроить доверительные отношения с аудиторией. В этой статье, я собираюсь показать вам как добавить фавикон на сайт.
Содержание статьи
Как добавить фавикон на сайт WordPress и почему это следует сделать
Как уже упоминалось ранее, фавикон позволяет увеличить узнаваемость блога. Однако, он также улучшает юзабилити и взаимодействие с посетителями. Эта картинка поможет быстрее выделить сайт среди остальных:
Большинство пользователей обычно открывает большое количество сайтов в своем окне браузера. От этого заголовок вашего сайта может потеряться в таком большом количестве. Фавикон помогает посетителями узнать его и быстро перейти по нужной вкладке.
Как создать фавикон
Вы можете использовать логотип сайта в качестве картинки для иконки. Рекомендованный размер такой картинки составляет 512 пикселей как в длину, так и ширину. Картинка должна быть квадратной, но вы можете добавить и прямоугольную картинку, а уже в админ-панели блога, вам останется обрезать большую сторону добавленной картинки.
Для добавления картинки для иконки блога я рекомендую воспользоваться программой Adobe Photoshop или Gimp. Так вы сможете точно определить пропорции будущей картинки. Вам нужно будет поместить картинку на прозрачный фон, либо подобрать подходящий цвет фона на ваш выбор. Картинка может быть создана как в формате png, так и в формате jpeg.
Добавляем фавикон на сайт WordPress
Начиная с версии 4.3 WordPress появилась возможность добавлять фавикон на сайт прямо из админ-панели блога. Просто переходите по вкладке Внешний вид > Настроить и нажимаете на вкладку «Свойства сайта».
Поле свойства сайта позволяют настроить заголовок сайта, его описание, и дает возможность по желанию отобразить их в шапке сайта. Оно также позволяет вам загрузить иконку или фавикон. Просто нажмите по кнопке выбрать файл и загрузите ту картинку, которую вы подготовили в качестве иконки сайта.
Если картинка загружается превышающей рекомендованный размер, WordPress позволяет обрезать ее. Если вы все равно превысили рекомендованный вес картинки, то вы можете ее только пересохранить с меньшим размером.
Такой встроенный инструмент позволяет в режиме предпросмотра увидеть как выглядит фавикон. Вы можете также перейти на сайт с мобильного устройства и в нем добавить закладку вашего сайта. Вы заметите, что у сайта появилась новая иконка на панели меню мобильного телефона.
Добавляем фавикон на старую версию WordPress (4.2 и ниже)
Для этого воспользуемся загрузкой фавикона напрямую в директорию блога при помощи FTP. После этого вам потребуется немного видоизменить содержание файла header.php, вставив код следующего содержания:
1 2 3 4 5 | <link rel="icon" href="http://www.seodengi.ru/favicon.png" type="image/x-icon" /> <link rel="shortcut icon" href="http://www.seodengi.ru/favicon.png" type="image/x-icon" /> |
<link rel=»icon» href=»http://www.seodengi.ru/favicon.png» type=»image/x-icon» /> <link rel=»shortcut icon» href=»http://www.seodengi.ru/favicon.png» type=»image/x-icon» />
Замените seodengi.ru на URL своего сайта и сохраните файл. Если ваша тема не имеет файла header.php, или вы не можете найти его, то и в этом случае не стоит беспокоится. На помощь придет плагин, под названием Insert Headers and Footers, который нужно установить и активировать. После активации плагина переходите Настройки > Insert Headers and Foters и вставляете туда код, который я привел выше, в поле заголовка и сохраняете настройки.
А если вы не хотите вовсе связываться с FTP, вы можете использовать плагин All in One Favicon.
Надеюсь статья оказалась для вас полезной и вы сможете без проблем теперь знаете как добавить фавикон на сайт WordPress. Если возникнут какие-то вопросы, или вы знаете еще какие-то способы добавления иконки для сайта, то прошу писать о них в комментариях к статье.