Как скопировать фавикон с чужого сайта


Как скопировать favicon с другого сайта?

Многие вебмастера на своих WordPress сайтах/блогах используют плагины, которые позволяют прикреплять какие угодно иконки к рубрикам или меню. Если кто не знает, вот названия парочки из таковых: Menu Icons и Category & Page Icons. Плагины действительно полезные, и помогают украсить рубрики и ссылки в меню сайта.

Выглядит это следующим образом:

Согласитесь, интересно смотрится, по необычному. Но как показывает практика, при использовании вышеперечисленных плагинов, часто возникают трудности с подбором иконок. Связано это с тем, что иконку абы какую не установишь же, нужно чтоб она, хоть как-то соответствовала статье, ссылка на которую будет находиться около иконки. Несомненно, каждый вправе на свое усмотрение устанавливать иконки, но я бы советовал, иконки копировать с сайтов, которые будут описываться в статье. Ну, а если статья будет разносторонняя, то иконку можно подобрать и скачать при помощи гугловского поиска картинок.

Многие не умеют копировать favicon (именно так называются иконки сайтов), поэтому в этой статье я подскажу, как скопировать favicon с другого сайта. Кстати, если вы увидели на каком-либо сайте favicon и она вам понравилась, то при помощи приведенных в этой статье способов копирования favicon, вы сможете ее скопировать себе для своих нужд за пару секунд.

У каждого сайта имеется своя favicon картинка, и выглядит она вот так:

Если на вашем сайте она еще не установлена, то обязательно задумайтесь об этом, т.к. она очень полезна. Во-первых, она поможет вашему сайту быть уникальным в поисковой выдаче. Во-вторых, именно по иконке намного проще найти сайт в поиске.

Итак, приведу пример, как скопировать favicon с почтовика WMmail. Скажу сразу, что имеется 2 способа копирования favicon с любого сайта, и знайте, если при помощи одного не получится, то при помощи другого, точно все удастся.

1. Первый способ реализуется при помощи специального яндекс сервиса. Для того чтобы узнать иконку любого сайта, то нужно попросту перейти в браузере по следующей ссылке — favicon.yandex.net/favicon/site.ru

Где «site.ru» нужно заменить на доменное имя сайта, c которого мы хотим скачать favicon. В нашем случае, нужно будет перейти по ссылке — favicon.yandex.net/favicon/wmmail.ru.

После того как перешли, увидите иконку:

Кликаете на нее правой кнопкой мыши и выбираете пункт «Сохранить изображение как…» и сохраняете себе на компьютер. Дальше уже, можете делать с не все что хотите и использовать для любых целей.

2. Второй способ тоже простой и заключается в приписке к основному домену следующей приставки — favicon.ico

В нашем случае, ссылка для получения favicon по такому способу будет выглядеть так — wmmail.ru/favicon.ico

Перейдя по ней, вы увидите оригинальную иконку сайта:

Далее опять точно так же сохраняете ее на компьютер.

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

Использовать фавикон с другого сайта?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
.

Как сделать фавикон для вашего веб-сайта

«Эффект ореола», как я упоминал в статье о том, почему я никогда не использую дешевые конструкторы веб-сайтов, предполагает, как мы выглядим, одеваемся, говорим и в каком доме живем во влиянии других людей на впечатления о нас.

Вот почему, когда вы создаете веб-сайт для себя или для клиента, вы должны позаботиться обо всех мелких деталях, включая значок!

ОК. Так что большинство людей произносят фавикон FAVE-IKON.Ну, я не знал. Посмотрите мое видео «Создание значка для веб-сайта», чтобы посмеяться над моим акцентом!

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

Фавикон (или значок избранного), также известный как значок ярлыка, представляет собой файл изображения, содержащий небольшой значок, связанный с определенным веб-сайтом. Ниже приведены некоторые из них:

И посмотрите, что там в конце! Уродливо, не правда ли? Вы не хотите быть владельцем этого сайта. Так что читайте дальше…

Создайте свой фавикон в Photoshop или в любом другом редакторе изображений

Хотя есть бесплатные значки, которые можно загрузить в Интернете, всегда лучше иметь оригинальный значок для своего сайта.Хорошо разрабатывать логотип сайта с учетом фавикона, потому что вам нужно отделить квадратный элемент от логотипа.

На моем логотипе есть дополнительный символ, который я использую для значка:

Все, что мне нужно сделать, это создать его как квадратный документ размером 16 x 16 пикселей или 32 x 32 пикселей в Photoshop:

Теперь сохраните изображение, которое станет значком в формате GIF, PNG-8 или PNG-24. Важно то, что у него прозрачный фон.После сохранения как «favicon.png» измените имя файла на «favicon.ico», хотя технически это не файл ICO.

