Как вставить на сайт Фавикон (Favicon) | | SEO для блондинки
Ищу:

Как вставить на сайт Фавикон (Favicon)

Сегодняшняя заметка на полях о том, как вставить на свой сайт фавикон (favicon)

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

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

Внимание!!! Метод описан для сайтов написанных на вордпресс. Для остальных в конце пояснения.

И так что бы вставить Фавикон (favicon) нам понадобится:

1. Фотошоп или другая программа способная сохранить картинку в формате png.

Открываем фотошоп, задаём размер картинки 16 на 16 px, и рисуем. Когда нарисовали и проверили, что в реальном масштабе смотрится хорошо, сохраняем в формате png назвав латинскими буквами без пробелов точек и тп.

Второй вариант (Последнее время я использую его  файл типа ICO)  этот тип можно сделать из любого типа файла конвертором. (например этим)

2. Загружаем эту картинку Фавикон (favicon) через админку в Вордпрессе:

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

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

3. Подключаем Фавикон (favicon) в значок браузера:


Опять же в админке  вордпресса заходим  Внешний вид  -> Редактор (У кого другой перевод вордпресса:  «Внешний вид» это сразу под «Комментариями» )

Нам открывается программный текст страниц темы нашего сайта. Справа выбираем файл header.php (Это программный код шапки) И в открывшемся тексте ищем правильное место, чтобы вставить свою команду:

Находим строку начинающуюся на <title>, после неё идут строки начинающиеся с <link , и вот после последнего такого линка ( строка линка заканчивается символами />) Вставляем наши  строки:

<link rel=»icon» href=»??????????» type=»image/x-icon»/>
<link rel=»shortcut icon» href=»??????????????»/>

Где вместо вопросительных знаком стоит полный адрес нашей картинки из блокнота (не потеряйте кавычки!!!) :)) Всё! Нажимаем внизу обновить файл. Можно идти смотреть результат))

P.S. Разные браузеры по разному считывают код страницы. Например вот эти значки показываются в Опере, Хроме и Мазиле, но не показываются в Интернет экспл.

Пояснение для сайтов на других движках (CMS )

Для вас меняется только третий пункт. Откройте редактирование кода своего сайта (не знаю уж как) и в теге head сразу после title ищем похожее на описанное мной место в коде и вставляем. )))

Удачи вам.


Редактировать:

Вы можете подписаться на новые посты этого блога:



Комментарии (23) на запись “Как вставить на сайт Фавикон (Favicon)”

  1. Виктор 13.06.2010 17:12

    Ну тут такие фразы не для блондинок точно=)

  2. Мисс Удача 14.06.2010 10:49

    В что же тут не понятного? По моему всё описано очень просто

  3. Игнат 14.12.2010 05:24

    Огромное Мирси

  4. Webumniza 01.03.2011 19:30

    Спасибо вам большое))) я вчера установила плагин себе на сайт фавикон, только не могла поменять фавикон, а вот с вашим уроком все стало быстро и просто )) теперь у меня целая библиотека фавиконов)

  5. lev 11.03.2011 13:00

    Спасибо. Благодаря посту узнал, что редактировать можно не только по ftp

  6. Светлана 25.05.2011 12:19

    Спасибо огромное, только благодаря Вашему доступному объяснению, у меня наконец-то появился фавикон. Уже несколько раз пробовала его установить, но ни как не получалось. Теперь я Ваша подписчица!

  7. Мисс Удача 25.05.2011 13:32

    Всегда пожалуйста. Рада что статья оказалась полезной.

  8. seofan 06.08.2011 13:35

    Отличная статья, на двух моих сайтах я загружал фавиконы через хостинг, все было удачно, но на одном сайте инфо о favicone было прописано в header.php пришлось подредактировать и все удачно :)
    Спасибо, ваш пост однозначно полезный.

  9. Илья Т 17.11.2011 22:38

    «сохраняем в формате pnd »
    А точно есть такой формат?

  10. Мисс Удача 18.11.2011 10:08

    А ну это конечно PNG — обычный формат сетевой графики, опечаталась я

  11. Кирилл 09.12.2011 17:48

    у вас в коде 5 ошибок, они исправляются браузерами, но в IE фавикон может не отобразиться.

  12. Михаил 10.12.2011 03:28

    спасибо загрузил ровно 6 секунд и готова

  13. Гость 03.01.2012 16:30

    можно и в других форматах делать, я сделал картинку в jpg затем поменял расширение на ico, там где вопросы в конце ??????.ico

  14. Анатолий 23.01.2012 13:52

    мммм ничего не получается:( не появляется картинка и все тут!!!

  15. Мисс Удача 07.02.2012 10:13

    Ну в таких случаях мне помогает всё откатить назад и сделать ещё раз — вы просто в чём-то ошиблись

  16. Елена 02.07.2012 10:40

    Огромное Вам спасибо! Самое понятное, доступное объяснение из всех !!!

    Получилось сделать за 2 минуты!
    А то мучила и себя и хостинг…

  17. Анна 25.07.2012 09:51

    Спасибо за пост) А кто подскажет — Что делать, если не хватает прав на редактирование header.php.

    Сообщение под header.php. :
    («Чтобы сохранить изменения, нужно сделать этот файл доступным для записи. «)

  18. Мисс Удача 07.08.2012 14:57

    Это настройка доступности файлов на хостинге. Тут помочь не могу у меня хостинг для блондинок я с этим всем не разбиралась

  19. Андрей 03.09.2012 14:06

    Все доходчиво и просто! Спасибо за пост. Все манипуляции заняли 15 минут (включая рисование самого фавикона) Рисовал онлайн — ресурсов море. Файл ico.

  20. Марина Суздалева 23.10.2012 23:47

    Эх, вроде и не блондинка, а ничего не получается. 3 раза перечитала инструкцию, не появляется картинка и все тут :(

  21. Warder 15.05.2013 07:12

    Спасибо, блондиночка. У меня получилось. С первого раза не вышло. Оказалось, что при копировании ваши кавычки не сошлись с моими, установленными в программном тексте. Так что у кого с первого раза не получиться поменяйте кавычки по стилю на такие как в тексте (там куда вы копируете вот это

    я поменял на такие » и все получилось

  22. Андрей 15.05.2013 13:55

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

  23. Ангелина 06.06.2013 17:20

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

Обратные ссылки

Оставить комментарий




Загрузить свой аватар