В сегодняшнем уроке я буду Вам рассказывать об иконках 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, а то блогу уже полтора года, а у меня никак руки не доходят.
А как обстоят дела с показов фавикона на разных браузерах?
Я сам пользуюсь фаерфоксом, на нем все работает. но на ИЕ почему то нет. на опере вроде как тоже…
Честно, не знаю почему у Вас в ИЕ не показывает фавиконку… У меня почему-то все норм. Попробуйте очистить кэш, может поможет..
Спасибо!!!Супер расписали
Ошиблась при установки фавикона, теперь не могу исправить, что посоветуете?
Просто удалите фавикон и все.
Большое спасибо за статью)) .. Наконец-то мой сайт обзавелся иконкой =) …
Здорово, спасибо!
Решил немного дополнить вашу статью.
Просто ссылкой на сайт, где тоже можно сделать фавикон.
Вот ссылочка – http://www.cy-pr.com/tools/favicon/
Там для того, чтобы сделать фавикон нужно просто найти изображение соответствующее у себя на компе и этот сервис сгенерирует из этого изображения фавикон.
Вот вроде простой урок, а у меня ничего не вышло. Уже куда только не пробовал втыкать код – ни черта не видно картинку в итоге.
И ссылка у вас какая-то подозрительная. Написано следующий урок “регистрация в поисковиках”, а ведёт на эту же страницу.
Спасибо, исправил.
Картинка появилась сама собой после перезагрузки браузера. Наверно это из-за кэширования.
Я скачала понравившейся фавикон, потом его скопировала и вставила в нужную папку вместо того, что там был и все заработало.
Зачем что-то в коде писать не поняла. По-моему так куда проще, зачем таким сложным путем идти?!
У вас просто уже был фавикон и было что поменять. А в коде писать надо когда никакого фавикона нет изначально.
Вроде так.
Спасибо, Петр. Тоже сделал себе фавикон. Только я код не прописывал, а фавикон закинул в корневой каталог и он заработал автоматически.
в коде все прописано, фавикон в корень добавлена. изображение не появляется(
1. Очистите кэш браузера или просто перезапустите его.
2. Попробуйте посмотреть другим браузером.
3. Если ставили анимированный фавикон, то помните, что не все браузеры его поддерживают.
Если не помогло, ищите ошибку.
Я все сделала так как написано,но иконка появилась только на главной странице, на остальных ее нет(
F всё таки установка анимированного фавикона как-то ведь отличается? читал где-то что нужно закидывать в папку и анимированный и обычный фавикон, потом прописывать все два… но у меня лично ничего так и не работало. Петр или кто либо еще, могли бы Вы подсказать как всё таки правильно устанавливать анимированный фавикон.
очень понравилась статья.все рассказано замечательно.вроде все сделала как написано.но только этот фавикон видно если я нахожусь в панели управления сайтом а выхожу на главную и все нет ни чего.как можно это исправить?
Вы фавикон “закинули” в корень блога? Туда же где и wp-content и т.п.?
да закинула в папку /public_html я уже туда кинула и favicon.ico еще на вся кия случай favicon.gif все равно водно его только на админ странице а если на другие переходишь то не видно .и код вроде правильно вставила в папку
/public_html/wp-content/themes/kremjam и там в header.php
и кажется там на место вставила гляньте может что не так сделала проверьте пож.эт единственное место где я нашла что то подобное и до ): может все таки не туда я его вставила?
вставила часть этого кода где все прописывалось а он почему то не отпечатался в сообщении хотела чтоб вы проверили(((( как его написать сюда чтоб вы посмотрели?
КОгда оставляете комментарий нажмите на “Код”, вставьте сам код и нажмите на /код
Спасибо.все как то само разрешилось ))))))через 2 дня стал везде появляться на любой странице.даже не знаю с чем это связанно но все стало работать)))))0
Вам нужно было посмотреть в другом браузере, так как выводилось, наверняка, из кэша браузера…
А почему favicon может быть не виден в поиске Яндекса. Всё установила, всё отображается, а вчера обнаружила, что в поиске Яндекса у моего сайта нет фавикона. Очень интересно почему?
Зачем мудрить, есть плагин специальный для этого)
Какой?
Плагин так и называется – favikon
Лишнии плагины wordpress – это дополнительная нагрузка на хостинг. Поэтому гораздо проще пойти этим путём, чем вешать лишнюю приблуда на свой сайт.
Спасибо Пётр! Всё работает!
Хорошая статья, доступная каждому, как для новичка , так и для профи.
А почему 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 кадров. В предосмотре кадры меняются, а в Хроме – статичны.
В Хроме у меня тоже появилась сразу, а в Мазиле намного позже, может через месяц. А в поисковике Яндекс еще позже.
Сделал всё как вы написали, но ничего не отображается. Возможно у меня хостинг тупит, может быть потом всё будет…
Добрый день Петр, этот урок выполнил уже очень давно, теперь решил поменять иконку, поменял, норм встало что в яндексе вышла новая, на блоге стоит новая все норм, но вот когда захожу в админку там торчит старая иконка хоть и я ее стер через файлзиллу, вот уже недели 2 такое. кэш вычистил все чисто а она стоит! Понимаю это не критично но меня просто это немного раздражает, как ее можно убрать чтобы на ее место встала новая иконка?
Может сама уберется со временем? У меня убралась.
Спасибо. Все сделал по вашей инструкции и получилось с первого же раза. Еще раз спасибо 🙂
Спасибо, замечательная инструкция, у меня получилось!
Спасибо!Очень выручил!
Подскажите как можно заменить фавикон?А то старый у меня не удаляется никак, как его убрать можно и заменить?
С помощью ФТП соединения удалить и создать новый.
Спасибо. Отличный урок. Сделал уже на двух сайтах и все сразу получилось!!!
Спасибо за статью! Если честно , замучался с вставкой фавикона.Нашел эту статью, сделал все по инструкции , обновил страницу и …. вот пишу благодарность))
Спасибо Петр! я поставил фавикон ))) До этого оказывается я не правильно устанавливал
О! Супер, Пётр, твоя статья в TOP’е. Спасибо, очень ей помог.
Петр, может поможите и мне разобраться. У меня иконка в браузере отображается, в закладках тоже, а вот в поисковике нет. куда я ее только не ставила и в корневую папку сайта и в папку темы (imedge) и как у Вас написано. Не могу понять в чем причина. Можите посмотреть сами grinapteka.ru. Что делать?
К сожалению, не знаю. Если иконка действительно в корне, я не знаю, в чем может быть проблема.
Жаль
У меня такая же проблема. И в админке и в гугл вебмастере и на самой закладке есть фавиконка. А Яндекс не хочет ее показывать в выдаче…. Может еще не проиндексировал? хотя сайт уже по некоторым ключевикам показывается яндексом
где то видел скрипт где можно менять каждый час иконки фавиконов…вы такой не встречали?
Подобные скрипты лучше не ставить. Читатели должны привыкнуть к Вашей фавиконке.
Далал в .png опера только высвечивала, в .ico заработала в мозиле, iexplorer тупит как обычно не хочет показывать. Автору спс за работу.
И у меня не получилось.
Всё сделала как написано, и кэш почистила, и перезагрузила.
Но ни в одном не отображается фавикон.
А стал отображаться значок wordpress.
В чём ещё может быть причина.
Сделал всё, как в шпаргалке: фавикон в броузере FF присутствует, а вот в поисковиках – не вижу. Возможно, что для Яндекса нужно какое-то время…
Но за информацию – спасибо.
Отличная статья! Все получилось. Только фавикон не сразу стал показываться, а после перезагрузки сразу увидела и обрадовалась. Спасибо автору сайта!
Рад был помочь.
Петр, все замечательно получилось! Спасибо!
У меня все получилось. На сайте favicon.cc создала свою иконку. Спасибо Вам большое! Творческих успехов!
у меня не получилось, почему-то((( я скачала шаблон с интернета и там уже стояла иконка и когда я делаю все как вы пишите…у меня ничего не получается(((
Петр, здравствуйте! По вашему уроку решила поставить фавикон. Вроде бы все делала так, как написано, но видимо,как всегда, что-то не так.У меня иконка вообще не появилась( кэш чистила недавно) и сайт у меня получился для слепых – очки не надо надевать – я в шоке, смешно и плакать хочется. Сижу над этим сайтом дням, получается с трудом. На ваши уроки наткнулась случайно – для новичков даже очень замечательно,все доступно и понятно. Посоветуйте, как мне быть, где и что исправлять.Возможно укажите на мои ошибки в сайте.
Пётр, а что же, раздел Ученики больше не существует? Не могу найти!
Нет, больше нет.
А я делал себе иконку в фотошопе 🙂 Менял чисто для интереса, что б проверить как оно, с новой иконкой. В итоге так и осталась та самая пробная версия )
В новой версии вордпресса в настройках темы все есть просто загружаешь любую картинку и все
Здравствуйте Пётр! Скажите, пожалуйста, почему на этом Вашем сайте (или блоге) нет фавикона-иконки для сайта?
Он есть.
Добрый день, Петр! Очень хороший и полезный сайт, открыл для себя много нового! И хотел бы отметить, после добавления кода в header, валидатор ругается на точку с запятой после адреса сайта.