Однако, если вы хотите создать настоящий файл ICO прямо из Photoshop, вам необходимо загрузить этот плагин формата файла ICO для Photoshop, или вы можете использовать онлайн-генератор значков. Но я считаю, что он отлично работает, добавляя расширение файла из GIF или PNG к ICO - однако я считаю, что это может не работать с некоторыми действительно старыми версиями Internet Explorer.

После того, как вы создали «favicon.ico », вам необходимо загрузить его в корень сервера - туда, где находится ваш index.html или index.php, или, если вы используете WordPress, здесь находятся все файлы и папки« wp- ».

Даже если на следующем шаге вы укажете, что ваш favicon.ico находится в другом каталоге, я все равно посоветую вам поместить его в корень сайта. Это связано с тем, что социальные сайты, такие как Google+, когда вашими сообщениями делятся, будут просто искать favicon.ico в корневом каталоге и выставлять уродливый по умолчанию, если не могут найти ваш.

HTML, чтобы браузер распознал ваш Favicon

Чтобы ваш значок отображался в браузере, вы должны поместить следующее в разделе на каждой странице вашего веб-сайта.

Если вы используете WordPress, вы можете поместить указанное выше в файле header.php между тегами и .Некоторые темы, например, Genesis, уже имеют значок. Он находится в папке wp-content / themes / имя дочерней темы /. Вы должны перезаписать этот файл новым файлом favicon.ico, а также поместить его в корень сервера.

Мой значок не обновляется! Что мне делать?

