Html head apple icon

How to Add Image in the Title Bar

The majority of websites add an icon or image logo in the title bar. The icon logo is also called a favicon.

Favicon, which is also known as a URL icon, a tab icon, a shortcut icon, website icon, or bookmark icon, is a file containing one or more small icons, associated with a particular website or web page.

Favicon is used in the top left corner of the tab. Favicons are attractive and can be useful for user engagement.

The two ways of adding favicons are presented below.

The first way of adding favicons¶

• The image must be square dimensioned in any image format (ico, jpg, bmp, gif, png) to appear in browsers properly. Images with non-square dimensions will also work. However, such icons may not look professional.
• You must convert your image into the .ico format. There are many online tools to do that.
• Opening the tool, you must upload your image file. Then, the image will be converted automatically.
• Download the image and save your .ico file on the computer.
• Rename the file to favicon.ico, because the browser automatically recognizes only this name.
• Upload the file to the host directory, where your website files are located.
• When your favicon.ico file is uploaded, the browser will select it automatically and display the image in the browser.

The second way of adding favicons¶

• The image must be square dimensioned in any image format (ico, jpg, bmp, gif, png) to appear in browsers properly. Images with non-square dimensions will also work. However, such icons may not look professional.
• Upload the file to the host directory, where your website files are located.
• The final step is to specify the image you want to use as a favicon in the code of your website.

Add the following link to your section: section:»>¶

Example of adding an image in the title bar:¶

Result¶

A favicon must have the following characteristics:¶

• Favicon.ico is the default name.
• Size should be 16×16, 32×32, 48×48, 64×64 or 128×128 pixels.
• Color should be 8 bites, 24 bites or 32 bites.

Depending on the favicon format, the type attribute must be changed:type attribute must be changed:»>¶

• For PNG, use image/png.
• For GIF, use image/gif.
• For JPEG, use image/gif.
• For ICO, use image/x-icon.
• For SVG, use image/svg+xml.

For different platforms, the favicon size should also be changed:

Platform	Name	Rel value	Favicon size
Google TV	favicon.png	icon	96×96
Opera Coast	favicon-coast.png	icon	228×228
Ipad Retina, iOS 7 or later	apple-touch-icon-152×152-precomposed.png	apple-touch-icon-precomposed	152×152
Ipad Retina, iOS 6 or later	apple-touch-icon-144×144-precomposed.png	apple-touch-icon-precomposed	144×144
Ipad Min, first generation iOS 7 or later	apple-touch-icon-76×76-precomposed.png	apple-touch-icon-precomposed	76×76
Ipad Mini,first generation iOS 6 or previous	apple-touch-icon-72×72-precomposed.png	apple-touch-icon-precomposed	72×72
Iphone Retina, iOS 7 or later	apple-touch-icon-120×120-precomposed.png	apple-touch-icon-precomposed	120×120
Iphone Retina, iOS 6 or previous	apple-touch-icon-114×114-precomposed.png	apple-touch-icon-precomposed	114×114

For Apple devices with the iOS operating system version 1.1.3 or later and for Android devices, you can create a display on their home screens by using the Add to Home Screen button within the share sheet of Safari. For different platforms, add the link in the head section of documents.

Источник

Что можно положить в тег

Рекомендуемый минимум

Ниже приведены основные элементы для любого веб-документа (веб-сайта/приложения):

meta charset — определяет кодировку веб-сайта, стандартом является utf-8 .

meta name=»viewport» — настройки viewport, связанные с мобильной отзывчивостью

width=device-width — физическая ширина устройства (отлично подходит для мобильных устройств!)

initial-scale=1 — начальный масштаб, 1 означает отсутствие масштабирования.

Элементы

Допустимые элементы включают base , link , meta , noscript , script , style , template и title .

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

Ссылки

Иконки

Социальные сети

Facebook Open Graph

