[Come] Creare una Favicon e Apple Icona per il tuo sito web

Apple iPhone / iPad

Da alcuni anni, le favicon che avevano perso gran parte della loro rilevanza sono state resuscitate dal momento che sempre più browser ora le supportano e, di fatto, le rendono una parte molto visiva dell'esperienza dell'utente. Anche tablet e browser per smartphone fanno uso di queste icone. Ciò ha portato a una maggiore importanza di avere una buona favicon. Tuttavia, le modalità di presentazione di queste icone variano a seconda del cliente che naviga nel sito web. I desktop richiedono una determinata icona, Apple i dispositivi richiedono qualcosa di diverso, anche le dimensioni diverse complicano le cose. 

 

Contenuti[Mostra]

Una soluzione semplice - Generatore di icone online gratuito per Apple e icone Favicon

 Iconifier.net è una soluzione semplice che dato un JPG quadrato, GIF o PNG genererà un set di icone di varie dimensioni in modo che tu possa usare e scegliere quelle che vuoi supportare sul tuo sito web. Devi solo scaricare le icone generate e incorporarle nel codice del tuo sito web. Puoi integrare questi passaggi nel tuo processo di web design.

Incorpora le icone delle favicon nel tuo sito web

Dopo aver creato l'icona favicon.ico utilizzando Iconifier.net sopra, e averla posizionata nella root del tuo sito web aggiungi il seguente codice tra i e del tuo sito web

I Apple icone

Dopo aver creato le varie icone utilizzando il sito sopra, dovrai includere anche un codice leggermente diverso per Apple Dispositivi iPhone/iPad (e possibilmente Android). Carica nuovamente i file icona generati nella radice del tuo sito Web e inserisci il seguente codice tra i tag HEAD.

<link rel=”apple-touch-icon” size=”114×114″ href=”/touch-icon-114×114.png” />

<link rel=”apple-touch-icon” size=”72×72″ href=”/touch-icon-72×72.png” />

<link rel=”apple-touch-icon” href=”/touch-icon-iphone.png” />

I dispositivi iOS lo gestiranno automaticamente nel loro browser e ridimensioneranno e aggiungeranno alcuni effetti di conseguenza affinché corrispondano allo stile del dispositivo su cui vengono visualizzati.

Per inciso, i grandi sviluppatori iOS e Android non sono facili da assumere, se stai cercando di assumere un buon sviluppatore di app e sai come trovare un buon candidato ti abbiamo coperto CollectiveRay. - ti mostreremo tutti i posti migliori per trovare buoni candidati.

Icone per dispositivi Android

Android si è basato su Apple tocca le icone ma aspettati che le icone siano già nella loro versione finale. Questa versione finale è "PRECOMPOSTA" e i dispositivi Android si aspettano che questo tag sia a posto. Quindi carica nuove versioni, con nomi leggermente diversi (come l'aggiunta di precomposti nel nome) e quindi aggiungi il seguente markup. La parte più importante è rel=apple-touch-icon-precomposta. Metti i file nella root del tuo sito web e aggiungi questo codice tra i e tag del tuo html

<link rel=”apple-touch-icon-precomposta” size=”114×114″ href=”/apple-touch-icon-114×114-precomposed.png”>

<link rel=”apple-touch-icon-precomposta” size=”72×72″ href=”/apple-touch-icon-72×72-precomposed.png”>

<link rel=”apple-touch-icon-precomposed” href=”/touch-icon-iphone-precomposed.png”>

Maggiori dettagli su Favicon possono essere trovati su Wikepedia: https://en.wikipedia.org/wiki/Favicon

L'autore
David Attard
Autore: David AttardSito web: https://www.linkedin.com/in/dattard/
David ha lavorato nel o intorno al settore online / digitale negli ultimi 18 anni. Ha una vasta esperienza nei settori del software e del web design utilizzando WordPress, Joomla e le nicchie che li circondano. In qualità di consulente digitale, il suo obiettivo è aiutare le aziende a ottenere un vantaggio competitivo utilizzando una combinazione del loro sito Web e delle piattaforme digitali disponibili oggi.

Un'altra cosa... Sapevi che anche le persone che condividono cose utili come questo post sembrano FANTASTICHE? ;-)
Fatti un favore: lasciare un utile commenta con i tuoi pensieri, quindi condividi questo articolo sui tuoi gruppi di Facebook che lo troverebbero utile e raccogliamo insieme i frutti. Grazie per la condivisione e per essere gentile!

Disclosure: Questa pagina può contenere collegamenti a siti esterni per prodotti che amiamo e consigliamo vivamente. Se acquisti prodotti che ti suggeriamo, potremmo guadagnare una commissione per segnalazione. Tali commissioni non influenzano le nostre raccomandazioni e non accettiamo pagamenti per recensioni positive.
 

 

Miglior plug-in per la memorizzazione nella cache

Rendi il tuo sito web più veloce 

Passo dopo passo - corso gratuito via email, come caricare il tuo sito web less di 1 secondo  

 

chi siamo noi?

CollectiveRay è gestito da David Attard - lavorando dentro e intorno alla nicchia del web design da più di 12 anni, forniamo suggerimenti utili per le persone che lavorano con e sui siti web. Gestiamo anche DronesBuy.net, un sito Web per appassionati di droni.

David attard

 

 

Autore / i in primo piano su:  Inc Magazine Logo   Logo di Sitepoint   Logo CSS Tricks    logo webdesignerdepot   Logo WPMU DEV   e molti altri ...