После того, как вы изменили свой фавикон часто упорно отказывается показывать и браузер использует старую версию кэшированной вместо этого, даже после того, как освежает. В этом случае просто вставьте адрес своего значка в браузер (например,https://robcubbon.com/favicon.ico), а затем нажмите «Обновить». После этого значок должен отображаться правильно.

Большое спасибо Крису Хессу в комментариях за то, что он высказал это мнение. Он также предлагает открыть сайт в окне Chrome Incognito, чтобы очистить кеш и увидеть новый значок.

Используйте ваш значок в качестве маркера

Еще один дизайнерский трюк (который не всегда работает) - это повторение значка (фавикона) вашего сайта на вашем сайте. Например, вы можете использовать свой значок в качестве маркера на боковой панели - как у меня на своем сайте.

Для этого я повторно сохранил свой favicon.ico как bullet.gif и поместил его в папку изображений моей темы (wp-content / themes / streamline / images / bullet.gif) и поместил это в style.css моей темы. :

.sidebar.widget-area ul li
{тип-стиля-списка: нет;
фон: url (images / bullet.gif) no-repeat 0 2px;
поле: 0 0 7 пикселей;
отступ: 0 0 0 20 пикселей; }

Вот объяснение приведенных выше объявлений CSS:

  • список-стиль-тип: нет; избавляется от маркера браузера по умолчанию
  • фон Объявление помещает изображение значка в
  • поле: 0 0 7 пикселей; добавляет немного пробела между каждой строкой неупорядоченного списка
  • отступ: 0 0 0 20 пикселей; добавляет немного места слева от строк списка, чтобы не натолкнуться на ваше новое изображение маркера

Что вы можете делать

Ваш сайт выглядит нелюбимым без собственного оригинального значка? Отредактируйте свой логотип, чтобы создать отличительный значок.Любые вопросы, просто дайте мне знать.

Наконец, этот пост пришел как запрос от посетителя. Если у кого-то есть еще идеи по темам, о которых я могу написать, я, как говорится, все уши. Туделоу!

.

Как добавить значок в свой блог WordPress

Значок или значок сайта - это крошечное изображение, которое появляется рядом с заголовком вашего веб-сайта в браузере. Это помогает вашим пользователям идентифицировать ваш веб-сайт, и более частые посетители вашего сайта мгновенно узнают это крошечное изображение. Это повышает узнаваемость вашего бренда и помогает завоевать доверие среди вашей аудитории. В нашей статье о наиболее распространенных ошибках WordPress отказ от добавления значка был в числе 25 лучших. В этой статье мы покажем вам, как добавить значок в свой блог WordPress.

Почему вам следует добавить значок на свой сайт WordPress?

Как мы упоминали ранее, он устанавливает идентичность вашего веб-сайта. Однако это также улучшает удобство использования и удобство использования вашего сайта. Это изображение поможет вам лучше понять это:

У большинства пользователей обычно открыто много вкладок в окне браузера. Это скрывает заголовок вашего веб-сайта по мере увеличения количества вкладок. Значок помогает пользователю идентифицировать ваш веб-сайт и быстро переключаться на нужную вкладку.

Вы можете попросить своих пользователей добавить ваш сайт на рабочий стол на мобильных устройствах. Значок или значок вашего сайта также используется, когда пользователь добавляет ваш сайт на свой рабочий стол на мобильном устройстве.

Как создать фавикон

Вы можете использовать логотип вашего бренда в качестве значка или значка сайта. Рекомендуемый размер изображения значка вашего сайта - не менее 512 пикселей по ширине и высоте. Изображение значка сайта должно быть квадратным, вы можете использовать прямоугольное изображение большего размера, и WordPress позволит вам обрезать изображение при его добавлении.

Мы рекомендуем использовать программу редактирования изображений, такую ​​как Adobe Photoshop или Gimp, для создания значка сайта точно 512 × 512 пикселей. Таким образом вы сможете сохранить точные пропорции вашего изображения. Вы можете использовать прозрачное изображение или заполнить изображение цветом фона по вашему выбору. Это изображение может быть в формате png, jpeg или gif.

Видеоурок

Подписаться на WPBeginner

Если вам не нравится видео или вам нужны дополнительные инструкции, продолжайте читать.

Добавление значка или значка вашего сайта в WordPress

Начиная с WordPress 4.3, вы можете добавить значок или значок сайта из области администрирования WordPress. Просто перейдите к Внешний вид »Настроить и щелкните вкладку « Идентификация сайта ».

Раздел идентификации сайта в настройщике позволяет вам изменять заголовок и описание сайта, а также определять, хотите ли вы отображать их в заголовке. Он также позволяет загружать значок вашего сайта. Просто нажмите кнопку выбора файла, а затем загрузите изображение, которое хотите использовать в качестве значка сайта.

Если загружаемое изображение превышает рекомендуемый размер, WordPress позволяет обрезать его. Если он точно соответствует рекомендованному размеру, то можете просто сохранить изменения.

Это все, что вы теперь можете просмотреть на своем сайте и увидеть свой значок в действии. Вы также можете посетить свой сайт с мобильного устройства, а затем в меню браузера выбрать «Добавить на главный экран». Вы заметите, что значок вашего сайта появится на главном экране.

Добавление значка в старую версию WordPress (4.2 или ниже)

Загрузите ваш значок в корневой каталог вашего веб-сайта с помощью FTP. После этого вы можете просто вставить этот код в файл header.php вашей темы.

   

Замените wpbeginner.com на URL своего сайта, и все готово. Если у вашей темы нет заголовка.php, или вы не можете его найти, тогда не беспокойтесь, у нас есть плагин для вас. Установите и активируйте плагин Insert Headers and Footers. После активации плагина перейдите в Настройки »Вставить верхние и нижние колонтитулы и вставьте код, указанный выше, в раздел заголовка и сохраните свои настройки.

Если вы вообще не хотите иметь дело с FTP, вы также можете использовать плагин All in One Favicon.

Мы надеемся, что эта статья помогла вам добавить значок на свой сайт WordPress.Если у вас есть вопросы и отзывы, вы можете оставить комментарий ниже или связаться с нами в Twitter.

.

Favicon отображается только в админке wp, но не на самом сайте

Привет @ myl6988,

Я только что сделал «просмотр исходного кода» вашего веб-сайта и вижу, что все значки имеют расширение «.png». Разве у них не должно быть расширения «.ico»?

И какую тему вы здесь используете?

Привет, @tsure, спасибо за ответ. вы правы, .ico - это то, что я добавил на свой сайт через filezilla, и он отображается, когда я смотрю на URL «www.example.com/favicon.ico ».

У меня есть png-версия моего значка, потому что кажется, она мне нужна? Например, в разделе «Внешний вид - Настройка - Общие настройки - Идентификация сайта» мне нужен был значок размером 52 x 52.

Я также использую плагин Favicon by Real Favicon Generator и загрузил изображение, чтобы они могли сгенерировать для меня значок. Я только что загрузил в СМИ фавикон .ico. Я не уверен, что это имеет значение.

И я использую тему Divi.

Привет

Похоже, вы пытаетесь использовать здесь много вещей.

Вы уже выполнили шаги, упомянутые здесь: https://codex.wordpress.org/Creating_a_Favicon

Если вы уже пробовали описанное выше и все еще не уверены, что может быть причиной проблемы, и, поскольку вы используете плагин Favicon, я бы посоветовал сообщить о вашей проблеме на их форумах. Кто-то мог столкнуться с той же проблемой, что и ваша. Вот ссылка на их форум:

https: // wordpress.org / support / plugin / favicon-by-realfavicongenerator

Я бы все равно попробовал сначала поработать с кодексом.

Привет @ myl6988,

HostGator недавно был отмечен в этом посте, и нам было очень жаль слышать о проблемах с работой вашего значка. Изучив этот вопрос, мы видим, что теперь в домене, упомянутом в вашем первом сообщении, появляется значок: http://shopsnobmode.com/

Если вы по-прежнему испытываете трудности с этим процессом по какой-либо причине, не стесняйтесь начать чат с нами по адресу https: // chat.hostgator.com, и мы будем более чем рады еще раз взглянуть на вас.

Привет,

У меня такая же проблема. Я использую набор дочерних и основных тем.

Favicon устанавливается через опцию Customize в панели администратора WP. Он отображается на сайте панели администратора, но не на сайте Live.

Я также использую следующий код в заголовочном файле:

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

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