Значок перед названием сайта

Значок перед названием сайта

Favicon.ico или иконка в адресной строке браузера

Сразу отмечаю, что статья из разряда «для самых маленьких». Просто пощу ее, вдруг пригодится кому-нибудь.
Favicon, что это и для чего он нужен? Favicon.ico это файл ярлыка в ОС Win32 который является иконкой-ссылкой на страничку сайта, на которой он присутствует. Его можно видеть в в избранных ссылках вашего браузера, адресной строке и на закладках в многооконных браузерах. Как его прикруть к страничке? Для того чтобы нарисовать иконку вам необходимо воспользоваться любым графическим редактором, но после вам необходимо конвертировать ваш полученный графический файл в формат .ico либо же изначально рисовать его в специализированных редакторах типа AWIcons Pro, IconWorkshop, MicroAngelo и т.п. Простое переименование расширения файла в .ico плохая идея, т.к. некоторые браузеры не примут такой файл и не отобразят иконку. Если вам всеже привычнее работать в фотошопе, то вот вы можете скачать плагин для работы с изображениями в формате .ico. Для работы плагина файл необходимо распаковать и сохранить в папке Plug-Ins\File Formats в корневой директории Photoshop.
Итак, у нас есть иконка, конвертированная правильным способом в формат .ico. Далее по пунктам.
1. Название иконки должно быть favicon.ico, т.к. некоторые старые браузерв не смогут опознать ее именно как ярлык сайта.
2. Подключение иконки к документу осуществляется следующим кодом. Обязательно необходимо указать тип содержимого как image/x-icon и связь с документом как shortcut icon. Кроме того, что это обязательно по спецификации w3c, есть вероятность того, что вы снова споткнетесь об особенности работы некоторых браузеров, не указав тип содержимого.
3. Размер иконки вы можете выбрать от 16х16 до 48х48, чем больше иконка тем она будет симпатичнее, в случае, когда пользователь вздумает поместить ярлык на ваш сайт на свой рабочий стол, например. Но! Мы живем в реальности которая называется “Все мы любим Internet Explorer”. Поясняю, иконки размером превышаюзие 16х16 px попросту проигнорируются IE 6.0 и ниже. Однако существует возможность в один файл .ico упаковать несколько изображение, как разных по размеру, так и по содержимому, пользуйтесь этой возможностью.
4. Где же разместить файл с иконкой сайта? Для надежности просто положите его в корневую директорию вашего сайта.
Грабли.
1. Как указал выше, IE lt 6.0 не понимает иконок, превышающих 16х16 пикселей.
2. IE 6.0 и ниже отобразит иконку только после добавления странички в избранное и перезагрузки. Ну любит MS перезагружать все и вся ;-).
3. Если IE 6.0 и ниже и после этого не отобразит ее, то попробуйте почистить кэш браузера.
4. Если и после этого иконка не появится там, где ей положено быть необходимо удостовериться, что ваш сервер передает иконку в браузер и отображает ее, а не передает, как файл и предлагает вам его сохранить. Это проверяется простым путем ввода в браузер адреса вашего сайта и имени иконки, например yoursite.com/favicon.ico, при условии конечно, что иконка лежит в корневой директории. Во втором случае ваш сервер не настроен на отображение файлов .ico. Для того чтобы исправить эту ситуацию вам необходимо создать в корне сайта файл .htaccess и добавить в него следующую строку AddType image/x-icon .ico.
Ссылки по теме:
1. Как добавить собственную иконку сайта в адресную строку и в закладки браузера? www.htmlbook.ru/faq/?a=28
2. Favicon — иконка в адресной строке. lines.net.ua/index.php?loc=articles&category=webdesign&art=3
3. Иконка в адресной строке. www.codenet.ru/webmast/favicon.php
4. favicon.ru — favicon.ico generator and editor. favicon.ru
Кросспост из webdev.lovata.com.

Современные возможности

