Как вставить на сайт Фавикон (Favicon)
Сегодняшняя заметка на полях о том, как вставить на свой сайт фавикон (favicon)
(это такая махонькая картиночка наверху на вкладке в браузере. Например у меня там красненький четырёхлистник. А когда этой картинки у вас нет, то наверху показывается общий значок браузера )
Внимание!!! Метод описан для сайтов написанных на вордпресс. Для остальных в конце пояснения.
И так что бы вставить Фавикон (favicon) нам понадобится:
1. Фотошоп или другая программа способная сохранить картинку в формате png.
Открываем фотошоп, задаём размер картинки 16 на 16 px, и рисуем. Когда нарисовали и проверили, что в реальном масштабе смотрится хорошо, сохраняем в формате png назвав латинскими буквами без пробелов точек и тп.
Второй вариант (Последнее время я использую его файл типа ICO) этот тип можно сделать из любого типа файла конвертором. (например этим)
2. Загружаем эту картинку Фавикон (favicon) через админку в Вордпрессе:
Медиафайлы — добавить новый — загрузить. Когда файл загрузился, он внизу показывает полный путь куда поместился файл — копируем себе этот полный адрес в блокнот.
Или если вы умеете пользоваться FTP то просто залейте файл картинки в public_html. Этот способ работает даже лучше чем прописывать кодом адреса.
3. Подключаем Фавикон (favicon) в значок браузера:
Опять же в админке вордпресса заходим Внешний вид -> Редактор (У кого другой перевод вордпресса: «Внешний вид» это сразу под «Комментариями» )
Нам открывается программный текст страниц темы нашего сайта. Справа выбираем файл header.php (Это программный код шапки) И в открывшемся тексте ищем правильное место, чтобы вставить свою команду:
Находим строку начинающуюся на <title>, после неё идут строки начинающиеся с <link , и вот после последнего такого линка ( строка линка заканчивается символами />) Вставляем наши строки:
<link rel=»shortcut icon» href=»??????????????»/>
Где вместо вопросительных знаком стоит полный адрес нашей картинки из блокнота (не потеряйте кавычки!!!) :)) Всё! Нажимаем внизу обновить файл. Можно идти смотреть результат))
P.S. Разные браузеры по разному считывают код страницы. Например вот эти значки показываются в Опере, Хроме и Мазиле, но не показываются в Интернет экспл.
Пояснение для сайтов на других движках (CMS )
Для вас меняется только третий пункт. Откройте редактирование кода своего сайта (не знаю уж как) и в теге head сразу после title ищем похожее на описанное мной место в коде и вставляем. )))
Удачи вам.
Редактировать:
Комментарии (23) на запись “Как вставить на сайт Фавикон (Favicon)”
- Виктор 13.06.2010 17:12
-
Мисс Удача
14.06.2010 10:49
В что же тут не понятного? По моему всё описано очень просто
-
Игнат
14.12.2010 05:24
Огромное Мирси
-
Webumniza
01.03.2011 19:30
Спасибо вам большое))) я вчера установила плагин себе на сайт фавикон, только не могла поменять фавикон, а вот с вашим уроком все стало быстро и просто )) теперь у меня целая библиотека фавиконов)
-
lev
11.03.2011 13:00
Спасибо. Благодаря посту узнал, что редактировать можно не только по ftp
-
Светлана
25.05.2011 12:19
Спасибо огромное, только благодаря Вашему доступному объяснению, у меня наконец-то появился фавикон. Уже несколько раз пробовала его установить, но ни как не получалось. Теперь я Ваша подписчица!
-
Мисс Удача
25.05.2011 13:32
Всегда пожалуйста. Рада что статья оказалась полезной.
-
seofan
06.08.2011 13:35
Отличная статья, на двух моих сайтах я загружал фавиконы через хостинг, все было удачно, но на одном сайте инфо о favicone было прописано в header.php пришлось подредактировать и все удачно
Спасибо, ваш пост однозначно полезный. -
Илья Т
17.11.2011 22:38
«сохраняем в формате pnd »
А точно есть такой формат? -
Мисс Удача
18.11.2011 10:08
А ну это конечно PNG — обычный формат сетевой графики, опечаталась я
-
Кирилл
09.12.2011 17:48
у вас в коде 5 ошибок, они исправляются браузерами, но в IE фавикон может не отобразиться.
-
Михаил
10.12.2011 03:28
спасибо загрузил ровно 6 секунд и готова
-
Гость
03.01.2012 16:30
можно и в других форматах делать, я сделал картинку в jpg затем поменял расширение на ico, там где вопросы в конце ??????.ico
-
Анатолий
23.01.2012 13:52
мммм ничего не получается:( не появляется картинка и все тут!!!
-
Мисс Удача
07.02.2012 10:13
Ну в таких случаях мне помогает всё откатить назад и сделать ещё раз — вы просто в чём-то ошиблись
-
Елена
02.07.2012 10:40
Огромное Вам спасибо! Самое понятное, доступное объяснение из всех !!!
Получилось сделать за 2 минуты!
А то мучила и себя и хостинг… -
Анна
25.07.2012 09:51
Спасибо за пост) А кто подскажет — Что делать, если не хватает прав на редактирование header.php.
Сообщение под header.php. :
(«Чтобы сохранить изменения, нужно сделать этот файл доступным для записи. «) -
Мисс Удача
07.08.2012 14:57
Это настройка доступности файлов на хостинге. Тут помочь не могу у меня хостинг для блондинок я с этим всем не разбиралась
-
Андрей
03.09.2012 14:06
Все доходчиво и просто! Спасибо за пост. Все манипуляции заняли 15 минут (включая рисование самого фавикона) Рисовал онлайн — ресурсов море. Файл ico.
-
Марина Суздалева
23.10.2012 23:47
Эх, вроде и не блондинка, а ничего не получается. 3 раза перечитала инструкцию, не появляется картинка и все тут
-
Warder
15.05.2013 07:12
Спасибо, блондиночка. У меня получилось. С первого раза не вышло. Оказалось, что при копировании ваши кавычки не сошлись с моими, установленными в программном тексте. Так что у кого с первого раза не получиться поменяйте кавычки по стилю на такие как в тексте (там куда вы копируете вот это
я поменял на такие » и все получилось
-
Андрей
15.05.2013 13:55
Да. Точно так. Тоже кавычки пришлось менять.
-
Ангелина
06.06.2013 17:20
Ни в какую, и кавычки меняла и три раза переделывала. Кстати у вас тоже фавикона нет. Во вкладке не отображается.
Обратные ссылки
Оставить комментарий
Ну тут такие фразы не для блондинок точно=)