Большинство материалов передается на Facebook в виде URL, поэтому важно, чтобы вы разметили свой сайт тегами Open Graph, чтобы взять под контроль то, как ваши материалы появляются на Facebook. Подробнее о разметке Facebook Open Graph

​ Протестируйте свою страницу с помощью Facebook Sharing Debugger

Twitter Card

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

​ Проверьте свою страницу с помощью Twitter Card Validator

Twitter Privacy

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

Schema.org

Примечание: Эти мета-теги требуют добавления атрибутов itemscope и itemtype к тегу .

​ Протестируйте свою страницу с помощью Rich Results Test

Pinterest

Pinterest позволяет запретить людям сохранять страницы вашего сайта, согласно их центру помощи. Описание description является необязательным.

Facebook Instant Articles

OEmbed

QQ/Wechat

Пользователи обмениваются веб-страницами в qq wechat с помощью форматированного сообщения

Браузеры / Платформы

Apple iOS

Google Android

Google Chrome

Microsoft Internet Explorer

Минимально необходимая разметка xml для browserconfig.xml :

Браузеры (китайские)

360 Browser

QQ Mobile Browser

UC Mobile Browser

Ссылки на приложения

Другие ресурсы

Связанные проекты

Atom HTML Head Snippets — Atom пакет для HEAD сниппетов

Sublime Text HTML Head Snippets — пакет Sublime Text для HEAD сниппетов

head-it — CLI интерфейс для HEAD сниппетов

vue-head — Манипулирование метаинформацией тега HEAD для Vue.js

Другие форматы

​ Переводы

​ Contributing

Откройте issue или PR , чтобы предложить изменения или дополнения.

​ Contributors

Посмотрите на всех супер классных авторов ​

​ Автор оригинального репозитория

Josh Buchea

​ Поддержка

Если этот проект был полезен для вас или вашей организации, пожалуйста, рассмотрите возможность прямой поддержки моей работы автора оригинального репозитория:

Всем кто помогает, спасибо! ​

Примечание автора: это русский перевод репозитория HEAD от Josh Buchea. Мы поддерживаем русскую версию в отдельном репозитории, куда вы можете отправлять issue или PR напрямую, если нашли неточности или вам есть, что добавить. Публикуем перевод на Хабре, чтобы поделиться с русскоязычным сообществом полезным материалом.

Источник

Does not provide a valid apple-touch-icon

When iOS Safari users add Progressive Web Apps (PWAs) to their home screens, the icon that appears is called the Apple touch icon. You can specify what icon your app should use by including a
tag in the of your page. If your page doesn’t have this link tag, iOS generates an icon by taking a screenshot of the page content. In other words, instructing iOS to download an icon results in a more polished user experience.

How the Lighthouse Apple touch icon audit fails #

Lighthouse flags pages without a
tag in the :

A rel=»apple-touch-icon-precomposed» link passes the audit, but it has been obsolete since iOS 7. Use rel=»apple-touch-icon» instead.

Lighthouse doesn’t check whether the icon actually exists or whether the icon is the correct size.

In the Lighthouse report UI the full PWA badge is given when you pass all of the audits in all of the PWA subcategories (Fast and reliable, Installable, and PWA optimized).

How to add an Apple touch icon #

Add
to the of your page:

Replace /example.png with the actual path to your icon.

Try it! Check out the Add an Apple touch icon to your Progressive Web App codelab to see how adding an Apple touch icon creates a more polished user experience.

To provide a good user experience, make sure that:

• The icon is 180×180 pixels or 192×192 pixels
• The specified path to the icon is valid
• The background of the icon is not transparent

Источник

Safari Web Content Guide

Configuring Web Applications

A web application is designed to look and behave in a way similar to a native application—for example, it is scaled to fit the entire screen on iOS. You can tailor your web application for Safari on iOS even further, by making it appear like a native application when the user adds it to the Home screen. You do this by using settings for iOS that are ignored by other platforms.

