В сегодняшнем уроке я буду Вам рассказывать об иконках Favicon (фавикон). Я Вам покажу как сделать favicon.ico для сайта (или для блога, тут без разницы) и покажу как можно вставить фавикон.
Наверняка, многие еще не знают о том, про какое “чудо” я говорю. Проще говоря, Favicon (фавикон) это картинка (иконка), которая стоит в браузере перед адресом сайта. Наглядно покажу Favicon моего блога:
Эта иконка является своеобразным логотипом Вашего блога. Поэтому к созданию фавикона нужно отнестись со всей ответственностью. Помните, он может выделить Ваш блог среди других.
План урока:
- Создание Favicon с нуля.
- Создание фавиконки из готового изображения.
- Сервисы с готовыми иконками для сайта.
- Прикрепление полученной иконки к сайту.
Как создать Favicon (фавикон) с нуля
Есть один очень удобный сервис. Он имеет адрес favicon.cc. Этот сервис по построению фавиконок выглядит так:
Чтобы нарисовать favicon достаточно выбрать цвет и просто рисовать. Если Вы нарисовали что-то, где-то не так, для удаления фрагмента рисунка выберите инструмент transparent (поставьте галочку) и “тыкайте” на пикселы (“квадратики”), которые нужно убрать:
Я нарисовал следующий фавиконку:
Больше всего в favicon.cc мне понравилось то, что можно мгновенно видеть результат своего труда в оригинальном размере. Для этого нужно немного спуститься вниз в раздел Previw:
Или же можно прямо в браузере (Opera, Firefox, Internet Explorer и т.п.) посмотреть итог работы:
Теперь нам нужно просто сохранить иконку сайта на свой компьютер. Для этого нужно нажать на кнопку “Download Favicon”:
Создание favicon (фавикон) из готового изображения
Допустим Вы не хотите создавать с нуля иконку для своего сайта, а хотите сделать ее из уже готового изображения. В этом случае для Вас будет удобен сервис для создания фавиконки favicon.ru.
Сервис на русском языке, поэтому у Вас не должно возникнуть проблем. Просто указываете картинку, которую Вы хотите видеть в роли иконки Вашего сайта (кнопка “Обзор”), потом нажимаете “Создать favicon.ico”, а дальше уже “Скачать favicon.ico”.
Список сервисов с готовыми favicon (фавикон)
Также можно просмотреть уже готовые иконки, попробовать найти что-то подходящее. Я предлагаю следующие сервисы:
- iconj – Огромная база фавиконок;
- favicon.cc – Да, в этом сервисе тоже есть уже готовые фавиконки.
- Favicon.co.uk – Можете глянуть и сюда, вдруг найдете что-то подходящее.
- audit4web – Большое количество иконок для сайта.
Как сделать Favicon (фавикон) для сайта
После того, как мы создали фавиконку, нужно ее “прикрепить” к сайту. Для этого нужно сделать следующее:
- Полученный favicon.ico скопировать в корень блога (т.е. в папку, где находятся папки wp-content, wp-admin и т.п.). В моем случае эта папка называется public_html:
- Далее открываете файл header.php (напомню, он находится в папке темы Вашего блога). И прописываете в этом файле следующий код (главное условие: код должен быть после тега <head> и до </head>):
<link rel="shortcut icon" href="http://адрес_сайта/favicon.ico" type="image/x-icon" /> <link rel="icon" href="http://адрес_сайта/favicon.ico" type="image/x-icon" />
Естественно в 2 местах слова адрес_сайта меняете на адрес СВОЕГО блога. - У меня получилось следующее:
- Теперь сохраняете файл header.php, обновляете на сервере и наблюдаете за результатом:
Как видите, все “встало” правильно. Надеюсь у Вас тоже проблем не возникло. Будут вопросы, пожалуйста, задавайте их в комментариях. А то мне на почту ссыпатся письма с вопросами технического характера, я не могу успевать отвечать на все.
P.s. Постоянные читатели, наверное, заметили, что я уроки WordPress стал давать немного реже. Возникла небольшая проблема со временем. До какого периода это продлиться? Честно, не знаю. Но минимум раз в неделю буду стараться писать уроки (по возможности – чаще). Поэтому лучше Вам, уважаемый читатель, для удобства подписаться на RSS блога Новичка.
P.s.s. Открыл новый раздел Ученики. Новички, которые создают блог с нуля, это отличная возможность “засветиться”!
_____________________________________________
Следующий урок: Урок 51 Регистрация в поисковиках.
_____________________________________________
Постовой. Не хотите купить органайзер? Тогда интернет-магазин органайзеров к Вашим услугам! Лично я не представляю свою жизнь без хорошего органайзера.
Что-то при открытии страницы «Контакты» я никаких способов связи не нахожу. Хотела попросить добавить мой блог в список учеников: вордпресс я осваивала по вашим урокам.
И по поводу иконки хотела спросить. Когда я делала статический сайт, то достаточно было просто положить иконку в корневой каталог, она отображалась для любой страницы. А почему с вордпрессом так не получается сделать?
1) Насчет «Контакты»: спасибо, исправил. После восстановления БД не успел восстановить.
2) По поводу попадания в «Ученики». К сожалению, я должен Вам отказать, потому что Ваш блог даже «старее» моего. А я собираю в разделе блоги, которые делали блоги с нуля.
3) По поводу иконок. Все-таки лучше прописать адрес до иконки в файле header.php
мистика какая-то...
изначально я тоже поместил фавикон в корень и в опере он прекрасно отображается... а в мозиле нет...
вставил код по Вашему уроку и... все тоже самое в опере нормально в мозиле нет
Ухты, очень классная чтатья. Помню в свое время я какраз искал подобную статью, что-бы можно было понять как это сделать даже человеку который ничего не понимает в этом. Но тогда я такой статтейки не нашел и долго парился с этим фавиконом.
В header можно прописать хоть анимированный gif, и в большинстве браузеров он будет работать, а favicon.ico будет в результатах поиска Яндекса отображаться.
Все получилось, спасибо.
Благодарю за то, что все подробно разжевали. Надо будет все-таки сделать себе favicon, а то блогу уже полтора года, а у меня никак руки не доходят.
А как обстоят дела с показов фавикона на разных браузерах?
Я сам пользуюсь фаерфоксом, на нем все работает. но на ИЕ почему то нет. на опере вроде как тоже...
Честно, не знаю почему у Вас в ИЕ не показывает фавиконку... У меня почему-то все норм. Попробуйте очистить кэш, может поможет...
Спасибо!!!Супер расписали
Ошиблась при установки фавикона, теперь не могу исправить, что посоветуете?
Просто удалите фавикон и все.
Большое спасибо за статью)) ... Наконец-то мой сайт обзавелся иконкой =) ...
Здорово, спасибо!
Решил немного дополнить вашу статью.
Просто ссылкой на сайт, где тоже можно сделать фавикон.
Вот ссылочка —
Там для того, чтобы сделать фавикон нужно просто найти изображение соответствующее у себя на компе и этот сервис сгенерирует из этого изображения фавикон.
Вот вроде простой урок, а у меня ничего не вышло. Уже куда только не пробовал втыкать код — ни черта не видно картинку в итоге.
И ссылка у вас какая-то подозрительная. Написано следующий урок «регистрация в поисковиках», а ведёт на эту же страницу.
Спасибо, исправил.
Картинка появилась сама собой после перезагрузки браузера. Наверно это из-за кэширования.
Я скачала понравившейся фавикон, потом его скопировала и вставила в нужную папку вместо того, что там был и все заработало.
Зачем что-то в коде писать не поняла. По-моему так куда проще, зачем таким сложным путем идти?!
У вас просто уже был фавикон и было что поменять. А в коде писать надо когда никакого фавикона нет изначально.
Вроде так.
Спасибо, Петр. Тоже сделал себе фавикон. Только я код не прописывал, а фавикон закинул в корневой каталог и он заработал автоматически.
в коде все прописано, фавикон в корень добавлена. изображение не появляется(
1. Очистите кэш браузера или просто перезапустите его.
2. Попробуйте посмотреть другим браузером.
3. Если ставили анимированный фавикон, то помните, что не все браузеры его поддерживают.
Если не помогло, ищите ошибку.
Я все сделала так как написано,но иконка появилась только на главной странице, на остальных ее нет(
F всё таки установка анимированного фавикона как-то ведь отличается? читал где-то что нужно закидывать в папку и анимированный и обычный фавикон, потом прописывать все два... но у меня лично ничего так и не работало. Петр или кто либо еще, могли бы Вы подсказать как всё таки правильно устанавливать анимированный фавикон.
очень понравилась статья.все рассказано замечательно.вроде все сделала как написано.но только этот фавикон видно если я нахожусь в панели управления сайтом а выхожу на главную и все нет ни чего.как можно это исправить?
Вы фавикон «закинули» в корень блога? Туда же где и wp-content и т.п.?
да закинула в папку /public_html я уже туда кинула и favicon.ico еще на вся кия случай favicon.gif все равно водно его только на админ странице а если на другие переходишь то не видно .и код вроде правильно вставила в папку
/public_html/wp-content/themes/kremjam и там в header.php
и кажется там на место вставила гляньте может что не так сделала проверьте пож.эт единственное место где я нашла что то подобное и до ): может все таки не туда я его вставила?
вставила часть этого кода где все прописывалось а он почему то не отпечатался в сообщении хотела чтоб вы проверили(((( как его написать сюда чтоб вы посмотрели?
КОгда оставляете комментарий нажмите на «Код», вставьте сам код и нажмите на /код
Спасибо.все как то само разрешилось ))))))через 2 дня стал везде появляться на любой странице.даже не знаю с чем это связанно но все стало работать))))) 0
Вам нужно было посмотреть в другом браузере, так как выводилось, наверняка, из кэша браузера...
А почему favicon может быть не виден в поиске Яндекса. Всё установила, всё отображается, а вчера обнаружила, что в поиске Яндекса у моего сайта нет фавикона. Очень интересно почему?
Зачем мудрить, есть плагин специальный для этого)
Какой?
Спасибо Пётр! Всё работает!
Хорошая статья, доступная каждому, как для новичка , так и для профи.
А почему favicon может быть не виден в поиске Яндекса. Всё установил, всё отображается когда находишься на сайте, а когда вбиваешь в поисковик, то тогда фавикона нет. Очень интересно почему? Заранее благодарен за ответ
Попробуйте фавикон разместить прямо в корне блога, там же, где wp-content и т.п.
помогло пасиб
Отличный сайт, очень много полезной информации для начинающих
Подскажите как прописать адрес для Favicona в файл header.php и где этот файл надо сохранить
Заранее благодарен
Пропала возможность писать комментарии на блоге, в настройках обсуждения ничего не изменилось, кто нибудь сталкивался?
Может в шаблоне что-то меняли?
Ничего не делал, даже посты не писал, только закинул в корневую папку блога фавикон, попробовал убрать, но толку не было. Подозреваю, что дело не в нём...
К сожалению, я так не могу сказать, что случилось. Потому что не знаю причины... Попробуйте поменять шаблон и посмотреть: проблема осталась или нет (так узнаете, что дело в коде шаблона или нет).
Не пойму в чем причина, все работало и показывало, просто решил поменять икону. В итоге ничего не показывает. Где ошибка: <meta
почему в поисковике не видно favicon,в адресной строке,на вкладках отображается,а в поисковике нет.
favicon закинул уже больше месяца назад.
Фавикон еще обязательно должен лежать в «корне» блога, тогда он появится в поисковиках.
Сделал фавикон для своего блога по данному уроку. Спасибо!
Тоже сначала промучался. Вроде все правильно сделал, а иконка не появлялась. После часовой борьбы с кодом и файлами все получилось.
Так что могу дать в качестве дополнения к статье ответ:
Не меняйте название скачанной с сервиса картинки, либо изменяйте в коде название на ваше
Спасибо! Все установилось.
ЗЫ А вот начальный тег я у себя так и не нашел... Надо на свежую голову еще поискать, гн мог же он пропасть? )))
Здравствуйте Петр!
Создал себе анимированный фавикон, но к сожелению анимацию настроить не могу, отображается только один 1 фрагмент анимации.
Может в вашем багаже знаний найдется инструкция как прописывать анимацию?
По-моему анимация фавикона работает только в firefox. Точно не знаю, опыта работы с анимированными фавиконами нет. И зачем оно вам, лучше сделайте статичной.
здравствуйте!
ни с того, с сего в названии сайта рядом с фавиконкой добавилось «Part 1»...
т.е. раньше было просто название, а сейчас это выглядит так: «Название сайта — Part 1». Что это может быть?? Как убрать?
проверила в настройка Platinum SEO и в общих настройках, там все правильно. Что за «Part 1» это может быть?((
Все в Platinum какая-то ошибка, наверное. Попробуйте отключить данный плагин и посмотреть на вывод.
День добрый Пётр и все остальные. Вот вопрос . уже с месяц как сделал иконку по вашему уроку. Она работает я её вижу . Но вот когда я пишу в поисковике запрос и нахожу свой блог , то рядом с блогом нет ничего а у меня на панели в верху есть как так ? у всех есть а у меня нет...
Файл фавиконки должен лежать в КОРНЕ блоге (там, где папки wp-admin, wp-config и т.п.). И через некоторое время он появится в поисковиках.
Здравствуйте. ни как не могу понять куда мне тут что вставлять? там как то по другому все в отличие от вашего урока <link rel="stylesheet" href="" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title=" RSS Feed" href="« />
<link rel="pingback" href="» />
буду благодарен если поможете.
Добавьте код, который дается во втором шаге и все.
Оо появилась наконец то . Пришлось подождать 2 месяца , странно...
А к чему вообще все эти заморочки? Есть специальный плагин Favicons , который решает все проблемы, и никуда не надо вставлять коды. К тому же имеет свои предустановленные иконки для тех, кто не может нарисовать сам, достаточно просто отметить понравившийся .
тут я не согласен. лучше нарисовать свой уникальный . чем шаблон какой то.
Так я и не говорю что надо пользоваться именно шаблоном ). Это удобно для тех, кто не умеет рисовать сам.Если есть свой нарисованный фавикон, то в плагине просто указывается путь к файлу, обычно корень сайта.
Спасибо большое. очень помогло. моему сайту еще месяца нет. Буду записываться к Вам в ученики...
Посмотрел, понравилось, оставил коммент.
А у меня все получилось! Петр, спасибо большое за урок!
Спасибо за урок. Фавикон сделал и залил по вашей методике. Класно. Но почему-то в поисковой выдаче его нет. Или это зависит от Яшки
Здравствуйте,Петр. Все-таки Ваш ресурс,по-моему, лучший по сравнению с другими для новичков, так как все, о чем у Вас написано (и фавикон) получается на своем блоге с первого раза. Все описываете доступно и понятно. Спасибо.
Здравствуйте!
У меня возник вопрос по поводу установки фавикона на сайт .
Создала иконку на favicon.cc. Далее действовала по вашей инструкции. В Хроме иконка отображается. В Мазиле — нет.
И еще — сделала иконку из 2 кадров. В предосмотре кадры меняются, а в Хроме — статичны.
Сделал всё как вы написали, но ничего не отображается. Возможно у меня хостинг тупит, может быть потом всё будет...