Как сделать значок ссылкой
Как создать фавиконку и подключить ее к сайту
Favicon (сокращение от Favorites Icon) — иконка с логотипом или первой буквой названия сайта, которая отображается на вкладках браузера, в списке закладок и в интерфейсе некоторых поисковых систем.
Этот мини-логотип, по сути, олицетворяет сайт и помогает пользователям быстрее отыскать его среди сохраненных страниц или в бесконечном списке открытых вкладок. Чтобы облегчить потенциальному посетителю эту задачу, каждому веб-ресурсу, от мелкого блога на WordPress до интернет-магазина с огромной аудиторией, нужны наглядные и узнаваемые Фавиконки.
Так Favicon выглядят на вкладках в браузере Safari:
А вот так в поисковой выдаче Яндекса:
Такие значки должны опираться на стилистику бренда, поэтому важно, чтобы они были с ним тесно связаны.
Вот, как это реализовано у Apple и Яндекса:
Далее разберемся, как сделать иконку сайта и подключить ее к нему.
Характеристики значков
Взять любую понравившуюся картинку и с ходу использовать ее как Favicon не получится. Надо соблюсти два несложных требования: выбрать подходящее расширение и размер.
Формат
Тут есть из чего выбирать:
.svg не поддерживается в старых браузерах для ПК и некоторых Android-браузерах
Размер
Здесь тоже есть некие стандарты, но они разнятся от системы к системе. Часто используются размеры:
Как сделать иконку для сайта HTML?
В лучшем случае вам все нарисует грамотный дизайнер, но если под рукой такого не нашлось, можно и самому склепать значок.
Рисуем Favicon в Sketch или Photoshop
Значок можно нарисовать там же, где рисуются и другие части интерфейса. Например, Photoshop или Sketch. Покажу, как это работает на примере Sketch:
То же самое можно сделать в Photoshop или условном Pixelmator, разве что интерфейсы настройки изображений и экспорта будут отличаться.
Преобразуем готовое изображение в фавиконку
Рисуем значок в браузере
Если нет Фотошопа или просто не нужен какой-то сложный дизайн, то можно на скорую руку нарисовать себе лого на сайте Favicon.cc. В этом случае все запредельно просто:
Тут же можно посмотреть, как нарисованная иконка выглядит в адресной строке браузера.
Конвертируем текст или эмоджи в значок
Есть вариант еще проще — сервис Favicon.io. На нем есть три конвертера: из картинки, из текста или из эмоджи в значок.
Но я попробую скачать иконку с эмоджи:
Как подключить Favicon к сайту?
Теперь, когда у меня есть фавиконка (неважно откуда), надо ее подключить. Для этого надо вставить в html-код основной страницы строчку, в который будут указаны тип ресурса, адрес и тип данных.
АТРИБУТ
ЗНАЧЕНИЕ
icon указывает на тип используемого ресурса.
Здесь указывается путь до файла. Можно ввести ссылку до сервера или внешнего каталога.
Можно вписать несколько разных значков. Браузер все равно сам выберет подходящую иконку. Такой подход предлагается в Favicon.io.
Это самый простой способ. Естественно, файл со значком может называться как угодно и располагаться на внешнем сервере. Главное, корректно оформить код на сайте.
Как добавить значок для внешних ссылок на своем WordPress сайте
Опубликовано: ADv Дата 13.04.2016 в рубрике Плагины WP Комментировать
Вы наверняка встречали маленький значок стрелочки рядом со ссылками на сайтах типа Wikipedia. Задачей этой иконки является индикация ссылки, ведущей на сторонний сайт. Это часто применяется на правительственных или обучающих сайтах, потому как позволяет пользователям понять, что они покинут текущий сайт, если нажмут и перейдут по внешней ссылке. В сегодняшней статье мы покажем вам как добавить значок внешней ссылки на сайт WordPress.
Первым делом вам необходимо установить и активировать плагин External Links. После активации переходим на страницу Настройки » External Links для конфигурации настроек плагина.
Как вы видите, плагин умеет намного больше, чем просто добавлять значок рядом с внешними ссылками. Он умеет добавлять атрибут nofollow ко всем внешним ссылкам в WordPress.
Также вы можете активировать возможность открывать внешние ссылки в новом окне, а также добавлять исключения в случае необходимости.
Однако, если же вам нужно просто добавить значок для внешних ссылок, тогда отметьте галочку рядом с опцией ‘Add Icons’.
Не забудьте нажать на кнопку сохранения изменений.
Теперь все готово, и вы можете перейти на свой сайт, где увидите небольшой значок рядом с внешними ссылками на WordPress сайте.
Добавляем собственный значок для внешних ссылок в WordPress
Иконка, используемая для внешних ссылок, это небольшой файл изображения. Если в хотите заменить его на свой собственный значок, то это можно сделать вручную.
Вам нужно будет создать маленькую иконку в формате png с помощью Photoshop или GIMP. Размер по-умолчанию для значка — 10?10 px, и вам нужно использовать именно этот размер. Также потребуется сохранить файл значка под именем ‘external.png’.
После создания значка загрузите его в папку плагина. Для этого просто подключитесь к своему сайту с помощью FTP, а затем перейдите в папку:
Именно сюда нужно положить файл со значком. Ваш FTP клиент предупредит о том, что файл с таким именем уже существует. Необходимо подтвердить замену и перезапись дефолтного файла значка на свой.
Вот и все, можно перейти на свой сайт и увидеть собственноручно созданный значок рядом с внешними ссылками.
Мы надеемся, что эта статья помогла вам выделить внешние ссылки на своем WordPress сайте.
По всем вопросам и отзывам просьба писать в комментарии ниже.
Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.