Розробка, підтримка, SEO, просування, соцмережі та реклама сайтів ☣
Кабінет клієнта
Зареєструватись Забули пароль?
Створення та оптимізація сайтів » Блог » faq » Як підключити фавікон?

Як підключити фавікон?

Створюю і просуваю комерційні сайти та інтернет-магазини з 2008 року. 26-05-2013, 22:38 1 725 0
Як підключити фавікон?

Для того щоб на закладці браузера з'явився значок Вашого сайту необхідно підключити фавікон (favicon).

На сьогодні окрім стандартного значка .ісо браузери підтримують і картинки у різних форматах.

Бажано свій значок зробити прозорим у форматі .png,  це дозволить уникнути проблем з різними темами для браузерів.

 

1. Підключаємо стандартим методом, вставляємо між тегами <head></head>:


<link rel="icon" href="https://rullan.in.ua/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="https://rullan.in.ua/favicon.ico" type="image/x-icon">

 "shortcut icon" - для Internet Explorer.

В html5 застосовується атрибут "sizes" означає що іконка може масштабуватися (використовується векторний формат, як SVG). Якщо атрибут sizes відсутній, браузер відобразить іконку з розмірами, відповідними реальному розміру графічної картинки.

 


<link rel=icon href=favicon.png sizes="16x16" type="image/png">
<link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
<link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
<link rel=icon href=iphone.png sizes="57x57" type="image/png">
<link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">

2. Підключаємо фавікон для експрес-панелі опери:

Для цього нам потрібно створити картинку мінімум картинки розміром 114*114 пікселів та максимум 260*195 пікселів у форматі PNG, JPG или GIF (анімація не підтримується в gif).

 Вставлямо код, що нижче між тегами <head></head>:

<link rel="icon" type="image/png" href="http://path/to/logo.png">

 

3. Для власників Apple:

 

<link rel="apple-touch-icon" href="apple-touch-favicon.png"/>

Замість "apple-touch-icon" можна написати "apple-touch-icon-precomposed", що забере закругленість.

 


<!-- Favicon for Desctops -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
 
<!-- For third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
 
<!-- For iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
 
<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
 
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch- icon-precomposed.png">

 

:winked: Для усіх хто бажає створити власну іконку існує гарний сервіс - favicon-generator.org
 
 


Коментарі

⤹ Залишити свій коментар ⤸

  • оновити, якщо не видно коду
Останнє на сайті
  • seo

    Нова пачка для індексування сайтів

    coments/129 vievs/ 0
  • Блог

    Український двигунчик CMS для сайту

    coments/388 vievs/ 0
  • Блог

    Що таке сучасний хостинг?

    coments/472 vievs/ 0
Останнє в магазині
Картинка в meta з додаткового поля Картинка в meta з додаткового поля / Платні модулі DLE
Коментарі
Популярне на сайті

Для усіх любителів Анекдотів українською існує чудовий сайт з безліччю приколів, смішних історій та відео: Анекдоти

Тарифні плани

Потужний старт Стандартний запуск сайту від $400
  • - ♜ -
  • В стартовий тарифний план входить:

  • Розробка та налаштування сайту
  • Семантичне ядро
  • Оптимізація швидкості
  • Наповнення до SEO 5 сторінок
  • Ліцензія двигунчика DLE
Просунутий SEO оптимізований сайт від $700
  • - ♚ -
  • В SEO тарифний план входить:

  • Створення та налаштування сайту
  • Семантичне ядро
  • Оптимізація швидкості
  • Наповнення до SEO 10 сторінок
  • Ліцензія двигунчика DLE
  • 5 силок + перелінковка
Імперський винущувач конкурентів від $999
  • - ♛ -
  • В імперський тарифний план входить:

  • Розробка сайту
  • Наповнення до SEO 20 сторінок
  • Повна оптимізація
  • Ліцензія двигунчика DLE
  • МОЄ НАТХНЕННЯ та ДОСВІД!
/* soc-knopki */