Многие современные браузеры не требуют явного указания на favicon.ico в коде страницы. В случае отсутствия такого указания браузер пытается загрузить favicon.ico из корня сайта. Однако имеется возможность явно указать положение значка в (X)HTML-коде (внутри элемента <head>), что позволяет при условии отсутствия /favicon.ico использовать для каждой страницы свой значок.

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

<link rel=»icon» type=»image/png» href=»/someimage.png» />

где

  • rel может содержать и «shortcut icon» (при этом Microsoft Internet Explorer будет реагировать на строку «shortcut icon», а браузеры, соответствующие стандартам, — на слово «icon»)
  • href содержит абсолютный или относительный URI к файлу (в Mozilla Firefox 3.0, например, поддерживаются те же URI, что и с тегом img).
  • Форматом файла может быть png или gif, размером 16×16 или 32×32 и с 8-битной или 24-битной глубиной цвета (в Mozilla Firefox, например, может быть не только этот, но и как у тега img).

При этом атрибут type должен содержать MIME-тип формата (например, image/png для PNG).

В 2003 году формат ICO был зарегистрирован Саймоном Батчером (Simon Butcher) в Internet Assigned Numbers Authority (IANA). Для этого формата стандартным MIME-типом стал image/vnd.microsoft.icon.

Если для Internet Explorer используется формат ICO, то его MIME-тип должен быть image/vnd.microsoft.icon. Тип image/x-icon устарел в 2003 году после стандартизации типа для ICO. Правильный тип image/vnd.microsoft.icon поддерживается всеми браузерами. Важно помнить, что иконка не будет показываться в браузере, если её Content-type, возвращаемый веб-сервером, не совпадёт с указанным в html-коде страницы.

Можно указать несколько изображений в разных форматах — например, строку с rel=»shortcut icon» и значком в формате ICO для Internet Explorer, и строку с rel=»icon» и значком в формате GIF или PNG для остальных браузеров.

Мобильный значок сайта

Устройства фирмы Apple начиная с iOS 1.1.3 и некоторые устройства на базе ОС Android поддерживают специальные большие иконки, которые могут использоваться в качестве значков веб-приложений. Сайт может предоставлять такую иконку, указав в заголовке <head> <link rel=»apple-touch-icon» …> Рекомендуемый размер иконки 60×60 пикселей для iPhone и 120×120 пикселей для iPhone с Retina дисплеем. Для iPad рекомендуется иконка размером 76×76 пикселей, а для iPad с Retina дисплеем (начиная с iPad третьего поколения) 152×152 пикселя. Для планшетов на Android с браузером Chrome предпочтительной является иконка формата PNG и размера 192×192.

На изображение упомянутое как apple-touch-icon накладывается тень, отражение, а также изображение получает скруглённые края. А на изображение apple-touch-icon-precomposed не накладывается никаких эффектов.

С закруглёнными краями, добавляемыми iOS <link rel=»apple-touch-icon» href=»somepath/image.png» /> Без отражений <link rel=»apple-touch-icon-precomposed» href=»somepath/image.png» />

Корневой каталог сайта является локацией по-умолчанию для поиска иконок apple-touch-icon-precomposed.png и apple-touch-icon.png.

