Favicon WordPress – установка значка ico на сайт. Фавикон wordpress
Favicon WordPress – установка значка ico на сайт
Для визуального отличия любого сайта в Интернете используется значок с расширением ico и называется favicon. Вот так favicon для моего сайта на WordPress выглядит в окне обозревателя:
Теперь о том, как создать и установить значок favicon на сайт WordPress.
Прежде всего нужно подобрать рисунок, который хотите, чтобы отображался в качестве favicon. Рисунок можно брать, в принципе, любой, однако желательно, чтобы он был в виде квадрата, поскольку отображаться favicon в окне обозревателя будет с размерами 16*16 пикселей.
Стоит также обратить внимание на то, что поскольку значок favicon достаточно маленький, – то и рисунок следует подбирать довольно простой, с отсутствием мелких деталей в изображении. Можно для favicon использовать рисунок с отображением всего одной буквы, например как у поисковой системы Яндекс:
Рисунок можно и вручную нарисовать в фотошопе, а можно для этих целей поискать в интернете готовые варианты favicon , либо другие готовые варианты значков.
Предположим, что вам понравился рисунок, который вы хотите использовать в качестве favicon, форматом 300*250, такой вариант и у меня был с моим значком favicon, – он не был квадратным.
Для этого заходите в Photoshop, и на вкладке панели задач нажимаете «Изображение» – «Размер холста», после этого задаете размер холста с равными сторонами, например, 300*300. Если больше ничего в рисунке редактировать не нужно, то просто теперь изменяете размер изображения до 16*16 или 32*32 или 64*64.
Я использовал последний вариант, а именно изображение для favicon сделал размером 64*64. Здесь стоит также обратить внимание на то, что чем больше размер изображения, тем дольше будет загружаться вся страница сайта в окне обозревателя, хоть это и совсем незначительно влияет на скорость загрузки (практически не заметно) – однако не стоит не учитывать данного факта, и если у сайта приоритет сделан не на качество изображений и дизайн , а на смысловую нагрузку и значимость контента сайта, то лучше, конечно, использовать значок favicon размером 16*16 или 24*24, или 32*32.
Создание значка favicon для WordPress с расширением ico.
Теперь, когда готов рисунок с равными сторонами (т.е. в виде квадрата), этот рисунок нужно сохранить с расширением ico (не jpg, png, а именно с расширением ico). Для этого можно воспользоваться онлайн сервисом по созданию favicon, который находится по адресу favicon.ru
Нужно иметь в виду, что этот онлайн сервис создает favicon размерами 16*16, а значит изображение favicon будет не сильно отличаться качеством, но если заданный рисунок достаточно прост, то можно и воспользоваться данным сервисом.
Если же размер favicon 16*16 вас не устраивает, придется создать его в фотошопе (photoshop). По умолчанию в фотошопе не предусмотрено создание favicon, поэтому для этого придется установить плагин в саму программу. Плагин для создания favicon в фотошопе можно скачать тут:
После этого, скачанный плагин по созданию favicon, необходимо закачать в программу Photoshop, в папку по адресу: C:\Program Files\Adobe\Adobe Photoshop CS5\Plug-Ins\File Formats
Затем, заходите в программу Photoshop и исходный рисунок вначале изменяете до желаемых размеров 16*16 или 32*32 (или 64*64- как у меня), и потом, при открытом рисунке, который хотите сделать как favicon, нажимаете в программе Photoshop в панели задач «сохранить как», и в поле «тип файлов» выбираете «ICO (Windows Icon) (*.ICO) » , как показано на рисунке ниже:
а в поле «Имя файла» сохраняете рисунок под названием favicon,- именно под таким названием и никак иначе.
Прикрепление favicon WordPress к сайту.
По этому поводу есть два варианта действий:
1) Заливаете в корень вашего сайта созданный значок favicon.ico, далее открываете в дизайне используемого вами шаблона WordPress файл header.php и между тегами <head> и </head> после тегов начинающихся на <link rel= ……. /> дописываете две строчки:
&lt;link rel=»shortcut icon» href=»favicon.ico» type=»image/x-icon» /&gt; &lt;link rel=»icon» href=»favicon.ico» type=»image/x-icon» /&gt;2) Второй способ, после которого у меня значок favicon.ico начал отображаться на всех страницах сайта WordPress:
- закачиваем значок favicon.ico не в корень сайта, а в папку используемого шаблонного дизайна WordPress, по адресу /wp-content/themes/название-шаблона;
Именно после применения второго варианта, значок favicon WordPress у меня начал отображаться на всех страницах сайта.
Всем удачной установки значка favicon WordPress на ваш сайт или блог!
xn--80ajdviepev.xn--p1ai
Как установить 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 на сайт для вас не составит никакого труда. Выбирайте самый понятный для вас путь и действуйте!
stacyblog.ru
Favicon для блога на WordPress
Каждому хочется быть уникальным. Мы заводим автономные блоги, чтобы выделиться из рамок какой-то блог-платформы? выбираем уникальное оформление. И большинство для создания и администрирования блога используют WordPress. Вот в нём мы сегодня и сделаем для своего блога favicon - логотип ресурса - маленькую картинку, отображаемую слева в адресной строке и на вкладке в браузере.
В сайтах на uCoz и Blogger по умолчанию отображаются логотипы этих систем, в WordPress - неприглядный белый квадрат. Кстати, о том, как сделать favicon на Blogger'e и я уже писал. Там же вы подробней прочтёте об этой иконке, как её сделать, куда загрузить. С wordpress проблемы, куда загрузить favicon у вас не должно быть - грузим её на тот же хостинг, где и блог. Чем меньше приходится обращаться сайту на другие сервера, тем он быстрее и стабильнее работает.
На uCoz достаточно зайти в файловый менеджер панели управление и загрузить картинку с именем favicon.ico. Система сама подставит её в качестве favorite icon. На месте имеются и пояснения - дружественность интерфейса на uCoz всегда радовала.
На WordPress проблему установки можно вообще решить плагином.
Плагин Favicons прекрасно справляется со своей небольшой задачей. На выбор предоставляется возможность использовать свой путь к файлу иконки, свой аватар из системы Граватар или одну из множества предустановленных картинок. Последние как-то не впечатляют.
Но я сторонник идеи не грузить сайт коллекцией плагинов. Тем более для таких простых функций. Поэтому идём в админку WordPress => Дизайн (Внешний вид) => Редактор. В редакторе открываем файл header.php и между открывающим тегом head и закрывающим /head вставляем следующий код:
<link rel="shortcut icon" href="путь_до_файла_иконки" type="image/x-icon">
<link rel="shortcut icon" href="путь_до_файла_иконки" type="image/x-icon"> |
Теперь, правда, favicon не отображается при нахождении в панели администратора. Но это увидите только вы - на всех страницах сайта иконка прекрасно работает.
Сегодня уже странно видеть ресурс без привычного логотипа на вкладке браузера. Не забывайте, что он также служит простой задаче сделать ваш блог запоминающимся. Так что скоро мы поговорим как сделать не просто хороший favicon, а анимированный.
Также вам может быть интересно настройка favicon для блога на Blogger.
desiter.ru
Что такое 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
pressdev.ru
Устанавливаем фавикон на WordPress без плагинов
Приятного времени суток, я снова рад вас приветствовать на страницах своего блога. Сегодня бы хотелось поговорить о оптимизации блога на WordPress, а точнее о установке на него фавикона.
Что такое фавикон?
Favicon — это иконка или картинка, которая отображается в сниппете, рядом с адресом сайта и в закладке.
Фавикон не влияет на сео оптимизацию, но помогает привлечь взгляд к вашему сниппету в выдаче поисковика, и просто найти ваш сайт среди кучи открытых вкладок.
В общем, советую его делать, лишним он не будет.
Как сделать фавикон для WordPress
Процесс создания фавикона для сайта на WordPress, ни чем не отличается от создания иконки для других цмс)))
Для начало нужно приготовить картинку. Советую не использовать мелких деталей так как при размере иконки их будет не разглядеть.
В общем фавикон — это лого вашего сайта. Если не хватает фантазии просто сделайте эмблему из букв названия вашего сайта (такой фавикон можно увидеть в моем блоге). Сделайте прозрачный фон и сохраните в формате png он поддерживает прозрачность.
Если ваш редактор способен сохранять в формате .ico то не парьтесь и сохраняйте сразу в нем, фавикон готов.
Если редактор не поддерживает сохранения в таком формате, то предлагаю воспользоваться онлайн сервисами.
- favicon.ru
- favicon.cc
- cy-pr.com
- genfavicon.com
- tools.dynamicdrive.com
- favicon-generator.org
- faviconfactory.com
- shaheeilyas.com
- degraeve.com
- michurin.com.ru
Думаю, подробно рассказывать по работе с сервисами не нужно, вы и сами разберетесь как нажать пару кнопок.
Устанавливаем фавикон на WordPress
Вот мы наконец то и подошли к моменту когда устанавливаем фавикон на WordPress без плагина.
В первую очередь загружаем фавикон к себе на сайт. Я гружу фавикон обычно в корень, но тут уже момент на любителя.
Далее идем в редакатор, располагается он в админке WordPress по адресу [внешний вид => редактор]
Находим файл header.php и переходим на его правку.
Далее находим тег <head> и сразу после него пишем строки
<link rel="icon" href="ссылка на ваш фавикон" type="image/x-icon" /> <link rel="shortcut icon" href="ссылка на ваш фавикон" type="image/x-icon" />
<link rel="icon" href="ссылка на ваш фавикон" type="image/x-icon" /> <link rel="shortcut icon" href="ссылка на ваш фавикон" type="image/x-icon" /> |
После чего сохраняем изменения, нажатием кнопки «обновить файл».
Могу вас поздравить, вы установили фавикон на сайт WordPress без каких либо плагинов.
Музыкальная пауза / Zaz — Je Veux
Подпишитесь и получайте новые статьи мгновенно на электронную почту
the-sever.ru
Как создать и установить Favicon на WordPress
Как сказал один мой друг, Велкоме! В этом уроке я расскажу, как и где создать оригинальный Favicon и установить его на свой блог. Для тех, кто не знает что такое. Favicon (Значок) – это миниатюрная картинка размером 16×16 пикселей. Это та самая картинка, которую вы видите на вкладке браузера, открывая любой сайт, на котором установлена собственно сама картинка. Для чего она нужна? В какой-то степени у этой маленькой по размерам картинки, по сути, большое значение. Ее можно считать некой визитной карточкой для блога.
Так повелось, что в сети среди блоггеров ей уделяется большое внимание, соответственно она становится, запоминаемой вдвойне. Например, когда я открываю кучу вкладок, я ориентируюсь по Favicon, а не по заголовкам. Так как заголовки могут повторяться в точности до, а вот Favicon у всех почти уникален. Это первый момент, когда она, дальше буду называть ее иконка, становится полезной.
Второй момент это то, что в поисковой выдаче Яндекса эти иконки сайтов отображаются. В какой-то степени она повышает кликабельность. Конечно не столько сильный эффект, как например, от отображения фотографии автора в выдаче Google. Но если постараться и сделать привлекательную иконку, то она станет эффективней вдвойне, как и в повышении кликабельности в выдаче, так и в визуальном запоминании людьми. С назначением разобрались, теперь поговорим о том, как сделать саму иконку. Кстати вот как выглядит в выдачи Яндекса:
Любителям поработать в программе Adobe PhotoShop, которые возможно подумали, что делают его в фотошопе, скажу, что для работы с форматом .ico, а иконка именно в таком формате, в фотошоп нужно добавить дополнительный плагин. Если честно в этом я не разбирался. Так как нашел простой выход из этой ситуации. В интернете есть отличный сервис, который позволяет из любой картинки сделать Favicon. Для простоты действий советую просто создавать нужную картинку размерами 16×16 пикселей в фотошопе, сохранить в формате .JPG и уже просто поменять формат через этот сервис. Почему именно так? Пробовал я как то ставить этот плагин, но сохраняя в формате .ico, но сайт категорически не воспринимал картинку. Может у меня руки кривые, но все-таки с сервисом проблем меньше.
Создаем простой Favicon
Для начала переходим по адресу favicon.ru и перед нами сразу открывается окно редактора. Инструментов мало, но для создания простенькой иконки подойдет.
Далее рисуем, картинку, которую мы хотим. К сожалению, я рисую плохо и вас научить не смогу, но вот что то такое у меня получилось :):
Далее, после того как иконка готова, нажмите на кнопку скачать:
После чего мы получаем свою картинку. Кстати прямо на сайте можно посмотреть чуть ниже окна редактора как будет выглядеть иконка непосредственно в браузере:
После того как все действия проделаны у нас будет готовая иконка. Теперь установим его на WordPress. Тут есть одна особенность. Возможно, ваш шаблон не поддерживает установки Favicon. Посмотрите в настройках шаблона, нет ли где этого пункта. Если нет такого пункта, тогда идем в код шаблона. Прежде всего, скопируйте полученный Favicon на хостинг в любой удобное место, а лучше всего в корень сайта. Оперируемый пациент файл Header.php. Откройте этот файл в программе Notepad++ и вставьте туда этот код:
Код вставлять обязательно после открытия тега head:
Далее файл нужно будет сохранить. Открываем сайт в браузере, если иконка не сменилась, очистите кеш. В выдаче Яндекса она появится не скоро, у меня около месяца, а то и больше не появлялась. Все после этого у вас есть свой оригинальный Favicon. Вдобавок список сервисов, которые позволяют создание иконок:
- http://www.chami.com/html-kit/services/favicon
- http://www.webscriptlab.com/favicongenerator.php
- http://www.favicongenerator.com
- http://tools.dynamicdrive.com/favicon
- http://www.dagondesign.com/tools/favicon-generator-tool
wpget.ru
