Фавиконки рядом со ссылками
При оформлении страниц сайта очень интересным свойством может быть автоматическая вставка фавиконки рядом со ссылкой на другие ресурсы. К сожалению, только средствами CSS сделать универсальное решение не получится, но немного jQuery помогут добиться замечательного результата.
Решение для одной ссылки
Если таким образом хочется оформлять ссылки только на один ресурс, то вполне можно обойтись только CSS. A разметке формируем ссылку:
<a href=http://ruseller.com>Ruseller</a>
А в CSS формируем для нее внешний вид:
a[href*="ruseller.com"]{ padding-left:18px; background:url(http://www.google.com/s2/u/0/favicons?domain=ruseller.com) left center no-repeat; }
Здесь используется сервис Google для фавиконок.
Универсальное решение
В выше приведенном варианте использовался сервис для получения фавиконок от Google. Ему нужно только доменное имя верхнего уровня:
http://www.google.com/s2/u/0/favicons?domain=ruseller.com
Для вытаскивания URL доменного имени можно использовать регулярное выражение:
function getDomain(url) { return url.match(/:\/\/(.[^/]+)/)[1]; }
А с помощью данной функции и jQuery формируется фоновое изображение с фавиконой:
$("a[href^='http']").each(function() { $(this).css({ background: "url(http://www.google.com/s2/u/0/favicons?domain=" + getDomain(this.href) + ") left center no-repeat", "padding-left": "18px" }); });
Можно также воспользоваться this.hostname
вместо регулярного выражения. Но гарантированной поддержки данного варианта нет.
$("a[href^='http']").each(function() { $(this).css({ background: "url(http://www.google.com/s2/u/0/favicons?domain=" + this.hostname + ") left center no-repeat", "padding-left": "18px" }); });
Используем getFavicon
Есть еще один сервис - getFavicon. Как показала практика, он чуть-чуть медленнее. Но у него есть преимущество - можно использовать полный URL без выделения доменного имени.
$("a[href^='http']").each(function() { $(this).css({ background: "url(http://g.etfv.co/" + this.href + ") left center no-repeat", "padding-left": "20px" }); });?
Заключение
При реализации данного свойства на сайте нужно помнить о вопросе производительности. Каждое маленькое изображение потребует отдельного запроса.
У Яндекса есть сервис, который формирует спрайт из фавиконок, например:
http://favicon.yandex.net/favicon/google.com/yandex.ru/ruseller.com
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/dIKY3lZPzuU/lessons.php


Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2025-04-08 » Горшочек, рисуй: 10 бесплатных сервисов для генерации картинок
- 2025-04-08 » SEO-продвижение в 2025 году: 15 трендов, без которых ТОП не светит
- 2025-03-14 » SPF-запись
- 2025-03-07 » SEO на маркетплейсах: как оптимизировать карточку товара для поисковой выдачи
- 2025-02-18 » Топ-10 бесплатных нейросетей для генерации изображений: лучшие ии генераторы 2024 года
- 2025-02-11 » Критическая уязвимость в 1С-Битрикс
- 2025-02-11 » Google Search Console: руководство для начинающих вебмастеров
- 2025-02-11 » Методы измерения результативности рекламных кампаний: плюсы и минусы
- 2025-02-11 » Тренды SEO в 2025 году
- 2025-02-10 » Свой Google в локалке. Ищем иголку в стоге сена
- 2025-01-29 » SEO — это комплексная работа. Шесть главных факторов ранжирования сайтов
- 2025-01-29 » Гайд для главной страницы e-commerce сайта: как оформить, чтобы повысить конверсию
- 2025-01-20 » Krea AI выпустила бесплатную функцию преобразования изображений в 3D-объекты — их можно вращать и вписывать в фотографии
- 2025-01-19 » Отзывы на Яндекс Картах: как пройти модерацию
- 2025-01-15 » Топ-6 лучших российских нейросетей, в которых можно генерировать тексты и изображения бесплатно и без VPN
- 2025-01-14 » 15 бесплатных способов узнать, чем интересуется ваша аудитория
- 2025-01-11 » Бездепозитные бонусы в казино за регистрацию с выводом: особенности и возможности получения
- 2025-01-09 » Новая модель LAM способна выполнять задачи в Word
- 2024-12-26 » Универсальный промпт для нейросети: как выжать максимум из ChatGPT, YandexGPT, Gemini, Claude в 2025
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
Надобно иметь большое мужество, чтоб высказать громко вещи, потихоньку известные каждому. А. Герцен |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Или напишите нам в WhatsApp
Или напишите нам в WhatsApp