Примечания

  1. 1 2 3 How to Add a Shortcut Icon to a Web Page. Microsoft Developer Network. Microsoft. Дата обращения 15 марта 2010. Архивировано 8 февраля 2012 года.
  2. McGrew, Darin Web Authoring FAQ — 8.11. How can I have a custom icon when people bookmark my site?. Web Design Group (26 April 2007). Дата обращения 23 февраля 2011. Архивировано 8 февраля 2012 года.
  3. 1 2 Heng, Christopher What is Favicon.ico? Personalise Your Site’s Bookmarks. thesitewizard.com (7 September 2008). Дата обращения 23 февраля 2011. Архивировано 8 февраля 2012 года.
  4. Creating favicons with Adobe Photoshop and GoLive. Adobe GoLive. Дата обращения 25 февраля 2011. Архивировано 7 декабря 2003 года.
  5. 1 2 3 4 5 Davis, Jeff why doesn’t the favicon for my site appear in IE7?. jeff’s WebLog at Microsoft Developer Network. Microsoft (1 March 2007). Дата обращения 27 февраля 2011. Архивировано 8 февраля 2012 года.
  6. 1 2 Fun with Favicons. Microsoft (7 September 2013). Дата обращения 3 ноября 2013.
  7. 1 2 3 David. Mozilla 0.9.6 Release Notes. Mozilla (19 July 2003). Дата обращения 23 февраля 2011. Архивировано 8 февраля 2012 года.
  8. Works only on first load of the page.
    Daniel Holbert. Bug 366324 – SVG site icons (favicons, shortcut icons) support — comment 22. Bugzilla@Mozilla. Mozilla (14 April 2011). Дата обращения 23 февраля 2011.
  9. 1 2 3 4 5 Opera 7 for Windows Changelog. Opera Software (28 January 2003). Дата обращения 28 февраля 2011. Архивировано 8 февраля 2012 года.
  10. Mathias Bynens. Everything you always wanted to know about touch icons (2 March 2011). Дата обращения 15 ноября 2011.
  11. iPhone Human Interface Guidelines for Web Applications: Metrics, Layout Guidelines, and Tips. Apple Inc.. Дата обращения 27 мая 2010.
  12. 1 2 3 4 5 Safari Web Content Guide: Specifying a Webpage Icon for Web Clip. Apple Inc. (15 November 2010). Дата обращения 25 февраля 2011.
  13. 1 2 3 McLellan, Drew How To Set an Apple Touch Icon for Any Site. Allinthe head.com (17 January 2008). Дата обращения 11 марта 2011.
  14. iOS Human Interface Guidelines: Custom Icon and Image Creation Guidelines, Table 8-1. Apple Inc.. Дата обращения 16 июля 2011.
  15. Apple-touch-icon. Apple Inc.. Дата обращения 25 февраля 2011.
  16. iPad Apple Touch Icon. Дата обращения 12 февраля 2012.
  17. Android Chrome and its favicon. Дата обращения 9 сентября 2014.

Для улучшения этой статьи желательно:

  • Найти и оформить в виде сносок ссылки на независимые авторитетные источники, подтверждающие написанное.
  • Исправить статью согласно стилистическим правилам Википедии.