For example, you can specify an icon for your web application used to represent it when added to the Home screen on iOS, as described in Specifying a Webpage Icon for Web Clip . You can also minimize the Safari on iOS user interface, as described in Changing the Status Bar Appearance and Hiding Safari User Interface Components , when your web application is launched from the Home screen. These are all optional settings that when added to your web content are ignored by other platforms.

Read Viewport Settings for Web Applications for how to set the viewport for web applications on iOS.

Specifying a Webpage Icon for Web Clip

You may want users to be able to add your web application or webpage link to the Home screen. These links, represented by an icon, are called Web Clips. Follow these simple steps to specify an icon to represent your web application or webpage on iOS.

To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png

To specify an icon for a single webpage or replace the website icon with a webpage-specific icon, add a link element to the webpage, as in:

In the above example, replace custom_icon.png with your icon filename.

To specify multiple icons for different device resolutions—for example, support both iPhone and iPad devices—add a sizes attribute to each link element as follows:

The icon that is the most appropriate size for the device is used. See the “Graphics” chapter of iOS Human Interface Guidelines for current icon sizes and recommendations.

If there is no icon that matches the recommended size for the device, the smallest icon larger than the recommended size is used. If there are no icons larger than the recommended size, the largest icon is used.

If no icons are specified using a link element, the website root directory is searched for icons with the apple-touch-icon. prefix. For example, if the appropriate icon size for the device is 58 x 58, the system searches for filenames in the following order:

Note: Safari on iOS 7 doesn’t add effects to icons. Older versions of Safari will not add effects for icon files named with the -precomposed.png suffix. See First Steps: Identifying Your App in iTunes Connect for details.

Specifying a Launch Screen Image

On iOS, similar to native applications, you can specify a launch screen image that is displayed while your web application launches. This is especially useful when your web application is offline. By default, a screenshot of the web application the last time it was launched is used. To set another startup image, add a link element to the webpage, as in:

In the above example, replace launch.png with your startup screen filename. See the “Graphics” chapter of iOS Human Interface Guidelines for current launch screen sizes and recommendations.

Adding a Launch Icon Title

On iOS, you can specify a web application title for the launch icon. By default, the tag is used. To set a different title, add a meta tag to the webpage, as in:

In the above example, replace AppTitle with your title.

Hiding Safari User Interface Components

On iOS, as part of optimizing your web application, have it use the standalone mode to look more like a native application. When you use this standalone mode, Safari is not used to display the web content—specifically, there is no browser URL text field at the top of the screen or button bar at the bottom of the screen. Only a status bar appears at the top of the screen. Read Changing the Status Bar Appearance for how to minimize the status bar.

Set the apple-mobile-web-app-capable meta tag to yes to turn on standalone mode. For example, the following HTML displays web content using standalone mode.

You can determine whether a webpage is displaying in standalone mode using the window.navigator.standalone read-only Boolean JavaScript property. For more on standalone mode, see apple-mobile-web-app-capable .

Changing the Status Bar Appearance

If your web application displays in standalone mode like that of a native application, you can minimize the status bar that is displayed at the top of the screen on iOS. Do so using the status-bar-style meta tag.

This meta tag has no effect unless you first specify standalone mode as described in Hiding Safari User Interface Components . Then use the status bar style meta tag, apple-mobile-web-app-status-bar-style , to change the appearance of the status bar depending on your application needs. For example, if you want to use the entire screen, set the status bar style to translucent black.

For example, the following HTML sets the background color of the status bar to black:

For more on status bar appearance, see the “UI Bars” chapter of iOS Human Interface Guidelines .

Linking to Other Native Apps

Your web application can link to other built-in iOS apps by creating a link with a special URL. Available functionality includes calling a phone number, sending an SMS or iMessage, and opening a YouTube video in its native app if it is installed. For example, to link to a phone number, structure an anchor element in the following format:

For a complete look of these capabilities, see Apple URL Scheme Reference.

Copyright © 2016 Apple Inc. All Rights Reserved. Terms of Use | Privacy Policy | Updated: 2016-12-12

Источник