Значок для сайта

  • Главная
  • Joomla
    • Установка CMS Joomla
      • Создание сайта на Joomla
      • Как установить Denwer
      • Установка Joomla
      • Установка Joomla 1.5
      • Установка Joomla 2.5
      • Установка Joomla 3.0
      • Русификация Joomla
    • Работа с Joomla
      • Расширения Joomla
      • Как установить компонент в Joomla
      • Как удалить компонент в Joomla
      • Импорт баз данных
      • Резервное копирование
      • Float в CSS
    • Материалы в Joomla
      • Админка в Joomla
      • Материал в Joomla
      • Редактор в Joomla
      • Как добавить материал в Joomla
      • Как создать статью в Joomla
      • Как вставить картинку в статью Joomla
      • Обтекание картинки текстом
      • Как вставить картинку в HTML
      • Как сделать картинку фоном
      • Lightbox в Joomla
      • Настройка параметров статьи
      • Созадание пункта меню для статьи
      • Создание псевдонима
      • Категории в Joomla
      • Создание пункта меню для статьи в категории
      • Как убрать дубли ссылок на главную страницу
    • Joomla на хостинге
      • Выбор хостинга
      • Регистрация домена
      • Как оплатить услуги хостинга
      • Как создать базу данных mysql
      • FTP-соединение
      • Перенос Joomla на хостинг
      • Значок для сайта
      • Как вставить видео на сайт
      • Ошибка 404
      • для Joomla
      • Почта для домена
      • Как купить домен
      • Apple touch icon – что это
      • Какой хостинг выбрать для сайта
  • Модули
    • Модули Joomla
      • Модуль для установки кода Sape
    • Плагины
      • Sourcerer – вставляем код на сайт
      • Плагин SAPE
      • Как вставить код в Joomla
    • Компоненты
      • ARTIO JoomSEF — оптимизация ссылок
      • ARTIO JoomSEF — убираем копирайт
      • Attachments — система загрузки файлов
      • Attachments — вложения для Joomla 2.5
      • Attachments — как создать вложения
      • Admin Tools — обновление Joomla
      • DatsoGallery — создаем фотогалерею
      • DatsoGallery — убираем копирайт
      • JCE Content Editor — редактор для Joomla
      • JComments — комментарии на сайте
      • JComments — убираем копирайт
    • ПО вебмастера
      • WebDeveloper — вебразработчик
      • Как работать с WebDeveloper
      • Firebug – инструмент для веб-разработчика
      • Как работать с Firebug
      • Notepad++ — бесплатный редактор HTML, PHP
      • Плагины Notepad++
  • Раскрутка
    • Внутренняя оптимизация
      • Уникальность текста
      • Ключевые слова
      • Проверка кода сайта на валидность
      • Сайт глазами робота
      • Sitemap
      • Robots.txt
    • Внешняя оптимизация
      • ТИЦ
      • Трастовость сайта
      • Кнопка Google
      • Кнопка Yandex
      • RSS в Joomla
      • Подписка на RSS
      • Счетчик FeedBurner
      • Pегистрация сайта в Google
      • Pегистрация сайта в Яндексе
  • Заработок
    • Заработок на сайте
      • Как заработать на сайте
      • Партнерские программы
      • Биржа ссылок SAPE
      • Установка кода SAPE
      • Заработок в Google AdSense
      • Поиск по сайту от Google
      • Поиск по сайту от Яндекс
    • Заработок в Интернете
      • Как заработать в Интернете
    • Вывод средств
      • Чек Google Adsense
      • AdSense вывод денег через Rapida
    • Конструкторы сайтов
      • Конструктор сайтов Setup.ru

Структура URL

Изначально локатор URL был разработан как система для максимально естественного указания на местонахождения ресурсов в сети. Локатор должен был быть легко расширяемым и использовать лишь ограниченный набор ASCII‐символов (к примеру, пробел никогда не применяется в URL). В связи с этим, возникла следующая традиционная форма записи URL:

<схема>:@]<хост>]

В этой записи:

схема схема обращения к ресурсу; в большинстве случаев имеется в виду сетевой протокол логин имя пользователя, используемое для доступа к ресурсу пароль пароль указанного пользователя хост полностью прописанное доменное имя хоста в системе DNS или IP-адрес хоста в форме четырёх групп десятичных чисел, разделённых точками; числа — целые в интервале от 0 до 255. порт порт хоста для подключения URL-путь уточняющая информация о месте нахождения ресурса; зависит от протокола. параметры строка запроса с передаваемыми на сервер (методом GET) параметрами. Начинается с символа ?, разделитель параметров — знак &. Пример: ?параметр_1=значение_1&параметр_2=значение_2&параметр3=значение_3 якорь идентификатор «якоря» (англ.)русск. с предшествующим символом #. Якорем может быть указан заголовок внутри документа или атрибут id (англ.)русск. элемента. По такой ссылке браузер откроет страницу и переместит окно к указанному элементу. Например, ссылка на этот раздел статьи: https://ru.wikipedia.org/wiki/URL#Структура_URL.

Схемы (протоколы) URL

В этом разделе не хватает ссылок на источники информации. Информация должна быть проверяема, иначе она может быть поставлена под сомнение и удалена.
Вы можете отредактировать эту статью, добавив ссылки на авторитетные источники.
Эта отметка установлена 8 сентября 2016 года.

Общепринятые схемы (протоколы) URL включают:

  • ftp — Протокол передачи файлов FTP
  • http — Протокол передачи гипертекста HTTP
  • rtmp — Real Time Messaging Protocol проприетарный протокол потоковой передачи данных, в основном используется для передачи потокового видео и аудиопотоков с веб-камер через интернет.
  • rtsp — Потоковый протокол реального времени.
  • https — Специальная реализация протокола HTTP, использующая шифрование (как правило, SSL или TLS)
  • gopher — Протокол Gopher
  • mailto — Адрес электронной почты
  • news — Новости Usenet
  • nntp — Новости Usenet через протокол NNTP
  • irc — Протокол IRC
  • smb — Протокол SMB/CIFS
  • prospero — Служба каталогов Prospero Directory Service
  • telnet — Ссылка на интерактивную сессию Telnet
  • wais — База данных системы WAIS
  • xmpp — Протокол XMPP (часть Jabber)
  • file — Имя локального файла
  • data — Непосредственные данные (Data: URL)
  • tel — звонок по указанному телефону

Экзотические схемы URL:

  • afs — Глобальное имя файла в файловой системе Andrew File System
  • cid — Идентификатор содержимого для частей MIME
  • mid — Идентификатор сообщений для электронной почты
  • mailserver — Доступ к данным с почтовых серверов
  • nfs — Имя файла в сетевой файловой системе NFS
  • tn3270 — Эмуляция интерактивной сессии Telnet 3270
  • z39.50 — Доступ к службам ANSI Z39.50
  • skype — Протокол Skype
  • smsto — Открытие редактора SMS в некоторых мобильных телефонах
  • ed2k — Файлообменная сеть eDonkey, построенная по принципу P2P
  • market — Android Маркет
  • steam — протокол Steam
  • bitcoin — Криптовалюта Биткойн
  • ob — OpenBazaar
  • tg — Telegram

Схемы URL в браузерах:

  • view-source — просмотр исходного кода указанной web-страницы в различных браузерах.
  • chrome — служебные страницы браузера Google Chrome или браузеров на движке Gecko. В Яндекс. Браузере перенаправляет на browser://
  • opera — служебные страницы браузера Opera.
  • browser — служебные страницы Яндекс.Браузера.

Кодирование URL

Стандарт URL использует набор символов US-ASCII. Это имеет серьёзный недостаток, поскольку разрешается использовать лишь латинские буквы, цифры и несколько знаков пунктуации. Все другие символы необходимо перекодировать. Например, перекодироваться должны буквы кириллицы, буквы с диакритическими знаками, лигатуры, иероглифы. Перекодирующая кодировка описана в стандарте RFC 3986 и называется URL-encoding, URLencoded или percent‐encoding.

Пример кодирования можно видеть в русскоязычной Википедии, использующей в URL русский язык. Например, строка вида:

https://ru.wikipedia.org/wiki/Путин

кодируется как:

https://ru.wikipedia.org/wiki/%D0%94%D0%B6%D0%B8%D0%B3%D1%83%D1%80%D0%B4%D0%B0

Реализация

Преобразование происходит в два этапа: сначала каждый символ кириллицы кодируется в UTF-8 в последовательность из двух байтов, а затем каждый байт этой последовательности записывается в шестнадцатеричном представлении с предшествующим знаком процента (%):

Д → D0 и 94 → %D0%94 ж → D0 и B6 → %D0%B6 и → D0 и B8 → %D0%B8 г → D0 и B3 → %D0%B3, и т. д.
Зарезервированные символы

Не зарезервированные символы

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9

Все другие символы в URI кодируются.

Зарезервированные символы кодируются в таком соответствии:

! » # $ % & * + , : ; < = > ? ^ ` { | } <пробел>
%21 %22 %23 %24 %25 %26 %27 %2A %2B %2C %3A %3B %3C %3D %3E %3F %5B %5D %5E %60 %7B %7C %7D %20

Кодирование параметров в Internet Explorer и старом Firefox происходит несколько иначе.

В некоторых случаях URL формируется с использованием кодирования Base58.

Стандарт IRI

Основная статья: Internationalized Resource Identifier

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

Это всё входит в противоречие с принципом интернационализма, провозглашаемого всеми ведущими организациями Интернета, включая W3C и ISOC. Эту проблему призван решить стандарт IRI (англ. Internationalized Resource Identifier) — международных идентификаторов ресурсов, в которых можно было бы без проблем использовать символы Юникода, и которые поэтому не ущемляли бы права других языков. Хотя заранее сложно сказать, смогут ли когда‐либо идентификаторы IRI заменить столь широко используемые URL (и URI в целом).

Инициатива PURL

Ещё один кардинальный недостаток URL состоит в отсутствии гибкости. Ресурсы во Всемирной паутине и Интернете перемещаются, а в виде URL остаются, указывая на уже отсутствующие ресурсы. Это особенно болезненно для электронных библиотек, каталогов и энциклопедий. Для решения этой проблемы были предложены постоянные локаторы PURL (англ. Persistent Uniform Resource Locator). В сущности это те же URL, но они указывают не на конкретное место расположения ресурса, а на запись в базе данных PURL, где, в свою очередь, записан уже конкретный URL‐адрес ресурса. При обращении к PURL сервер находит нужную запись в этой базе данных и перенаправляет запрос уже на конкретное местоположение ресурса. Если адрес ресурса меняется, то нет нужды исправлять все бесчисленные ссылки на него — достаточно лишь изменить запись в БД. В настоящий момент эта идея не стандартизирована и не имеет широкого распространения.

> См. также

  • URN
  • XRI
  • Длинные доменные имена
  • Человеко-понятный URL
  • Нормализация URL
  1. URL (Uniform Resource Locator) — Унифицированный указатель ресурса. Адрес информационного ресурса (файла) в сети Интернет — Сборник акронимов из области вычислительной техники и программирования. 2006.
  2. Двойной слеш в адресах интернета появился из-за спешки его создателя. РИА Новости (2009-10-14 19:05). Дата обращения 11 июля 2010. Архивировано 25 августа 2011 года.
  3. The Chrome URL. Дата обращения 9 декабря 2014.
  4. 1 2 RFC 3986, раздел 2.2
  5. 1 2 3 4 5 6 7 Символ допустим, но при указании прямым текстом несёт специальное синтаксическое значение
  6. Следует отметить, что MediaWiki избегает кодирования пробела как %20, вместо этого он везде заменяется символом подчёркивания «_». Многие поисковики заменяют пробел на символ «+».
  7. HTTP, RFC 3986 и браузеры
  8. Flickr Services
  9. Максимальная длина URL-адреса в Internet Explorer составляет 2083 символа. microsoft.com.

Зачем нужна маленькая иконка сайта

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

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

Как устанавливается фавикон для сайта

Стандартный размер фавикона – 16×16 пикселей. Такой размер оптимально умещается на открытых вкладках, не мешает при просмотре информации в выдаче.

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

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

Для отображения фавикона, готовую иллюстрацию необходимо поместить в корневую папку сайта.

Почему компании не вставляют логотип в фавикон

Как уже было написано ранее, для правильного отображения иконки необходимо подогнать изображение под определенный размер — 16×16 px. Зачастую, логотип не соответствует подобным размерам – при уменьшении не будет понятен смысл. Более того, чаще всего фирменные логотипы имеют прямоугольную форму, что не совсем удобно при формировании фавикона.

Таким образом, дизайнеры видоизменяют иконку, подгоняя ее под общий смысл сайта или фирменные цвета компании.

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

Одна из самых запоминающихся букв – это большая W — превью Википедии.


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *